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参数传送到后台。

你可能感兴趣的:(extjs4)