js代码如下
/*
* 品目选择
*/
addItemsFun : function() {
var treeLoader = new Ext.tree.TreeLoader({
dataUrl:ctx+'/getTree'
});
var Tree = Ext.tree;
root = new Tree.AsyncTreeNode({
text: '产品分类',
draggable:false,
id:'source'
});
tree2 = new Tree.TreePanel({
useArrows:true,
autoScroll:true,
animate:true,
width : 400,
region : 'center',
enableDD:true,
border : false,
containerScroll: true,
loader: treeLoader,
root:root,
});
//leftTree, rightForm
leftTree = new Ext.Panel({
id : "leftTree",
width : 200,
height : "100%",
region : 'west',
border : false,
margins : '5 5 5 5',
layout : 'anchor',
defaults : {
anchor : '90%'
},
items : [tree2]
});
rightForm = new Ext.Panel({
id : "rightForm",
width : 400,
height : "100%",
region : 'center',
border : true,
margins : '5 5 5 5',
layout : 'anchor',
defaults : {
anchor : '90%'
},
items : [
]
});
if (!win2) {
win2 = new Ext.Window({
title : '品目选择',
layout : 'border',
width : 600,
height : 500,
closeAction : 'hide',
plain : true,
modal : true,
constrain : true,// window不可移动到窗口之外
resizable : false,// 不可改变window的大小
defaults : {
split : true
},
items : [ leftTree,rightForm],
buttonAlign : 'right',
buttons : [ {
id : 'allowButton',
text : '确定',
handler : function() {
alert("确定");
}
}, {
text : '取消',
handler : function() {
win2.hide();
}
} ]
});
tree2.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree2);
tree2.root.expand();
}
win2.show();
},
action的返回json值格式如下
[{"id":3,"text":"产品类","cls":"folder","children":[{"id":1,"text":"水果类","cls":"file","children":null,"leaf":true,"checked":false},{"id":2,"text":"蔬菜类","cls":"file","children":null,"leaf":true,"checked":false}],"leaf":false,"checked":false}]