ExtJs6 TreeGrid
var treeGrid = Ext.create("Ext.tree.Panel", {
flex: 1,
store: {
type: 'tree',
fields: ['Name', 'ID', 'Type']
},
id: 'teleTreeGrid',
useArrows: true,
rootVisible: false,
multiSelect: true,
singleExpand: false,
checkModel: 'cascade', // 对树的级联多选
onlyLeafCheckable: false, // 对树所有结点都可选
animate: false,
root: {
name: 'Root',
description: 'Root description',
expanded: true,
checked: true,
children: []
},
columns: [{
xtype: 'treecolumn',
text: '描述',
dataIndex: 'Name',
flex: 2
}, {
text: 'ID',
dataIndex: 'ID',
flex: 1
}, {
text: '关键字',
dataIndex: 'Type',
flex: 1
}],
listeners: {
afterrender: function(pObj, eOpts) {},
render: function(conSelf) {
// 根节点(大当家的--隐藏)
this.setRootNode({
text: 'Root',
expanded: true,
checked: false,
children: []
});
// 假的根节点(二当家的--显示)
var root = this.getRootNode();
var parent = root.appendChild({
Name: 'Root',
ID: '0',
checked: false
});
parent.appendChild({
Name: 'test1',
ID: '',
nodeType: 'test1',//自己加的属性
leaf: false,
checked: false
});
parent.appendChild({
Name: 'test2',
ID: '',
nodeType: 'test2',//自己加的属性
leaf: false,
checked: false
});
parent.expand();
},
'itemdblclick': function(record, node, view, index) {
// 处理点击事件
var nodeId = Ext.isEmpty(node.data.ID) ? '' : node.data.ID + '';
var nodeName = Ext.isEmpty(node.data.Name) ? '' : node.data.Name;
var nodeType = Ext.isEmpty(node.data.nodeType) ? '' : node.data.nodeType;
//请开始你的表演
//业务代码
},
beforeitemexpand: function(node, index, item, eOpts) {
// 假展开所有节点
self.expandNode(node);
},
beforeitemcollapse: function(node, index, item, eOpts) {},
"checkchange": function(node, checked, eOpts) {
self.travelChildrenChecked(node, checked, eOpts);
self.travelParentChecked(node, checked, eOpts);
// 递归勾选节点
}
}
})var treeGrid = Ext.cr