一、简单的树:
例子:
<script type="text/javascript">
Ext.onReady(function () {
//定义树形组件
Ext.create('Ext.tree.Panel', {
title: '简单的树形组件',
width: 200,
//数据容器
store: Ext.create('Ext.data.TreeStore', {
//根节点
root: {
//是否展开
expanded: true,
children: [
//leaf属性标明是是否是根节点,如果是,必须指明
{text: "我的树1", leaf: true },
//child属性标明是此节点下面有子节点
{ text: "我的树2", expanded: true,
children: [
{ text: "我的树2.1", leaf: true },
{ text: "我的树2.2", leaf: true }
]
},
{ text: "我的树3", leaf: true }
]
}
}),
//是否显示根节点
rootVisible: false,
renderTo: 'myTree'
});
});
</script>
执行结果:
二、带选择框的树形控件:
说明:只需要在节点加上checked属性即可
例子:
<script type="text/javascript">
Ext.onReady(function () {
//定义树形组件
Ext.create('Ext.tree.Panel', {
title: '简单的树形组件',
width: 200,
//数据容器
store: Ext.create('Ext.data.TreeStore', {
//根节点
root: {
//是否展开
expanded: true,
children: [
//leaf属性标明是是否是根节点,如果是,必须指明
//为节点加上checked属性,实现带选择框的节点
{text: "我的树1", leaf: true, checked: false },
//child属性标明是此节点下面有子节点
//为节点加上checked属性,实现带选择框的节点
{text: "我的树2", checked: false, expanded: true,
children: [
//为节点加上checked属性,实现带选择框的节点
{text: "我的树2.1", checked: false, leaf: true },
//为节点加上checked属性,实现带选择框的节点
{text: "我的树2.2", checked: false, leaf: true }
]
},
//为节点加上checked属性,实现带选择框的节点
{text: "我的树3", checked: true, leaf: true }
]
}
}),
listeners: {
//单击根节点时,全选或者全不选子节点
checkchange: function (n, checked) {
n.cascade(function (c) {
c.set("checked",checked)
})
}
},
//是否显示根节点
rootVisible: false,
renderTo: 'myTree'
});
});
</script>
执行结果: