Ext AccordionLayout 佈局

Accordion佈局類似於QQ中的伸縮選單，通過點選可以摺疊展開並伴有動畫效果，使用該佈局只需加上layout:'accordion'即可，如下程式碼：

 

new Ext.Panel({

renderTo:"hello",

title:"容器元件",

width:500,

height:200,

layout:"accordion",

layoutConfig: {

 

titleCollapse:true,

 

activeOnTop:true,

animate: true

},

items:[{title:"子元素1",html:"這是子元素1中的內容"},

{title:"子元素2",html:"這是子元素2中的內容"},

{title:"子元素3",html:"這是子元素3中的內容"}

]

}

);
結合上面程式碼，使用Accordion佈局須注意事項：

第一：layoutConfig屬性用以設定佈局屬性，titleCollapse表示點選item標題將會摺疊展開元件，而不用點選摺疊箭頭，activeOnTop表示當某個元件展開後會位於頭部。

 

第二：Itmes中每個item必須設定title，否則會出錯。