ExtJS4.x treegrid 控件复选框的研究
1 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');//获取grid对象
var store = grid.getStore();//通过grid获取store对象，经测试不可行
console.log(store.getCount());//这里获取不到总行数
var table = grid.getView();//获取table对象
//方法一
var elems = table.getNodes();//获取所有HTMLElement对象
for(var i=0;i<elems.length;i++){//遍历所有HTMLElement对象
var record = table.getRecord(elems[i]);//转换成Record（Model）对象
var check = record.get('Check');//获取checkbox
if(check){//判断有无选中
console.log(record.get('Code'));
}
record.set('Check', !check);//设置复制框
}
//方法二
var tableStore = table.getStore();//由Table获取Store对象
for(var i=0;i<tableStore.getCount();i++){
var record = tableStore.getAt(i);//获取第i个record
var check = record.get('Check');
if(check){
console.log(record.get('Code'));
}
record.set('Check', !check);
}