extjs4 非同步樹的寫法

The data for this tree is asynchronously loaded through a TreeStore and AjaxProxy.

js程式碼如下：

Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.tip.*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'organization!getDirectSubordinates.action'
        },
        root: {
            text: '根節點',
            id: '0',
            expanded: true
        },
        folderSort: true,
        sorters: [{
            property: 'text',
            direction: 'ASC'
        }]
    });

    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible:false,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop'
            }
        },
        renderTo: 'tree-div',
        height: 300,
        width: 250,
        title: 'Files',
        useArrows: true,
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Expand All',
                handler: function(){
                    tree.expandAll();
                }
            }, {
                text: 'Collapse All',
                handler: function(){
                    tree.collapseAll();
                }
            }]
        }]
    });
});

java程式碼如下：

package com.dahuatech.work.action;

@Namespace("/")
@Scope("prototype")
@Controller(value = "organization")
public class OrganizationAction extends BaseAction {
    private String node;
   
    @Action(value = "getDirectSubordinates")
    public String getDirectSubordinates() throws Exception {
        JSONArray json = new JSONArray();
        if (node.equals("0")) {
            JSONObject object = new JSONObject();
            object.put("id", "1");
            object.put("text", "廣東");
            object.put("cls", "folder");
            json.add(object);
        }
        if (node.equals("1")) {
            JSONObject ob1 = new JSONObject();
            ob1.put("id", "2");
            ob1.put("text", "11RPU");
            ob1.put("cls", "folder");
            json.add(ob1);
        }
        if (node.equals("2")) {
            JSONObject ob1 = new JSONObject();
            ob1.put("id", "3");
            ob1.put("text", "11Chanel");
            ob1.put("leaf", true);
            ob1.put("cls", "file");
            JSONObject ob2 = new JSONObject();
            ob2.put("id", "4");
            ob2.put("text", "22Chanel");
            ob2.put("leaf", true);
            ob2.put("cls", "file");
            json.add(ob1);
            json.add(ob2);
        }
        ActionContext ctx = ActionContext.getContext();
        HttpServletResponse response = (HttpServletResponse) ctx
                .get(ServletActionContext.HTTP_RESPONSE);
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(json.toString());
        return null;
    }
   
    public String getNode() {
        return node;
    }

    public void setNode(String node) {
        this.node = node;
    }
}
作用：生成非同步請求時的json資料。

當展開節點時，前臺會把json資料中節點的id通過node引數傳送到後臺。