项目有一个需求是展示一个部门信息,但是这个部门下面有可能还存在子部门,用一般的trrPanel感觉效果不是太好,在官方的api上面找到treeGrid控件正好可以满足需求,但是悲催的是把api里面的代码拷到程序里面后没有效果,根据反复的修改终于可以用了:
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也有些不一样
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给出的那个格式
相关推荐
用extjs4 TreeGrid做的report报表
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo,没一个可靠的,于是乎自己折腾中...感兴趣的朋友可以了解下本文或许对你有所帮助
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
NULL 博文链接:https://bernoulli.iteye.com/blog/1885567
一个包含多语言的TreeGrid例子集合。
extjs 3.31 TreeGrid 我的小改动,实现静态页面加载json到TreeGrid里面
extjs4带checked的treegrid.代码十分简洁
Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up...
学习extjs资料,tree合成grid,很不错的视频文件,值得收藏
extjs树型表格组件的使用示例,详细说明可以参见http://blog.csdn.net/snail_spoor/article/details/39698037
ext 可编辑treegrid组件 实用
EXTJS4.2 Sencha Architect22 treegrid tree checkbox treegrid tree 通过store显示内容,能够通过checkbox点击勾选 其他功能,网上都能找到,就没有再写
1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...
Extjs Tree + JSON + Struts2 例子
head>标签里面, 复制代码代码如下: <style type=”text/css”> .x-tree-node-collapsed .x-tree-node-icon { background:transparent url(web/css/images/default/tree/1.gif); } .x-tree-node-expanded ...
感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html