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

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

ExtJSAccordion範例.png

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

ExtJSAccordion.png

主要的程式碼在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]
                
    });

按我測試

程式碼下載

發表迴響