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

评论

8 楼 东辉VS风行 2013-07-08  

东辉VS风行 写道

写的很好，没看懂的就要自己多看些书，别喷楼主  我感觉楼主写的挺好的

那些不知道node的 就不能加个断点调试下

再联系下action的特性 属性通过get和set方法自动传递

问题不就解决了 自己是个大笨蛋 还喷楼主

7 楼 东辉VS风行 2013-07-08  

写的很好，没看懂的就要自己多看些书，别喷楼主  我感觉楼主写的挺好的

那些不知道node的 就不能加个断点调试下

再联系下action的特性 属性通过get和set方法自动传递

问题不就解决了 自己是个大笨蛋 还喷楼主

6 楼 546968662 2013-04-26  

博主给解释一下异步请求时为什么会带上节点参数id

5 楼 zipmoon 2012-08-30  

不给lib包 不给配置 还不如不写 没前途的人

4 楼 yingwuhahahaha 2012-07-13  

lbyzx123 写道

hable 写道

看不明白啊,能不能加点注释

很简单呀，既然是异步，就是点击一下，去请求下级的json数据，用firefox看一下就明白了，node就是父级节点的id.可以在程序里直接使用。

恩,lz的代码确实是可用的,其实实现的关键在于 TreeStore的节点在expand的时候,会把自己的id当做一个名为node的参数放在ajax请求里,没有理解的人都是没做实验的,这个在文档里是没有的,我也是看了楼主的例子做了实验才发现的.

谢谢了

3 楼 TJYCHYANGCHENHUI 2012-05-02  

写东西写的真垃圾！你就不能写好点啊[b][/b]

2 楼 lbyzx123 2011-08-29  

hable 写道

看不明白啊,能不能加点注释

很简单呀，既然是异步，就是点击一下，去请求下级的json数据，用firefox看一下就明白了，node就是父级节点的id.可以在程序里直接使用。

1 楼 hable 2011-08-29  

看不明白啊,能不能加点注释