最近接到的新任務是用EXT JS去美化選單,EXT JS的官網提供了很多很棒的效果,而且也都有examples檔可以參考,
感覺上應該是個方便的工具,這次任務應該可以輕鬆解決  ^_^


但是實際使用上發現他的examples很難獨立出來使用,總是會有某些地方不太對勁,

examples板本:

right.jpg

獨立出來版本:
wrong.jpg

後來用httpWatch下去追,發現他必須要用他特定的架構下去跑才能成功,這應該是因為他原本就是設計成framework的關係吧,這下子只好先從他的架構著手了。

Ext JS的基本架構如下:

ext_framework.jpg 

必須完整引用這些檔案才能正常值行,以下就來分享一下最簡單的AJAX分頁選單的作法:

首先先定義ui檔,Tabs.ui.js:


TabsUi = Ext.extend(Ext.TabPanel, {
    activeTab: 0,
    width: 400,
    height: 250,
    initComponent: function() {
        this.items = [
            {
                xtype: 'panel',
                title: '會員列表'
            },
            {
                xtype: 'panel',
                title: '發票列表'
            },
            {
                xtype: 'panel',
                title: '媒體列表'
            },
            {
                xtype: 'panel',
                title: '資料分析'
            },
            {
                xtype: 'panel',
                title: '中獎名單'
            }
        ];
        TabsUi.superclass.initComponent.call(this);
    }
});

 

接下來實作Tab.js:


Tabs = Ext.extend(TabsUi, {
    initComponent: function() {
        Tabs.superclass.initComponent.call(this);
    }
});

 

最後完成index.html,將Tab載入:

<html>
<head>
    <title>project.xds</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="Tabs.ui.js"></script>
    <script type="text/javascript" src="Tabs.js"></script>
    <script type="text/javascript">
    Ext.onReady(function() {
    var MyTabs = new Tabs({
        renderTo: Ext.getBody()
    });
    MyTabs.show();
    });
    </script>
</head>
<body></body>
</html>

這樣就可以完成一個以前寫起來非常麻煩的分頁選單了。

tab_fin.jpg 

創作者介紹

殘想的程式筆記

blakechen 發表在 痞客邦 留言(0) 人氣()