一、树面板简单示例
二、多列树示例
三、树面板中的复选框示例
var tree = Ext.create('Ext.tree.Panel', {
title: '树面板简单示例',
width : 150,
height : 100,
renderTo: Ext.getBody(),
root: {
text: '树根',//节点名称
expanded: true,//默认展开根节点
children: [{
text: '节点一',//节点名称
leaf: true//true说明为叶子节点
}, {
text: '节点二',//节点名称
leaf: true//true说明为叶子节点
}]
}
});
二、多列树示例
var tree = Ext.create('Ext.tree.Panel', {
title: 'TreeGrid(多列树示例)',
renderTo: Ext.getBody(),
width : 200,
height : 120,
fields: ['name', 'description'],
columns: [{
xtype: 'treecolumn',//树状表格列
text: '名称',
dataIndex: 'name',
width: 100,
sortable: true
}, {
text: '描述',
dataIndex: 'description',
flex: 1,
sortable: true
}],
root: {
name: '树根',
description: '树根的描述',
expanded: true,
children: [{
name: '节点一',
description: '节点一的描述',
leaf: true
}, {
name: '节点二',
description: '节点二的描述',
leaf: true
}]
}
});
三、树面板中的复选框示例
var tree = Ext.create('Ext.tree.Panel', {
title: '复选框示例',
width : 150,
height : 100,
renderTo: Ext.getBody(),
root: {
text: '树根',//节点名称
expanded: true,//默认展开根节点
children: [{
text: '节点一',//节点名称
checked : true,//默认选中
leaf: true//true说明为叶子节点
}, {
text: '节点二',//节点名称
checked : false,//默认不选中
leaf: true//true说明为叶子节点
}]
}
});