2019独角兽企业重金招聘Python工程师标准>>>

看了很多关于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');   
    });  

附件一:

附件二:

转载于:https://my.oschina.net/u/1379006/blog/209740

在ExtJS的ComboBox组件中实现下拉树效果相关推荐

  1. 在Dialog中实现下拉框效果并对下拉框赋自定义的值

    一般在Dialog中用下面一个函数,显示下拉列表,本例以f4函数来实现的 CALL FUNCTION 'VRM_SET_VALUES'EXPORTINGID = 'P_LGORT' "对应屏 ...

  2. extjs tree下拉列表_使用ztree来代替Extjs的下拉树

    [Struts2+Spring2.5+Hibernate3(JPA)+ExtJS3基本后台 将ExtJS替换为3..2版本后发现下拉数有些异常:之前展开下来树的下级节点时,下拉菜单不会关掉.但是在3. ...

  3. vue-treeselect下拉树

    最近遇到下拉树的需求,what?下拉框和树的结合?赶紧element-UI找一波,然而并没有找到这种组件,于是问了下度娘,发现好多人都是自己封装的下拉树组件,五花八门的功能,但是都不完善,还是决定用靠 ...

  4. Winform中给下拉框(ComboBox或LookUpEdit)添加内容

    一.实现效果 1.1.Winform的Combox下拉框效果 1.2.Dev中Winform的ComboxEdit与LookUpEdit下拉框效果 二.实现核心 2.1.Winform的Combox下 ...

  5. SpreadJS表格中关于下拉框new GC.Spread.Sheets.CellTypes.ComboBox()的设置和使用

    SpreadJS表格中关于下拉框的设置和使用 Spreadjs使我们经常用到的一种表格插件,下面是自己使用中的一点心得,希望对大家有帮助,废话不所说,下面进入正题: 1.npm下载 @grapecit ...

  6. 如何在 Cell 组件/插件中添加下拉树形控件

    引言 用友华表Cell控件在提供强大的报表功能的同时,在关键细节也是十分突出,为开发者进一步缩短开发周期和最终用 户的完美需求提供了有效有利的平台.下面的例子提供了VB语言对实现美观实用的下拉树形控件 ...

  7. 谷歌的android下拉刷新页面,Android SwipeRefreshLayout:谷歌官方SDK包中的下拉刷新

     <Android SwipeRefreshLayout:谷歌官方SDK包中的下拉刷新> 下拉刷新在如今移动开发中应用如此广泛和普遍,以至于谷歌干脆在SDK中给予支持.在android ...

  8. Bootstrap入门(八)组件2:下拉菜单

    Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link hr ...

  9. Vue组件中使用canvas实现蜂巢效果的一些尝试

    Vue组件中使用canvas实现蜂巢效果的一些尝试   前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...

最新文章

  1. 如何创建可扩展表视图中的iOS 学习和拓展优化(有待更新)
  2. mysql中blob_MySQL中的BLOB类型
  3. SharePoint 2010 BCS - 简单实例(二)外部列表创建
  4. CSS Media媒体查询
  5. AD RMS保护电子邮件安全
  6. 【Paper】2018_多无人机协同编队控制算法研究_林倩玉
  7. 数据加载很慢_Vaex真香!几秒钟就能处理数十亿行数据,比Pandas、Dask更好用
  8. 联想rd540服务器怎么装系统,联想RD540加显卡BIOS设置
  9. 记一次与iframe之间的抗争
  10. wxWidgets:wxComboCtrl 示例
  11. 第8章 线性时间排序
  12. TED演讲——人生的12条法则
  13. SilverlightComponent for ExtJS
  14. 从 Poisson 分布到服务器的访问
  15. OGNL(Object-Graph Navigation Language对象图定位语言)和struts2标签
  16. 史上最全三维建模软件汇总
  17. android 换机 备份,Android QQ同步助手3.7:资料备份让换机刷机无忧
  18. 下列不是python的注释方式_以下不是python的注释方式是( )_学小易找答案
  19. Brainfuck与Ook!编程语言解析与解密
  20. 计算机中的cad是什么意思是,cad是什么意思 cad是什么软件

热门文章

  1. 一周要闻:为什么从百度离职,程序员五件事.......
  2. postgreSql 常用操作总结
  3. Kafka+Storm+HDFS整合实践
  4. 线性模型(1) —— 多元线性回归
  5. 第十八天 DNS服务原理及bind详细配置
  6. 细说Linux 系统优化
  7. mysql innodb引擎--范围查询优化
  8. 检查DISPLAY设置时Xlib出现No protocol specified错误
  9. 《吃土》全书笔记整理
  10. Ubuntu20.04开机界面(boot animation)改成Windows95