Ext中tree组件入门
一、类结构
Ext.panel.Panel
Ext.panel.Table
Ext.tree.Panel== 与grid完全一样
二、tree组件的实例，快速实现一个demo
主要配置项
title 标题
width宽
height高
renderTo渲染到什么地方
root控制根节点(Ext.data.Model/Ext.data.NodeInterface)
animate：Boolean 控制首期和展开是否有动画效果
store: store的数据集合
重要事件：itemclick 当点击项的时候触发
三、Ext.data.TreeStore
动态的从数据库拿出来模型来添加节点
代码如下：
view层的实现
Ext.define("AM.view.deptView",{
extend:"Ext.tree.Panel",
alias:"widget.deptTree",
title:"部门树形",
width:250,
height:300,
padding:"55 5 10",
rootVisible:false, //设置根节点的显隐属性
dockedItems:[{
xtype:"toolbar",
dock:"left",//指定显示的位置
//ui:"footer", //指定样式，footer是系统自带的样式
items:[
{xtype:"button",text:"add",id:"add"},
{xtype:"button",text:"copy",id:"copy"},
{xtype:"button",text:"delete",id:"delete"}
]
},{
xtype:"toolbar",
items:[
{xtype:"button",text:"展开所有",id:"openall"},
{xtype:"button",text:"收起所有",id:"closeall"}
]
}],
//store:"deptStore", //指定数据集，来动态的添加节点
root:{ //指定节点
text:"root",
id:"0",
leaf:false, //是否是叶子
children:[{ //定义它的子节点
text:"技术部门",
id:"01",
checked:false,
leaf:false,
children:[{
text:"研发部",
id:"0101",
checked:false,
leaf:true
},{
text:"实施部",
id:"0102",
checked:false,
leaf:true
}]
},{
text:"后勤部门",
id:"02",
checked:false,
leaf:false,
children:[{
text:"人事部",
id:"0201",
checked:false,
leaf:true
},{
text:"财务部",
id:"0202",
checked:false,
leaf:true
}]
}]
}
});
controller层的实现：
Ext.define("AM.controller.deptController",{
extend:"Ext.app.Controller",
init:function(){
this.control({
"deptTreebutton[id=openall]":{
click:function(b,e){
vartree=b.ownerCt.ownerCt;
tree.expandAll(); //展开所有
}
},
"deptTreebutton[id=closeall]":{
click:function(b,e){
vartree=b.ownerCt.ownerCt;
tree.collapseAll(); //收起所有
}
},
"deptTree":{
itemclick:function(view,record,item,index,e,options){
alert(record.get("id"));
}
},
"deptTreebutton[id=add]":{
click:function(b,e){
vartree=b.ownerCt.ownerCt;
varnodes=tree.getChecked();
if(nodes.length==1){
varnode=nodes[0];
node.appendChild({
text:"技术架构部",
id:"0103",
checked:true,
leaf:true
});
}else{
alert("请您选择一个节点");
}
}
}
});
},
views:["deptView"],
stores:["deptStore"],
models:[]
});
app.js等配置与grid配置的mvc模式一样