ExtJS表单之下拉树
作者：zccst
一、数据源
var store_type = Ext.util.JSON.encode(o.store_type);
var store_type_obj = eval( "(" + store_type + ")" );
setStoreTreeByNode(store_type_obj);
二、展示
Ext.QuickTips.init();
var storetree = new Ext.tree.TreePanel({
//el : "container",
animate : true,
title : "请点击选择",
collapsible : true,
enableDD : true,
enableDrag : true,
rootVisible : false,
autoScroll : true,
autoHeight : true,
width : 150,
lines : true
});
// 根节点
var storeroot = new Ext.tree.TreeNode({
id : "root",
text : "根节点",
checked : false
});
storetree.setRootNode(storeroot);
//设置监听
storetree.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);
});
}, storetree);
function setStoreTreeByNode(store_type_obj){
var node = storeroot.appendChild(new Ext.tree.TreeNode({
text : '存储机型',
allowDrag : false,
checked : false
}));
for(var i = 0; i < store_type_obj.length; i++){
node.appendChild(new Ext.tree.TreeNode({
text : store_type_obj[i].model,
allowDrag : false,
checked : false
}));
}
}
//下拉树
var storeComboxWithTree = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode: 'local',
triggerAction:'all',
maxHeight: 240,
tpl: "<tpl for='.'><div style='height:240px'><div id='storetree'></div></div></tpl>",
selectedClass:'',
onSelect:Ext.emptyFn,
emptyText:'请选择机型...'
});
storetree.on('click',function(node){
storeComboxWithTree.setValue(node.text);
storeComboxWithTree.collapse();
});
storeComboxWithTree.on('expand',function(){
storetree.render('storetree');
});
三、获取选中的值
var s = storetree.getChecked();
var checked_s = new Array();
for (var j = 0; j < s.length; j ++){
checked_s.push(s[j].text);
}
//if(checked_s.length == 0){alert('选择不能为空');return false;}
var str_s = checked_s.toString();
版本一：
var comboxWithTree = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",
selectedClass:'',
onSelect:Ext.emptyFn
});
var tree = new Ext.tree.TreePanel({
loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),
border:false,
root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})
});
tree.on('click',function(node){
comboxWithTree.setValue(node.text);
comboxWithTree.collapse();
});
comboxWithTree.on('expand',function(){
tree.render('tree');
});
comboxWithTree.render('comboxWithTree');
版本二：
var comboxWithPanel = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<div style="height:200px"><div id="panel"></div></div>',
selectedClass:'',
onSelect:Ext.emptyFn
});
comboxWithPanel.render('comboxWithPanel');
var tree2 = new Ext.tree.TreePanel({
loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),
border:false,
autoScroll:true,
root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})
});
var border = new Ext.Panel({
title:'面板title',
layout:'fit',
border:false,
height :200,
tbar:[{text:'确定一'},'-',new Ext.form.TextField({id: 'paramCnName',width:60}),{text:'查找一'}],
bbar:[{text:'确定二'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'查找二'}],
items: tree2
});
comboxWithPanel.on('expand',function(){
border.render('panel');
});
另一个三级节点的实例
function setDepTreeByNode(obj){
rootnode = new Ext.tree.TreeNode({
text : '全部',
allowDrag : false,
checked : false
});
deproot.appendChild(rootnode); //0级
var tmpDep = "";
var tmpPro = "";
var tmpSer = "";
var departnode = null;
var productnode = null;
var servicenode = null;
for( var i = 0; i < obj.length; i++){
if(!tmpDep){
tmpDep = obj[i].department;
tmpPro = obj[i].product;
tmpSer = obj[i].service;
}
// 仅执行一次
if(departnode == null && productnode == null && servicenode == null){
departnode = new Ext.tree.TreeNode({
text : obj[i].department,
allowDrag : false,
checked : false
});
productnode = new Ext.tree.TreeNode({
text : obj[i].product,
allowDrag : false,
checked : false
});
servicenode = new Ext.tree.TreeNode({
text : obj[i].service,
allowDrag : false,
checked : false
});
rootnode.appendChild(departnode); //一级
departnode.appendChild(productnode); //二级
productnode.appendChild(servicenode); //三级
continue;//第一轮循环结束
}
// 追加二级节点
if(obj[i].department == tmpDep){
//追加三级节点
if(obj[i].product == tmpPro){
servicenode = new Ext.tree.TreeNode({
text : obj[i].service,
allowDrag : false,
checked : false
});
productnode.appendChild(servicenode);//三级
tmpSer = obj[i].service;
}else{
productnode = new Ext.tree.TreeNode({
text : obj[i].product,
allowDrag : false,
checked : false
});
servicenode = new Ext.tree.TreeNode({
text : obj[i].service,
allowDrag : false,
checked : false
});
departnode.appendChild(productnode); //二级
productnode.appendChild(servicenode); //三级
tmpPro = obj[i].product;
tmpSer = obj[i].service;
}
}else{
//追加一级节点
departnode = new Ext.tree.TreeNode({
text : obj[i].department,
allowDrag : false,
checked : false
});
productnode = new Ext.tree.TreeNode({
text : obj[i].product,
allowDrag : false,
checked : false
});
servicenode = new Ext.tree.TreeNode({
text : obj[i].service,
allowDrag : false,
checked : false
});
rootnode.appendChild(departnode); //一级
departnode.appendChild(productnode); //二级
productnode.appendChild(servicenode);//三级
//更新当前值
tmpDep = obj[i].department;
tmpPro = obj[i].product;
tmpSer = obj[i].service;
}
}
}
select distinct * from (select department,product,service from service_list) a;