ExtJS表单之上拉树

ExtJS表单之下拉树
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;