extjs tree实例,extjs带复选框的树

定义store

var store = Ext.create('Ext.data.TreeStore', {
    scope: this,
    proxy: {
        type: 'ajax',
        url: "test/menu/listV2",
        timeout: 900000,
        reader: {
            type: 'json',
            root: 'res'//数据
        },
        //传参
        extraParams: {
            'roleId': roleId
        }


    },
    root: {
        text: 'root',
        id: '-1',
        expanded: true
    },
    listeners: {
        scope: this,
        beforeload: function (store) {
            store.getProxy().extraParams.roleId = source.com_roleId.getValue();
        }
    }

});

调用url接口获取后台数据

在listeners里面增加传递到后台的参数，url接口返回数据，

   var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: false,
        useArrows: true,
        frame: true,
        title: 'CheckTree',
        width: 500,
        height: 700,
        dockedItems: [{
            xtype: 'toolbar',
            scope: this,
            items: {
                text: '设定权限',
                handler: function () {
                    var records = tree.getView().getChecked(),
                    menuIds = [];
                    authIds = [];
                    Ext.Array.each(records, function (rec) {
                        if(rec.get('type') == '2')
                            menuIds.push(rec.get('id'));
                        else if(rec.get('type') == '3')
                            authIds.push(rec.get('id'));

                    });
                    var authVo = {"menuCode":menuIds,"authId":authIds};

                    Ext.Ajax.request({
                        url: 'wms/menu/setting?roleId='+source.com_roleId.getValue(),
                        headers: {'Content-Type': "application/json; charset=utf-8"},
                        method: 'POST',
                        params:  Ext.util.JSON.encode(authVo),
                        scope: this,
                        success: function (response, options) {
                            var result = Ext.util.JSON.decode(response.responseText);
                            if (result.success) {
                                Ext.success(result.msg)
                            } else {
                                Ext.error(result.msg);
                            }
                        },
                        failure: function (response, options) {
                            var result = Ext.util.JSON.decode(response.responseText);
                            Ext.error(result.msg);
                        }
                    });

                }
            }
        }]
    });

定义tree

tree.on('checkchange',function (node,flag){
        console.log("change！！！");
        if(flag){
            var pNode = node.parentNode;
            pNode.set("checked",flag);
            if(!node.isLeaf() && !node.isExpanded()){
                node.set("expanded","true")
            }
            var cnode = node.childNodes;
            for(var res in cnode){
                cnode[res].set("checked",flag);
            }
        }else{
            var cnode = node.childNodes;
            for(var res in cnode){
                cnode[res].set("checked",flag);
            }
        }
    });

tree事件处理，选中一个节点，默认全中他的全部子节点，并选中他的父节点。

后台数据结构

private String id;
private String text;
private String cls;
private boolean expanded;//是否展开
private Boolean leaf;//是否叶子
private boolean checked;//是否checkbox选中
private String type;
private List<MenuTree> res;//子节点

为什么这里用res，不用children，参考上一篇

Ext从后台一次性加载数据，循环获取子节点数据的问题