想要实现 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');
}
}]
});
});