Tree
1. 类结构
Ext.panel.Panel
Ext.panel.Table
Ext.tree.Panel --- 他是和grid完全一样的
2. 主要配置项
title 标题
width 宽
height 高
renderTo 渲染到什么地方
root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
animate : Boolean 控制收起和展开是发有动画效果
store: store 数据集合
rootVisible : false,//控制显隐的属性
重要事件
itemclick:function(tree,record,item,index,e,options)
重要方法
expandAll
collapseAll
getChecked
appendChild
3. Ext.data.TreeStore
重要属性
defaultRoodId //指定根节点
4. 树形的拖拽(插件)
Ext.tree.ViewDDPlugin
alias :'plugin.treeviewdragdrop'
需要在tree的panel下面加
viewConfig:{
plugins:{
ptype :'treeviewdragdrop',
appendOnly:true //加上这个叶子节点之间拖拽时,会弹出图形警告。
}
}
事件
listeners:{
drop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition)
beforedrop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition, Function dropFunction)
}
5. 关于节点的拷贝与粘贴
重要方法
updateInfo(把更新的节点属性值,更新显示的界面)
6. 关于删除节点操作
重要方法
remove(节点的方法)
7. 多列树的配置
主要配置项
columns(与表格一样)
8. 级联选中,以及级联不选中
9. 关于Store的Proxy里的api应用
Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
proxy:{
//Proxy里面的api属性,可以存放crud的后台url,通过前台就可以取到
api:{
update:"/extjs/extjs!updateDept.action",
remove:"/extjs/extjs!delDept.action"
}
type:'ajax',
url:'/extjs/extjs!getDept.action',
reader:'json',
autoLoad:true
}
});
Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
config:{
copyNodes:'' //充当剪切板的作用,临时存放树节点
}
//里面得配置与表格类似
columns:[
{
xtype:'treecolumn',
text:'text',
width:150,
dataIndex:'text'
},{
text:'info',
dataIndex:'info'
}
],
viewConfig:{
plugins:{
ptype :'treeviewdragdrop',
appendOnly:true //加上这个叶子节点之间拖拽时,会弹出图形警告。
}
listeners:{
drop:function(node,data,voerModel,dropPosition,options){
alert("把:"+data.records[0].get('text')+"移动到:"+overModel.get('text'));
}
beforedrop:function(node,data,overModel,dropPosition,dropFunction){
if(overModel.get("leaf")) //如果把一个节点拖到一个叶子节点下面时,这时我可以把叶子节点修改为费叶子节点,就可以放了。
{
overModel.set('leaf',true);
}
}
}
}
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:'button',text:'delete',id:'paste'}
]
},{
xtype:'toolbar',
items:[{
xtype:'button',
id:'allopen',
text:'展开全部'
},{
xtype:'button',
id:'allclose',
text:'收起全部'
}]
}],
store:'deptStore'
});
Ext.define('AM.controller.deptController', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
"deptTree":{
checkchange:function(node,checked,options){
if(node.data.leaf == false)
{
if(checked){
//先展开节点
node.expand();
//遍历子节点,如果遇到非叶子节点,将递归遍历
node.eachChild(function(n){
n.data.checked = true;
n.updateInfo({checked:true});
})
}else
{
//先展开节点
node.expand();
//遍历子节点,如果遇到非叶子节点,将递归遍历
node.eachChild(function(n){
n.data.checked = false;
n.updateInfo({checked:false});
})
}else
{
//只要有一个叶子节点没有选中,父节点都不应该选中
if(!checked){
node.parentNode.data.checked = false;
node.parentNode.updateInfo({checked:false});
}
}
}
var tree = b.ownerCt.ownerCt;
//得到选中数据集合
var nodes = tree.getChaecked();
for(i=0;i<nodes.length;i++)
{
nodes[i].remove(true); //删除该节点
}
},
"deptTree button[id=delete]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到选中数据集合
var nodes = tree.getChaecked();
for(i=0;i<nodes.length;i++)
{
nodes[i].remove(true); //删除该节点
//通过ajax向后台提交删除数据
//通过这种方式也是可以自动提交到后台的,不过数据可能不是你所需要的。
//tree.getStore().getProxy().update(new Ext.data.Operation(
//{action:'remove'} //你写什,它就会提交那个url,eg:{action:'update'}
//));
//自己组装参数Ajax的提交(常用)
Ext.Ajax.request({
//通过这种方式就可以直接获取到store里面配置的url
//避免url到处乱写
//其实就是利用了store的proxy里面已经有的api属性来存放url集合
url: tree.getStore().getProxy().api['remove'],
params: {
id: nodes[i].data.id
},
success: function(response){
var text = response.responseText;
// process server response here
}
});
}
},
"deptTree button[id=copy]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到数据集合
var nodes = tree.getChaecked();
if(nodes.length>0){
//把数据放到剪切板中
tree.setCopyNodes(Ext.clone(nodes));
for(i=0;i<nodes.length;i++)
{
nodes[i].data.checked = false; //这个只是更新节点的属性值,并没有更新显示到页面
nodes[i].updateInfo();//更新显示到页面
}
}
}
},
"deptTree button[id=paste]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//获得被追加孩子的节点集合
var checkNodes = tree.getChecked();
//去剪切板中取数据
var nodes = tree.getCopyNodes();
if(checkNodes.length == 1 && nodes.lenght > 0){
// 被追加孩子的节点
var node = checkNodes[0];
for(i=0;i<nodes.length;i++){
var el = nodes[i].data;
//在这里可以进行组装数据传入后台
node.appendChild(el);
}
}else{
alert("剪切板中没有数据或没有选中节点");
}
}
},
"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];
node.appendChild({
checked:true,
text:'技术架构组',
id : '0103',
leaf:true
});
}else{
alert("请您选择一个节点");
}
}
},
"deptTree":{
itemclick:function(tree,record,item,index,e,options){
alert(record.get('id'));
}
}
});
},
views:[
'deptView'
],
stores :[
'deptStore'
],
models :[
]
});