【ExtJS】一個簡單的TreePanel

　　在ExtJS中，構造一個樹形結構變得很簡單。

　　需要用到的：

　　　　Ext.tree.Panel

　　　　　　TreePanel提供樹形結構的UI表示的樹狀結構數據。 一個TreePanel必須綁定一個Ext.data.TreeStore。TreePanel通過columns配置，支持多列。

　　　　Ext.data.TreeStore

　　　　　　TreeStore是一個允許內嵌數據的存儲區實現。

　　　　　　它為加載節點提供了一些方便的方法， 並能夠使用分層樹狀結構來結合一個store。 此類也可以方便的從Tree中進行傳播一些事件。

　　此外，還有能用到的一些配置屬性：

　　　　Ext.data.TreeStore:

　　　　　　expanded: true/false　　//用來設置文件夾默認展開(true)或者收縮(false),默認為false

　　　　　　root: {}　　　　　　　　 //根節點,節點設置的開始

　　　　　　children: [{},{}]　　　  //子節點的開始

　　　　　　leaf: true/false　　　　  //用來辨識該文件是否還有子節點，從而判斷是否為本節點渲染展開圖標或箭頭。true為沒有子節點，默認為flase

　　　　Ext.tree.Panel:

　　　　　　store: store　　　　　　//該樹結構關聯的數據store

　　　　　　rootVisible: true/false　//是否隱藏根節點

　　其他諸如"width"、"height"、margin、border、renderTo等皆有的配置屬性就不提了。

---

　　接下來，上代碼：

Ext.define('My.TreeStore',{
    extend: 'Ext.data.TreeStore',
    root: {
        expanded: true,
        children: [
           { text: 'src', expanded: true, children: [
                { text: 'file1',leaf: true },
                { text: 'file2',leaf: true }
            ]},
            {text: 'file', leaf: true}
        ]
    }
});

Ext.define('My.TreePanel',{
    extend: 'Ext.tree.TreePanel',
    xtype: 'mytreepanel',    
    width: 300,    
    rootVisible: true,    
});

Ext.onReady(function(){
    var store = Ext.create('My.TreeStore');
    var treepanel = Ext.create('My.TreePanel',{
        store: store,
        renderTo: Ext.getBody()
    });
});

結果：

　　　　　　

---

　　下一步，通過后台遍歷文件目錄，然后Extjs向后台發出請求，后台響應回一個JSON格式的數據，再然后生成遍歷樹，給樹添加點擊事件，在另一個panel里構建一個資源管理器，點擊遍歷樹的文件夾會在資源管理器里展示文件夾內的所有文件......暫時考慮到這里吧。