extjs4.0的高级组件tree下
1.树形的拖拽
Ext.tree.ViewDDPlugin
alias: 'plugin.treeviewdragdrop',
需要
viewConfig:{
plugins :{
ptype:'treeviewdragdrop'
}
},
事件
listeners: {
drop: function(node, data, dropRec, dropPosition) {
},
beforedrop:function(node,data,overModel,dropPosition,dropFunction,options ){
}
}
2.模拟拷贝和黏贴
3.删除操作
4.多列树
5.网友要求
Ext.tree.ViewDDPlugin
alias: 'plugin.treeviewdragdrop',
需要
viewConfig:{
plugins :{
ptype:'treeviewdragdrop'
}
},
事件
listeners: {
drop: function(node, data, dropRec, dropPosition) {
},
beforedrop:function(node,data,overModel,dropPosition,dropFunction,options ){
}
}
2.模拟拷贝和黏贴
3.删除操作
4.多列树
5.网友要求
单击树形根节点子节点也被选中
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'
]
});
})
deptControl.js
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});
}
}
}
},
'deptTree button[id=delete]':{ //删除
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked();
for(i=0;i<nodes.length;i++){
nodes[i].remove(true);
}
}
},
'deptTree button[id=copy]':{ //实现copy的黏贴板
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到数据集合
var nodes = tree.getChecked();
if(nodes.length>0){
//把数据放到剪切板中
tree.setCopyNodes(Ext.clone(nodes)); //数据设置到剪切板中
alert("拷贝"+nodes.length+"个节点");
for(i=0;i<nodes.length;i++){
nodes[i].data.checked = false;
nodes[i].updateInfo();
}
}
}
},
"deptTree button[id=paste]":{ //s实现黏贴
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//被追加孩子的节点集合
var checkednodes = tree.getChecked(); //从剪切板中拿数据
if(checkednodes.length == 1){
//被追加孩子的节点
var node = checkednodes[0];
//去剪切板中取数据
var nodes = tree.getCopyNodes();
if(nodes.length>0){
for(i=0;i<nodes.length;i++){
var n = nodes[i].data;
n['id'] = n['id']+'1';
node.appendChild(n);
}
}
}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 :[
'deptModel'
]
});
Ext.define('AM.model.deptModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string',sortable : true},
{name: 'id', type: 'string',sortable : true}
]
});
deptStore.js
Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
model:'AM.model.deptModel',
proxy:{
type:'ajax',
url:'/extjs/extjs!getDept.action',
reader:'json',
autoLoad:true
}
});
deptView.js
Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 350,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
config:{
copyNodes:''//他充当剪切板的作用
},
columns:[ //配置列模式
{
xtype:'treecolumn',
text:'text',
writh:150,
dataIndex:'text'
},{
text:'info',
dataIndex:'id'
}
],
viewConfig:{
plugins :{
ptype:'treeviewdragdrop', //这个地方时ptype,tree中的拖放
appendOnly : true //加上这个之后，叶子节点才可以拖放成功，不然可以拖但是拖放不成功。这只是前台拖拽，后台数据没有拖放成功
},
listeners:{
drop:function( node, data, overModel, dropPosition, options){
//ajax的操作把数据同步到后台数据库
alert("把: "+data.records[0].get('text')+" 移动到: "+overModel.get('text'));
},
beforedrop:function( node, data, overModel, dropPosition, dropFunction, options){ //落下之前触发，没有意义
// if(overModel.get("leaf")){
// overModel.set('leaf',false)
// }
}
}
},
dockedItems:[{
xtype:'toolbar',
dock:'left',
items:[
{xtype:'button',text:'add',id:'add'},
{xtype:'button',text:'copy',id:'copy'},
{xtype:'button',text:'delete',id:'delete'},
{xtype:'button',text:'paste',id:'paste'}
]
},{
xtype:'toolbar',
items:[{
xtype:'button',
id:'allopen',
text:'展开全部'
},{
xtype:'button',
id:'allclose',
text:'收起全部'
}]
}],
store:'deptStore'
});