介紹Ext.data.TreeStore：
這個組件繼承自Ext.data.AbstractStore
本篇講解了如何構造並且做一些基本使用，如果有什么疑問可以聯系我QQ1330771552
首先還是介紹下這個控件內部屬性。對每一個屬性做一下分析。
autoLoad： 自動加載，實際上你會發現在Ext4.X中這個屬性沒有多少意義，后面會做解釋。 autoSync： 自動同步，比如我們用普通editingGrid的時候，修改了數據自動保存到store（不是保存到后台） clearOnLoad： 在加載之前刪除原來的所有子節點，可能在4.X中都會遇到tree第二次加載的時候數據重復，造成混亂，你可以試試這個屬性。 clearRemovedOnLoad： 你加載一個節點的時候，會自動把已經刪除的節點記錄清除，可以參考getRemovedRecords() 函數 defaultRootId： 默認的根節點（root）id，這個是在異步加載樹種很重要的，就是展開根節點的時候向后台發送請求的參數（稍后講解） defaultRootProperty： 子節點的屬性名，用處不大。就是修改什么屬性作為子節點解析用的。 fields： 屬性域，跟Ext.data.Store的fields一樣使用。 filters： 過濾器。 folderSort： 排序，設置為true自動為子節點排序 listeners： 監聽器。定義觸發事件。 model： 跟Ext.data.Store的model一樣。 nodeParam： 節點參數，注意這個是參數名，defaultRootId是參數值。 proxy： 數據代理。這個跟Ext.data.Store一樣。 root： 根節點，ExtJs的樹允許你設置一個默認的根節點，也就是說不加載數據的情況下會顯示這個作為基礎的節點。通常我們使用這個節點代替treePanel的title。用來標示這棵樹的目的。 storeId：store的唯一性標示，便於Ext.data.StoreManager管理，可以參看Ext.data.StoreManager. lookup( String/Object store ) : Ext.data.Store 說實話，這些屬性有的我也沒用過，太多了，記不過來。
下面給出一棵樹的完整代碼
var oaStore = Ext.create('Ext.data.TreeStore', { // 根節點的參數是parentId nodeParam : 'parentId', // 根節點的參數值是0 defaultRootId : 0, // 屬性域 fields : [{ name : 'className', type : 'string' }, { name : 'text', type : 'string' }, { name : 'iconCls', type : 'string' }], // 數據代理 proxy : { // 請求方式 type : 'ajax', // 請求網址 url : GET_FUNCTION_NODE_URL } });
上面是一棵樹的代碼，下面是分析代碼
nodeParam : 'parentId',就是指定這棵樹的根節點屬性參數名。
defaultRootId : 0,就是制定這棵樹的根節點參數值。
Ext.data.TreeStore默認是每個節點都帶有id屬性的。比如如下json
{id:’1’,className:’Ext.le.MyView’,text:’我的視圖’,iconCls:’icon_depart’}
這個json是能解析到id屬性的，你獲取了store某條record直接.get(‘id’)就會有值。就是1
ExtJs的tree在點擊可以展開的節點的時候，會向后台發送請求，請求的url就是proxy里面的url，同時還會帶上參數參數就是當前點擊節點的id（就是上面說的id）。
注意：當然Ext很智能，當你的樹的某個節點已經有子節點了的情況下，他不會去發送請求獲取子節點的。
事實上剛才的store在我的項目里面讀取了這樣一個json結構
[{ "children" : [{...}, {...}], "className" : "","expandable" : true, "expanded" : false, "functionNodeName" : "人事管理", "iconCls" : "", "id" : 1, "leaf" : false, "memo" : "","parentId" : 0, "primaryKey" : 1, "text" : "人事管理" }]
其中的expandable就是控制這個節點可以展開的。有了他節點就會可以展開（也就是有效箭頭或者“+”圖標在旁邊），並且會發送請求子節點。
想想，后台能獲取當前點擊的那個節點的id，想得到子節點很容易了，
注意：expandable屬性和children屬性有這樣的沖突，當children屬性是array（[]）長度是0的時候，expandable被視為false，也就是說記載的數據有0個children就認為不可以展開
select * from department where parentId=````````聰明的你懂的。
這樣就能構成異步樹。
這棵樹如何被應用到panel中呢
事實上你只需要這樣的代碼就能完成。
{ title : '模塊菜單', xtype : 'treepanel', rootVisible : false, store : oaStore, useArrows : true }
看看，是不是很簡單，一個標題，一個xtype，rootVisible屬性控制能不能看到根節點，關於這個屬性，其實就是控制是否顯示你默認的那個根節點，其實如果你的根節點expanded屬性（是否已經展開）是false然后treePanel rootVisible是false那么你的樹在頁面渲染完成的時候是什么也看不到的。而且你可能無法看到，至少你應該允許看到根節點，然后打開根節點才能看到下面的內容，或者你的根節點隱藏，默認根節點已經展開。
剛才的treePanel是個不完整的例子，是json格式的，下面給出Ext.create格式
不要誤會，這個跟上面的store沒有任何關系
var deptGrid = Ext.create('Ext.tree.Panel', { store : deptStore, useArrows : true,//展開按鈕圖標是箭頭還是+- rootVisible : true,//允許看到跟節點 columns : deptColumns(),//構造列 tbar : deptTbar,//不解釋 padding : 5,//不解釋 columnLines : true,//列分割線 });
這是一個非常基礎的列子，還帶了一些沒用的屬性，不解釋的就是么哦用的屬性，可有可無包括columns
如果你不寫columns會默認使用text、id等這些默認屬性，詳細可以參看Ext.data.NodeInterface和Ext.tree.Panel后續章節會講解這些相關控件。
這棵樹能做到什么效果呢？
很簡單，默認記載好的樹，只呈現最基本的節點，當你點擊可展開的節點的時候會去請求后台加載其子節點，發送的url大致如下
下面是googleChrome中netWork監控得到的請求，這個請求攔截於我展開一個節點的時候發生的。
- 1. Request URL:
http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action?_dc=1344480677744&parentId=1
- 2. Request Method:
GET
- 3. Status Code:
200 OK
- 1. Query String Parameters
- 1. _dc:
1344480677744
- 2. parentId: （看到這個屬性沒有，就是我們自己定義的nodeParam）
1
注意這個url
http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action?_dc=1344480677744&parentId=1
http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action到這里是我的后台地址。
后面的_dc=1344480677744是用來做唯一標示不造成緩存。
parentId=1 這個就是Ext幫助我們構造異步加載樹的參數。
至於如何不異步加載，你可以直接把json構造好樹的樣子，子節點使用children標示.
給出一個同步加載的json例子
[{ "children" : [{ "children" : [{ "children" : [], "companyName" : "123asd", "deleter" : 0, "departmentName" : "123asds", "duty" : "sa", "expandable" : true, "expanded" : false, "id" : 4, "leader" : 1, "leaf" : true, "memo" : "ad", "primaryKey" : 4, "text" : "123asds" }, { "children" : [], "companyName" : "愛上", "departmentName" : "愛上", "duty" : "阿斯達", "expandable" : true, "expanded" : false, "id" : 3, "leader" : 1, "leaf" : true, "memo" : "阿斯達", "parentId" : 2, "primaryKey" : 3, "text" : "愛上" }], "companyName" : "葉子公司", "departmentName" : "大陸分公司", "duty" : "沒職位", "expandable" : true, "expanded" : false, "id" : 2, "leader" : 1, "leaf" : false, "memo" : "沒有", "primaryKey" : 2, "text" : "大陸分公司" }], "companyName" : "葉子集團", "deleter" : 0, "departmentName" : "大陸總公司", "duty" : "總職務", "expandable" : true, "expanded" : false, "id" : 1, "leader" : 1, "leaderName" : "", "leaf" : false, "memo" : "沒有備注", "primaryKey" : 1, "text" : "大陸總公司" }] 這樣結構是json會直接呈現所有的節點。