1.树形的拖拽
Ext.tree.viewDDDPlugin
alias:"plugin.treeviewdragdrop",
需要配置:
viewConfig:{
plugins:{
ptype:"treeviewdragdrop"
}
},
事件
listeners:{
drop:function(node,data,dropRec,dropPosition){
//放下之后触发
},
beforedrop:function(node,data,overModel,dropPostion,dropFunction,options){
//放下之前
}
}
代码配置:
viewConfig:{
plugins:{
ptype:"treeviewdragdrop",
appendOnly:true
},
listeners:{
beforedrop:function(node,data,overModel,dropPostion,dropFunction,options){
// if(overModel.get("leaf")){
// overModel.set("leaf",false);
// }
},
drop:function(node,data,overModel,dropPostion,options){
//ajax的操作把数据同步到后台数据库
alert("把"+data.records[0].get("text")+"移动到"+overModel.get("text"));
}
}
}
2.模拟拷贝和粘贴
(1)声明属性
config:{
copyNodes:""//声明一个属性,并且有对应的setget方法, 它充当的剪切板的作用
},
(2)事件实现:
"deptTreebutton[id=copy]":{
//复制功能
click:function(b,e){
vartree=b.ownerCt.ownerCt;
//得到数据集合
varnodes=tree.getChecked();
if(nodes.length>0){
//把数据放到剪切版中
tree.setCopyNodes(Ext.clone(nodes));
alert("你已经拷贝了"+nodes.length+"个节点");
//去掉选中状态
for(vari=0;i<nodes.length;i++){
nodes[i].data.checked=false;
//更新一下信息
nodes[i].updateInfo();
}
}else{
alert("请选择数据");
}
}
},
"deptTreebutton[id=paste]":{
click:function(b,e){
vartree=b.ownerCt.ownerCt;
varcheckednodes=tree.getChecked();
if(checkednodes.length==1){
//被追加孩子的节点
varnode=checkednodes[0];
//去前切版中取数据
varnodes=tree.getCopyNodes();
//需要做一下后台同步,伴随这id的改变等操作
//最好在剪切板中的数据呈现在页面中,把东西遍历显示出来
if(nodes.length>0){
for(vari=0;i<nodes.length;i++){
varn=nodes[i].data;
n["id"]=n["id"]+"1";
node.appendChild(n);
}
}
}else{
alert("剪切板中无数据或者没有选择要追加孩子的节点");
}
}
},
3.删除操作
在事件中实现
"deptTreebutton[id=delete]":{
click:function(b,e){
vartree=b.ownerCt.ownerCt;
varnodes=tree.getChecked();
if(nodes.length>0){
for(vari=0;i<nodes.length;i++){
nodes[i].remove();
}
}else{
alert("你没有选择要删除的数据");
}
}
}
4.多列数
声明一个model 在controller层中指定,并在stroe层中配置model,然后配置view层中的tree
//配置多列树
columns:[
//树形的模式,xtype指定
{
xtype:"treecolumn",
text:"text",
width:150,
dataIndex:"text"
},
//普通的模式
{
text:"info",
width:150,
dataIndex:"id"
}
],
5.单机树形根节点,子节点也被选中
"deptTree":{
checkchange:function(node,checked,options){
if(node.data.leaf==false){
if(checked){
//首先打开节点
node.expand();
//遍历孩子 如果孩子不是叶子,可以用findChild 和isLeaf两个方法来配合使用递归
node.eachChild(function(n){
n.data.checked=true;
n.updateInfo({checked:true});
});
}else{
node.expand();
//遍历孩子 如果孩子不是叶子,可以用findChild 和isLeaf两个方法来配合使用递归
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});
}
}
},
}