【ExtJS】一個簡單的TreePanel

標籤：style   blog   http   io   color   ar   使用   sp   檔案   

　　在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裡構建一個資源管理員，點擊遍曆樹的檔案夾會在資源管理員裡展示檔案夾內的所有檔案......暫時考慮到這裡吧。

【ExtJS】一個簡單的TreePanel