[ExtJS]範例Accordion layout的使用與配置

在ExtJS裡Accordion常用在Menu選單上來區分各大區塊的主要大分類選單，加上Tree的應用就可以顯示出相當豐富的選單內容了，樣式大概如下圖。

ExtJS的Tree的應用可以參考以篇[ExtJS]範例Tree元件的使用Ext.tree.TreePanel，底下範例也會用這些Tree狀資料資料來建構這個範例。結果畫面如下圖：

主要的程式碼在Accordion是一個layout元素，而不是一個compoment元件，所以並不是利用new來產生這一個panel進而控制動作，而Accordion也可以設定animate動作。程式碼如下：

var viewport = new Ext.Viewport({
    id : 'myview',
    layout:'accordion',
    width:250,
    height:350,
    layoutConfig:{
        titleCollapse:true,
        animate:true,
        activeOnTop:false
                        
    },
    items:[tree1,tree2]
                
    });

按我測試

程式碼下載