下拉树Ext.ux.ComboBoxTree,支持form的提交等

 

 

本例中的Ext.ux.ComboBoxTree对Ext.form.ComboBox控件进行了简单的扩展，将Ext.tree.TreePanel整合进来，以下拉树的形式显示出来。

扩展的功能点：
一、支持form的提交
二、提供属性selectNodeModel，指选择树结点的模式，提供四种模式，分别是
    1. all：所有结点都可选中
    2. exceptRoot：除根结点，其它结点都可选(默认)
    3. folder:只有目录（非叶子和非根结点）可选
    4. leaf：只有叶子结点可选

使用方法：

var comboBoxTree = new Ext.ux.ComboBoxTree({ 
      renderTo : 'comboBoxTree', 
      width : 250, 
      //listWidth:300, 这是设置下拉框的宽度，默认和comBoxTree的宽度相等
      tree : new Ext.tree.TreePanel({ 
            bbar: ['名称：',{xtype:'trigger',width:200,triggerClass:'x-form-search-trigger',}], 
            loader: new Ext.tree.TreeLoader({dataUrl:'getNodes.jsp'}), 
            root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'}) 
      }),
      selectNodeModel:'leaf', //只有选叶子时，才设置值
      listeners:{
            beforeselect: function(comboxtree,newNode,oldNode){//选择树结点设值之前的事件
                   //...
            },
            select: function(comboxtree,newNode,oldNode){//选择树结点设值之后的事件
                  //...
            },
            afterchange: function(comboxtree,newNode,oldNode){//选择树结点设值之后，并当新值和旧值不相等时的事件
                  //...
            }
      }
});  

 

效果见下图

 

                      listWidth:300

传错代码文件了吧

怎么不能用啊，楼主能不能给个演示

抱歉上传错文件了，现在可以了

form表单回填数据时应该如何设置？

真是太经典了，楼主有没有想过做一个ComboBoxGrid啊？

请问如何把下拉列表设置成自适应树的高度。

如果可能，宽度最好也能自适应。

form表单回填数据应该是调用了表单里所有控件的setValue方法
按这样看，只需要在声明comboBoxTree时，加上属性value如下：
value:某个树的结点node，
或者
value:{id:xx,text:xxx}
即可
又或直接调用comboBoxTree.setValue(node)或comboBoxTree.setValue({id:xx,text:xxx})

这个组件好像有BUG啊,我第一次不可以把树加载上来,第二次以后就可以了.

楼主你好啊。这2天看到你写的不少扩展的组件很好用哈。我这个树是异步加载的。没次点击树节点后才查数据也就是要传个参数node.id过去加你这个我老搞不定。麻烦楼主帮我看下吧。。。。
var Tree = Ext.tree;
   //定义根节点的Loader
   var treeloader=new Tree.TreeLoader({dataUrl:WebServiceUrl+'?trancode=9003&DID=1'});
   //异步加载根节点
   var rootnode=new Tree.AsyncTreeNode({
        id:'1',
        text:'目录树根节点'
   });    
   var treepanel = new Tree.TreePanel({               
                el:'tree-div',        //填充区域
                rootVisible:false,     //隐藏根节点
                border:false,          //边框
                animate:true,         //动画效果
                autoScroll:true,      //自动滚动
                enableDD:false,       //拖拽节点             
                containerScroll:true,
                loader:treeloader            
            });
   //设置根节点
   treepanel.setRootNode(rootnode); 
   //响应事件，传递node参数
   treepanel.on('beforeload',
                function(node){
                   treepanel.loader.dataUrl=WebServiceUrl+'?trancode=9003&DID='+node.id;    //定义子节点的Loader   
                });
   treepanel.render();           
   rootnode.expand(false,false);  




我要怎么加才好啊！

<script type="text/javascript">
var comboBoxTree;
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function(){
comboBoxTree = new Ext.ux.ComboBoxTree({
renderTo : 'comboBoxTree',
width : 250,
tree : {
xtype:'treepanel',
bbar: ['名称：',{xtype:'trigger',id: 'searchName',width:200,triggerClass:'x-form-search-trigger',onTriggerClick:search}],
loader: new Ext.tree.TreeLoader({dataUrl:'../'+WebServiceUrl+'?trancode=9003'}),
       root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'})
      
    },
   
//all:所有结点都可选中
//exceptRoot：除根结点，其它结点都可选(默认)
//folder:只有目录（非叶子和非根结点）可选
//leaf：只有叶子结点可选
selectNodeModel:'leaf'
});

treepanel.on('beforeload',
                function(node){
                   treepanel.loader.dataUrl=WebServiceUrl+'?trancode=9003&DID='+node.id;    //定义子节点的Loader   
            });
});
function showValue(){
alert("显示值="+comboBoxTree.getRawValue()+"  真实值="+comboBoxTree.getValue());
}
function search(){
var searchName = Ext.getDom('searchName').value;
alert("查询字符串："+searchName);
}

</script>