ExtJS4 樹元件

Tree

         相關的類有Panel，Tree， NodeInterface，TreeStore，View。從treePanel看起，treePanel主要提供樹結構資料的UI展現。一個TreePanel必須繫結一個TreeStore。TreePanel支援通過列配置多個列。

樹節點NodeInterface 提供配置項： 
allowDrag：是否允許拖拽
expandable：是否允許摺疊
expanded：是否展開
leaf：是否是葉子
isFirst：
isLast：
loaded：
loading：
root：根
text：文字……

//樹節點配置[root>>children]每個節點有： text顯示文字, leaf是否是葉子, expanded是否展開，等屬性。
var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "tickets", leaf: true }
        ]
    }
});
//建立TreePanel rootVisible表示根節點是否顯示
Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});
 

//不需要每個引數一一解釋，要注意的是每個引數都有一個預設值，沒有明確配置的時候，使用的是預設值。
//樹節點的Itemclick事件l
Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    listeners: {
	itemclick:function(view,record,item,index,e,eOpts){ 
                 // 從record item index 等引數中我們可以獲得大部分滿足我們應用的資訊
               if(record.get('text')=='book'){// do somethings……};
               if(record.get('text')=='detetion'){//do something……}
        }
    }
    renderTo: Ext.getBody()
});