类结构
Ext.panel.Panel
Ext.panel.Table
Ext.tree.Panel --- 他是和grid完全一样的
1.快速实现一个DEMO
主要配置项
title 标题
width 宽
height 高
renderTo 渲染到什么地方
root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
animate : Boolean 控制收起和展开是发有动画效果
store: store 数据集合
重要事件
itemclick
重要方法
Ext.panel.Panel
Ext.panel.Table
Ext.tree.Panel --- 他是和grid完全一样的
1.快速实现一个DEMO
主要配置项
title 标题
width 宽
height 高
renderTo 渲染到什么地方
root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
animate : Boolean 控制收起和展开是发有动画效果
store: store 数据集合
重要事件
itemclick
重要方法
2.Ext.data.TreeStore
app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',
appFolder : "app",
launch:function(){
Ext.create('Ext.container.Viewport', {
layout:'auto',
items: {
xtype: 'deptTree'
}
});
},
controllers:[
'deptController'
]
});
})
deptController.js
Ext.define('AM.controller.deptController', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
"deptTree button[id=allopen]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.expandAll();
}
},
"deptTree button[id=allclose]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt; //得到上层容器的上层节点
tree.collapseAll(); //关闭所有
}
},
"deptTree button[id=add]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked(); //得到书上被选中的节点,返回的是一个数组
if(nodes.length == 1){ //只让选中一个节点
var node = nodes[0]; //因为只选中了一个节点,所以就是其本身nodes[0]
node.appendChild({
checked:true,
text:'技术架构组',
id : '0103',
leaf:true
});
}else{
alert("请您选择一个节点");
}
}
},
"deptTree":{ //这个对象的方法,里面的参数itemclick:代表里面的每一个item单击触发的函数
itemclick:function(tree,record,item,index,e,options){
alert(record.get('id'));
}
}
});
},
views:[ //在Control层必须加上views和stores这是将三者mvc层联合起来
'deptView'
],
stores :[
'deptStore'
],
models :[
]
});
3.deptStore.js
Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root', //默认的根节点
proxy:{
type:'ajax', //代理的方式
url:'/extjs/extjs!getDept.action',
reader:'json', //代理读数据
autoLoad:true //是否要自动加载数据
}
});
//树有两种加载的方式,1)同步加载2)异步加载
//同步加载的好处,可以做过滤,但是数据量大的时候读取数据太慢
//异步加载:加载速度快,一个一个.js加载。
//一般情况下,1)第一次读取加载后数据放到Java缓存中,服务器端缓存
//2)读进来,放到浏览器的缓存,甚至放到Session和LocalSession中代替cookie
//第二个人浏览网页的时候,就直接从Java缓存中取数据,传输过来后,放到前台缓存,第二次登陆的时候直接从客户端缓存
4)deptView.js
Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
dockedItems:[{
xtype:'toolbar',
dock:'left',
//ui:'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',
id:'allopen',
text:'展开全部'
},{
xtype:'button',
id:'allclose',
text:'收起全部'
}]
}],
store:'deptStore' //在View层必须将store引进来,不然没有数据
// root:{
// text:'root',
// id : '0',
// leaf:false,
// children:[{
// text:'技术部门',
// checked:false,
// id : '01',
// leaf:false,
// children:[{
// checked:false,
// text:'研发部',
// id : '0101',
// leaf:true
// },{
// checked:false,
// text:'实施部',
// id : '0102',
// leaf:true
// }]
// },{
// text:'后勤部门',
// id : '02',
// checked:false,
// leaf:false,
// children:[{
// text:'人事部',
// id : '0201',
// checked:false,
// leaf:true
// },{
// text:'行政部',
// id : '0202',
// checked:false,
// leaf:true
// }]
// }]
// }
});