论坛首页 Web前端技术论坛

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

浏览 38952 次
精华帖 (5) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-07-08   最后修改:2009-06-24

 

 

本例中的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

  • 描述: 例子效果图
  • 大小: 27.2 KB
  • 描述: listWidth:300
  • 大小: 29.8 KB
   发表时间:2008-07-09  
传错代码文件了吧
0 请登录后投票
   发表时间:2008-07-09  
怎么不能用啊,楼主能不能给个演示
0 请登录后投票
   发表时间:2008-07-09  
抱歉上传错文件了,现在可以了
0 请登录后投票
   发表时间:2008-07-13  
form表单回填数据时应该如何设置?
0 请登录后投票
   发表时间:2008-07-21  
真是太经典了,楼主有没有想过做一个ComboBoxGrid啊?
0 请登录后投票
   发表时间:2008-07-22  
请问如何把下拉列表设置成自适应树的高度。

如果可能,宽度最好也能自适应。
1 请登录后投票
   发表时间:2008-08-03  
goodboy 写道
form表单回填数据时应该如何设置?

form表单回填数据应该是调用了表单里所有控件的setValue方法
按这样看,只需要在声明comboBoxTree时,加上属性value如下:
value:某个树的结点node,
或者
value:{id:xx,text:xxx}
即可
又或直接调用comboBoxTree.setValue(node)或comboBoxTree.setValue({id:xx,text:xxx})
0 请登录后投票
   发表时间:2008-08-07  
这个组件好像有BUG啊,我第一次不可以把树加载上来,第二次以后就可以了.
1 请登录后投票
   发表时间:2008-08-11  
楼主你好啊。这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>
2 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics