想要实现 TreeGrid的效果,打开官方例子却看不到效果,怎么办呢?我是这样实现的
/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();
var mydata = [
{
task:'Project: Shopping',duration:13.25,user:'Tommy Maintz',iconCls:'task-folder',expanded: true,
children:[
{task:'Housewares',duration:1.25,user:'Tommy Maintz',iconCls:'task-folder',
children:[
{task:'Kitchen supplies',duration:0.25,user:'Tommy Maintz',leaf:true,iconCls:'task'},
{task:'Groceries',duration:.4,user:'Tommy Maintz',leaf:true,iconCls:'task'},
{task:'Cleaning supplies',duration:.4,user:'Tommy Maintz',leaf:true,iconCls:'task'},
{task: 'Office supplies',duration: .2,user: 'Tommy Maintz',leaf: true,iconCls: 'task'}
]
},
{
task:'Remodeling',duration:12,user:'Tommy Maintz',iconCls:'task-folder',expanded: true,
children:[
{task:'Retile kitchen',duration:6.5,user:'Tommy Maintz',leaf:true,iconCls:'task'},
{task:'Paint bedroom',duration: 2.75,user:'Tommy Maintz',iconCls:'task-folder',
children: [
{task: 'Ceiling',duration: 1.25,user: 'Tommy Maintz',iconCls: 'task',leaf: true},
{task: 'Walls',duration: 1.5,user: 'Tommy Maintz',iconCls: 'task',leaf: true}
]
},
{task:'Decorate living room',duration:2.75,user:'Tommy Maintz',leaf:true,iconCls:'task'},
{task: 'Fix lights',duration: .75,user: 'Tommy Maintz',leaf: true,iconCls: 'task'},
{task: 'Reattach screen door',duration: 2,user: 'Tommy Maintz',leaf: true,iconCls: 'task'}
]
}
]
},
{ task:'Project: Testing',duration:2,user:'Core Team',iconCls:'task-folder',
children:[
{ task: 'Mac OSX',duration: 0.75,user: 'Tommy Maintz',iconCls: 'task-folder',
children: [
{task: 'FireFox',duration: 0.25,user: 'Tommy Maintz',iconCls: 'task',leaf: true},
{task: 'Safari',duration: 0.25,user: 'Tommy Maintz',iconCls: 'task',leaf: true},
{task: 'Chrome',duration: 0.25,user: 'Tommy Maintz',iconCls: 'task',leaf: true}
]
},{ task: 'Windows',duration: 3.75,user: 'Darrell Meyer',iconCls: 'task-folder',
children: [
{task: 'FireFox',duration: 0.25,user: 'Darrell Meyer',iconCls: 'task',leaf: true},
{task: 'Safari',duration: 0.25,user: 'Darrell Meyer',iconCls: 'task',leaf: true},
{task: 'Chrome',duration: 0.25,user: 'Darrell Meyer',iconCls: 'task',leaf: true},
{task: 'Internet Exploder',duration: 3,user: 'Darrell Meyer',iconCls: 'task',leaf: true}
]
},{ task: 'Linux',duration: 0.5,user: 'Aaron Conran',iconCls: 'task',
children: [
{task: 'FireFox',duration: 0.25,user: 'Aaron Conran',iconCls: 'task',leaf: true},
{task: 'Chrome',duration: 0.25,user: 'Aaron Conran',iconCls: 'task',leaf: true}
]
}
]
}
];
var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 700,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 230,
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
}),
editor: new Ext.form.NumberField({
allowBlank: false,
allowDecimals: true
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user',
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: '操作',
width: 130,
buttons: ['update', 'remove'],
buttonText: ['编辑', '删除']
}],
//dataUrl: 'treegrid-data.json'
requestApi: {
update: 'treegrid-data.json',
remove: 'treegrid-data.json'
}
});
var root = new Ext.tree.TreeNode({
text: '根节点',
expanded: true
});
tree.setRootNode(root);
var nodes = {};
nodes.children = mydata;/*TreeGrid的json数据[{……},{……}]*/
function appendChild(node, o){
if (o.children != null && o.children.length > 0) {
for (var a = 0; a < o.children.length; a++) {
var n = new Ext.tree.TreeNode({
task:o.children[a].task,
duration:o.children[a].duration,
user:o.children[a].user,
iconCls:o.children[a].iconCls
});
node.appendChild(n);
appendChild(n, o.children[a]);
}
}
}
appendChild(root, nodes);
new Ext.ButtonGroup({
renderTo: Ext.getBody(),
title: 'States',
style: 'padding:20px 50px;',
columns: 2,
items: [{
text: 'Hidden',
width: 100,
handler: function() {
tree.hideButton('node-1', 'update');
}
}, {
text: 'Show',
width: 100,
handler: function() {
tree.showButton('node-1', 'update');
}
}]
});
});
- 大小: 53.2 KB
分享到:
相关推荐
NULL 博文链接:https://bernoulli.iteye.com/blog/1885567
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
用extjs4 TreeGrid做的report报表
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
该文件中包含了一些实例:如何加载数据到extjs
一个包含多语言的TreeGrid例子集合。
extjs 3.31 TreeGrid 我的小改动,实现静态页面加载json到TreeGrid里面
Extjs动态菜单可添加子项和编辑子项,拖动保存、dwr实现存储数据。
通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树时将node.id做为参数 通过split("_"),根据数据的长度就...
extjs4带checked的treegrid.代码十分简洁
ext 可编辑treegrid组件 实用
extjs最简单的数据绑定和修改,高手就别浪费资源分了,省的拍砖
使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...
ExtJs中Store加载(load)时候提示信息
extjs数据存储与传输详解,为了方便大家学习ExtJs技术,特总结了ExtJs最常用的Store部分内容,供大家参考...
EXTJS4.2 Sencha Architect22 treegrid tree checkbox treegrid tree 通过store显示内容,能够通过checkbox点击勾选 其他功能,网上都能找到,就没有再写
最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo, 没一个可靠的,全都无法显示出来。像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料...
使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能!
extjs中把数据导出excel,是一个不错的学习代码资源