Ext JS(1)-初探Ext JS @ 殘想的程式筆記

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

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

examples板本：

獨立出來版本：

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

Ext JS的基本架構如下：

必須完整引用這些檔案才能正常值行，以下就來分享一下最簡單的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>