extjs4 treeGrid使用
项目有一个需求是展示一个部门信息,但是这个部门下面有可能还存在子部门,用一般的trrPanel感觉效果不是太好,在官方的api上面找到treeGrid控件正好可以满足需求,但是悲催的是把api里面的代码拷到程序里面后没有效果,根据反复的修改终于可以用了:
-
[javascript]
Ext.define('SimpleTasks.view.organize.DeptGrid', {
extend : 'Ext.tree.Panel',
xtype : 'DeptGrid',
rootVisible : false,
id : "deptGrid",
collapsible : false,// 取消折叠按钮
useArrows : true,
rootVisible : false,
multiSelect : false,
singleExpand : true,
store : 'organize.DeptGrids',
columns : [{
xtype : 'treecolumn',// treecolumn只用放在需要点击展开的列上面(api上面每个列都放了这个)
text : '部门名',
dataIndex : 'name',
flex : 1
}, {
text : '部门领导',
dataIndex : 'leaderName',
flex : 1
}, {
text : '部门人数',
dataIndex : 'employeeCount',
flex : 1
}]
});Ext.define('SimpleTasks.view.organize.DeptGrid', {
extend : 'Ext.tree.Panel',
xtype : 'DeptGrid',
rootVisible : false,
id : "deptGrid",
collapsible : false,// 取消折叠按钮
useArrows : true,
rootVisible : false,
multiSelect : false,
singleExpand : true,
store : 'organize.DeptGrids',
columns : [{
xtype : 'treecolumn',// treecolumn只用放在需要点击展开的列上面(api上面每个列都放了这个)
text : '部门名',
dataIndex : 'name',
flex : 1
}, {
text : '部门领导',
dataIndex : 'leaderName',
flex : 1
}, {
text : '部门人数',
dataIndex : 'employeeCount',
flex : 1
}]
});
store也有些不一样
[javascript]
Ext.define('SimpleTasks.store.organize.DeptGrids', {
extend : 'Ext.data.TreeStore',
model : 'SimpleTasks.model.organize.Department',
proxy : {
type : 'ajax',
url : Ext.dp + '/organize/queryDept.do'
},
folderSort : true
});Ext.define('SimpleTasks.store.organize.DeptGrids', {
extend : 'Ext.data.TreeStore',
model : 'SimpleTasks.model.organize.Department',
proxy : {
type : 'ajax',
url : Ext.dp + '/organize/queryDept.do'
},
folderSort : true
}); 这个store没法取消自动加载,网上的解决办法是在store里面的beforeload事件上面作处理关于后台需要返回的json格式,官方的api给出的返回格式是{"text":".","children": []}这样的格式。但是我使用的时候就把后台的list集合转换成json格式传到前台就能显示,不需要去拼成api给出的那个格式