ExtJS 3.4.0 - Use TreePanel beforeload event to load children

在這邊要探討的是，假設我們要呈現一樹狀圖的功能清單，是否可以在一開始初始化時不用

先載入該目錄的Children，而當我們點擊目錄時才去做post action，進而在後端回傳相關的

JSON CODE。此時會想要了解，當下的JSON CODE要怎麼組織? 而當前端已呈列該Children

時，重新點選該目錄是否還會重復做post action的動作?

在這邊將舉個簡單的例子

一開始先載入兩個目錄型別的node，分別為test1, test2

相關code如下

var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
        title: '我擅長的技能',
        height: 300,
        width: 400,
        enableDD:true,
        containerScroll: true,
        rootVisible: false,
        //useArrows: true,
        autoScroll: true,
        animate: true,
        border: false,
        //checkModel: 'multiple',
        root: {
            nodeType: 'async',
            draggable: false
        },
        
        // auto create TreeLoader
        dataUrl: '/CheckTree/loadTree'
    });

tree.on({
  'beforeexpandnode':{
   fn: function(node, deep, ami){
    var n = node.attributes;
    alert(n.text);
    //tree.loader.dataUrl = '/CheckTree/loadTree?node111='+n.text;
    //tree.reload();
   },
   scope: this
  },
  'beforeload':{
   fn: function(node){
    var n = node.attributes;
    tree.loader.dataUrl = '/CheckTree/loadTree?node111='+n.text;
   }
  }
});

tree.getRootNode().expand();

後端部分

在這邊是利用Java 組JSON格式的hard code，因此就不另外show出程式碼了

從一開始initialize時，可以看出test1的子項目已經建立，因此當點擊test1時，不會做POST

而test2是沒有子項目建立的

當點擊test2後，ExtJS元件就會自動做POST動作，此時後端會輸出相關JSON CODE為OOXX

 NODE

beforeload event的行為，'/CheckTree/loadTree?node111='+n.text; 語法n.text會傳該node name，

此時servlet那依據當下的node name來決定要回傳哪種格式的JSON CODE.

因此，當您點擊test2時，所產生的JSON CODE只需要是它所屬的

[{"text":"OOXX","cls":"file","leaf":"true"}]