EXT2.0 下拉树例子(超简单)

看了很多关于EXT下拉树的实现, 发现很多例子都是对EXT原有的类进行扩展, 而且都发现用起来很费劲

 

在这里,本人实现的EXT下拉树是直接使用 Ext.form.ComboBox + Ext.tree.TreePanel, 将两者结合起来,不需要额外的扩展

效果图可见附件一

JS代码如下:

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');

 

这里的使用了Ext.tree.DWRTreeLoader 调用后台方法读取结点, 和下拉树的实现本身没任何关系,你可以使用任何的loader去加载树结点

需要注意的是,ComboBox的tpl里的<div id='tree'>这个ID可以改成别的, 但必须要在'expand'事件里, 将树显示在这个div上

就是如此简单...

 

看到这里，聪明的读者就会想到，如此类推，想在下拉表里放任何东西都是可以的，以下例子放一个Panel，效果图见附件二

	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');
  	});

 

 

照你的例子做,在FF中是正常的,
在IE下,在COMB下来的时候, 报"对象没有该属性和方法"
是什么问题啊

在FF中是正常的, 在IE下第一次正常，但第二次只显示一个下拉框，树显示不出来，也不报错

搞定了， tpl: '<div style="height:200px"><div id="panel"></div></div>', 　在IE中在第二次加载时要把panel里清空

能否给出范例源码供参考

你的树宽度受限制，如果数据量大的话，效果就差了一些。

针对以上例子，对combobox控件做了个简单的扩展，
使用方法参见 http://www.javaeye.com/topic/212842
效果图如下

就没有HTML的吗
全是JSP的～

上面的例子很好！但是怎样才能把tree的两个字段同时绑定到combobox上？？？？？

值钱的东西已经都在这了，要什么HTML，你先了解一下EXT再说。