文档章节

在ExtJS的ComboBox组件中实现下拉树效果

itwriter
 itwriter
发布于 2014/03/19 17:46
字数 441
阅读 958
收藏 1

看了很多关于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,

效果图见附件二

js代码如下:

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

 

附件一:

附件二:

 


本文转载自:http://blog.csdn.net/lichkui/article/details/2199389

itwriter

itwriter

粉丝 12
博文 117
码字总数 23872
作品 0
海淀
程序员
私信 提问
加载中

评论(2)

itwriter
itwriter 博主

引用来自“小当家方便面”的评论

你好,可以问一下吗?官方API里面找不到Ext.tree.DWRTreeLoader和Ext.tree.AsyncTreeNode这两个类,你是怎么调用的?
有点久远了,记不太清。我刚查了下手里api,DWRTreeLoader确实没有,但AsyncTreeNode是有的。如果你查不到,可能是因为我的ext版本比较老,我们公司当时用的是extjs3.4. 我当时也是转载,所以也没说清。
请修改个人昵称
请修改个人昵称
你好,可以问一下吗?官方API里面找不到Ext.tree.DWRTreeLoader和Ext.tree.AsyncTreeNode这两个类,你是怎么调用的?
Ext GWT 2.2 Beta 发布

GWT-Ext 是基于 Google Web Toolkit(GWT) 和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度...

红薯
2010/07/22
559
0
现实ComboBox(可编辑且可以自动提示的select选择框)

项目需要使用类似comboBox的web控件.如今现存的相关控件非常好.而且参差不齐.extjs等大型控件有一定的实现.但是如果为了一个控件而依赖extjs等大型前端js是非常不好的.为此花了2天在前人的基...

谯洪敏
2012/09/12
1K
0
extjs中通过ComboBox 的选择控制fieldLabel的隐藏和显示怎么做?

在extjs框架下想通过一个combobox下拉菜单选择其中一个的时候对fieldlabel进行隐藏或者显示。 还有就是通过combobox 对fieldlable进行赋值怎么做?

小wei
2014/03/03
3.3K
5
jQuery MiniUI v2.0 发布

jQuery MiniUI 是强大的企业级WEB控件库。 具有:datagrid、tree、comboBox、datepicker、menu、toolbar等一系列控件。 技术亮点: 强大表格控件:实现锁定列、多表头、分页排序、行过滤、数...

fcrong
2012/03/13
21.9K
53
extjs和struts、json的整合

导读: 利用extjs配合struts的MVC架构是现在流行的做法,两者的整合相当容易,只需伸展Action,直接向HttpServletResponse里写xml和json款式的内容,不再必需forward到struts指定的版面。 //...

红薯
2009/01/23
2.1K
5

没有更多内容

加载失败,请刷新页面

加载更多

Python 开发植物大战僵尸游戏

作者:楷楷 链接:https://segmentfault.com/a/1190000019418065 开发思路 完整项目地址: https://github.com/371854496/pygame 更多好玩有趣的python,尽在公众号「Python专栏」,后台回复...

上海小胖
53分钟前
5
0
JVM优化之逃逸分析与分配消除

要了解逃逸分析背后的基本原理,我们先来看下这段有问题的C代码——当然这个是没法用Java来写的: 这段C代码在栈上创建了一个int类型的变量,然后把它的指针作为函数的返回值返回了。这样做是...

onedotdot
今天
3
0
最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
今天
12
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部