var comboxWithTree = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, shadow:false, mode: 'local', triggerAction:'all', maxHeight: 200, tpl: '<tpl for="."><div style="height:200px"><div id="tree1"></div></div></tpl>', selectedClass:'', onSelect:Ext.emptyFn }); var tree1 = new Ext.tree.TreePanel({ loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}), border:false, root:new Ext.tree.AsyncTreeNode({text: 'treeRoot',id:'0'}) }); tree1.on('click',function(node){ comboxWithTree.setValue(node.text); comboxWithTree.collapse(); }); comboxWithTree.on('expand',function(){ tree1.render('tree1'); }); comboxWithTree.render('comboxWithTree');
2. 下拉树形面板例子
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: 'root',id:'0'}) }); var border = new Ext.Panel({ title:'title', layout:'fit', border:false, height :200, tbar:[{text:'ok1'},'-',new Ext.form.TextField({id: 'bb',width:60}),{text:'search1'}], bbar:[{text:'ok2'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'search2'}], items: tree2 }); comboxWithPanel.on('expand',function(){ border.render('panel'); });