ExtJS4.x treegrid 控件复选框的研究

最近在研究ExtJS4.x版本，官方在发布包中包含了一个treegrid插件，先看下效果：

本人想在Controller中动态获取、设置左侧的复选框列。
这里是官方提供的示例：http://www.ostools.net/uploads/apidocs/extjs4.1/examples/tree/treegrid.html
这里具体的js： http://www.ostools.net/uploads/apidocs/extjs4.1/examples/tree/treegrid.js
官方示例中提供了几种列：treecolumn、templatecolumn、actioncolumn和checkcolumn
前三者不是本篇要说的，可以看下DEMO就明白，本篇主要说checkcolumn的动态获取与设置问题。

treepanel是继承至Ext.tree.Panel，Store也就是Ext.data.TreeStore类型了，看先下我的几个主要类。
注：在看本篇时请先了解ExtJS及其MVC开发模式，这不是本篇的重点，不清楚可以阅读API或本人其他文章。
2、Controller

Ext.define('Manage.controller.Authorize', {
    extend: 'Ext.app.Controller',
    requires: ['Ext.ux.CheckColumn'],
    stores: ['Category'],
    views: ['authorize.Config'],
    models: ['Category'],
    init: function () {
        this.control({
            'authorizeConfig button[action=selectAll]': {
                click: this.selectAll
            }
        })
    },
    selectAll: function (button) {
        //本文后写的代码都是放在这里，请注意。
    }
});

Controller需要与Model、Store、View一起分析，这里需要注意引用“Ext.ux.CheckColumn”，另外在app.js中加入如下代码：
Ext.Loader.setPath('Ext.ux', '/ExtJS/4.1/examples/ux');

3、Model

看下Model类：

Ext.define('Manage.model.Category', {
    extend: 'Ext.data.Model',
    fields: ['Check', 'Code', 'Name', 'English', 'ParentCode', 'ParentName', 'UploadCode', 'UploadName',
            'IsPage', 'IsMenu', 'IsMap', 'EnableConsult', 'PageUrl', 'MenuUrl', 'Sort'],
    proxy: Ext.create('Manage.proxy.Category')
});

注意这里的Check字段，主要是用来映射treegrid中的checkbox列。

4、Store

Ext.define('Manage.store.Category', {
    extend: 'Ext.data.TreeStore',
    model: 'Manage.model.Category',
    folderSort: true,
    defaultRootId: ''
});

5、Proxy

Ext.define('Manage.proxy.Category', {
    extend: 'Ext.data.proxy.Ajax',
    startParam: undefined,
    api: {
        read: '/Manage/Category/Query.aspx',
        update: '/Manage/Category/Update.aspx',
        create: '/Manage/Category/Add.aspx',
        destroy: '/Manage/Category/Delete.aspx'
    },
    reader: {
        type: 'json',
        root: 'children',
        idProperty: 'Code',
        messageProperty: 'message',
        successProperty: 'success'
    },
    writer: {
        type: 'json',
        root: ''
    }
});

这里实际上只用到的read，返回的json如下：

{
    "id": 0,
    "text": "根",
    "expanded": true,
    "leaf": false,
    "children": [{
        "Code": "11",
        "Name": "数据管理",
        "English": null,
        "ParentCode": null,
        "ParentName": null,
        "UploadCode": null,
        "UploadName": null,
        "IsPage": 0,
        "IsMenu": 1,
        "IsMap": 0,
        "EnableConsult": 0,
        "PageUrl": null,
        "MenuUrl": null,
        "Sort": 1,
        "iconCls": null,
        "leaf": false,
        "expanded": true,
        "children": [{
            "Code": "1111",
            "Name": "新闻管理",
            "English": null,
            "ParentCode": "11",
            "ParentName": "数据管理",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": null,
            "Sort": 1,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        }]
    },
    {
        "Code": "12",
        "Name": "系统管理",
        "English": null,
        "ParentCode": null,
        "ParentName": null,
        "UploadCode": null,
        "UploadName": null,
        "IsPage": 0,
        "IsMenu": 1,
        "IsMap": 0,
        "EnableConsult": 0,
        "PageUrl": null,
        "MenuUrl": null,
        "Sort": 2,
        "iconCls": null,
        "leaf": false,
        "expanded": true,
        "children": [{
            "Code": "1211",
            "Name": "文章模版",
            "English": null,
            "ParentCode": "12",
            "ParentName": "系统管理",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "tempList",
            "Sort": 1,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        }]
    },
    {
        "Code": "13",
        "Name": "系统配置",
        "English": null,
        "ParentCode": null,
        "ParentName": null,
        "UploadCode": null,
        "UploadName": null,
        "IsPage": 0,
        "IsMenu": 1,
        "IsMap": 0,
        "EnableConsult": 0,
        "PageUrl": null,
        "MenuUrl": null,
        "Sort": 3,
        "iconCls": null,
        "leaf": false,
        "expanded": true,
        "children": [{
            "Code": "1311",
            "Name": "角色管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "roleList",
            "Sort": 1,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1312",
            "Name": "管理员管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "adminList",
            "Sort": 2,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1313",
            "Name": "权限分配",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "authorizeConfig",
            "Sort": 3,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1314",
            "Name": "分类管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "categoryList",
            "Sort": 4,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1315",
            "Name": "文章管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": null,
            "Sort": 5,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        }]
    }]
}

6、View

最后看下视图：

Ext.define('Manage.view.authorize.Config', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.authorizeConfig',
    title: '权限配置',
    resizable: false,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    autoShow: true,
    iconCls: 'Groupkey',
    modal: true,
    buttonAlign: 'center',
    initComponent: function () {
        this.items = [
            {
                xtype: 'grid',
                flex: 1,
                title: '角色列表',
                titleAlign: 'center',
                border: false,
                selModel: Ext.create('Ext.selection.RowModel', { injectCheckbox: 1 }),
                store: 'Role',
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: 'Role',
                    dock: 'bottom',
                    displayInfo: true
                }],
                columns: [{
                    xtype: 'rownumberer',
                    width: 40,
                    align: 'center',
                    sortable: false
                }, {
                    header: '角色编号',
                    dataIndex: 'Code',
                    align: 'center',
                    flex: 1
                }, {
                    header: '角色名称',
                    dataIndex: 'Name',
                    align: 'center',
                    flex: 1
                }, {
                    header: '角色状态',
                    dataIndex: 'State',
                    align: 'center',
                    renderer: Manage.utility.Format.LockState,
                    flex: 1
                }]
            },
            {
                width: 1
            },
            {
                xtype: 'treepanel',
                flex: 1,
                title: '权限列表',
                titleAlign: 'center',
                border: false,
                useArrows: true,
                rootVisible: false,
                multiSelect: true,
                singleExpand: false,
                store: 'Category',
                bbar:[{
                    type: 'button',
                    iconCls: 'Bullettick',
                    action: 'selectAll',
                    text: '全选'
                }],
                columns: [{
                    xtype: 'checkcolumn',
                    dataIndex: 'Check',
                    width: 40,
                    stopSelection: false
                }, {
                    text: '编号',
                    width: 80,
                    sortable: true,
                    dataIndex: 'Code'
                }, {
                    xtype: 'treecolumn',
                    text: '名称',
                    width: 100,
                    sortable: true,
                    dataIndex: 'Name'
                }, {
                    text: '上传配置',
                    width: 100,
                    sortable: true,
                    dataIndex: 'UploadName'
                }, {
                    text: '管理路径',
                    width: 100,
                    flex: 1,
                    sortable: true,
                    dataIndex: 'MenuUrl'
                }]
            }
        ];

        this.buttons = [
            {
                text: '保存',
                action: 'submit'
            },
            {
                text: '重置',
                action: 'reset'
            }
        ];

        this.callParent(arguments);
    }
});

7、获取、设置Checkbox

如下代码放在控制器中（上文已注解）：

var grid = button.up('treepanel');	//由触发的buttom向上查询treepanel控件
var store = grid.getStore();		//这里通过grid获取store
console.log(store.getCount());		//这里会发现返回的是undefined，所以该方法不可行
var table = grid.getView();		//由grid获取Table对象	
var elems = table.getNodes();		//获取HTMLElement[]对象

for(var i=0;i<elems.length;i++){	//遍历所有对象
    var record = table.getRecord(elems[i]);//把HTMLElement转移成Record（Model）对象
    var check = record.get('Check');	//获取属性值
    if(check){
        console.log(record.get('Code'));
    }
    record.set('Check', !check);	//设置属性值
}