`
li_sir
  • 浏览: 114805 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext combobox下拉树的实现

阅读更多

项目需要,对ext的bombobox实现了子类,来展示下拉列表树。哪有不好的,网友多多指正
/*
 * ext-3.2.1版本点击树的节点时,树自动隐藏,可能是这个版本的一个bug,下面是覆盖一个方法,解决此bug
 */
Ext.override(Ext.form.ComboBox, {   
      onViewClick : function(doFocus) {   
        var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);   
        if (r) {   
          this.onSelect(r, index);   
        } else if (s.getCount() === 0) {   
          this.collapse();   
        }   
        if (doFocus !== false) {   
          this.el.focus();   
        }   
      }   
    });  
	
	Ext.namespace("Tm");
	/**
	 * 下拉列表树,不带复选框,可控制只选叶子节点和所有节点,支持异步和本地加载
	 * 扩展属性:
	 * @tree 树对象
	 * @treeurl 树请求地址,如果是null,则本地加载
	 * @treeRootVisible 树根节点是否可见,true为可见,false是不可见,默认是不可见
	 * @treeValue 根节点的默认子节点,本地加载
	 * 目前问题:初始化对象必须传递renderTo属性
	 * @treeHeight 树面板的默认高度
	 * @onlyLeafCheckable 是否只允许选择叶子节点,true是只允许选择叶子节点,false所有节点均可选择
	 * @treeRootText 根节点的text
	 * @class Tm.TreeComboBox
	 * @extends Ext.form.ComboBox
	 * 
	 * 案例页面extendcombox.jsp
	 */
	Tm.TreeComboBox  =  Ext.extend(Ext.form.ComboBox, {
	   store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
	   tree:null,//树对象
	   treeurl:null,//树url
	   treeRootVisible:null,//根节点是否可见,默认为false,不可见
	   treeValue:null,//根的默认节点
	   treeHeight:120,//默认树的面板高度
	   treeRootText:'根节点',
	   onlyLeafCheckable:false,//默认所有节点均可选择,如果是true,只允许选择叶子节点
       constructor: function(config) {
       this.tpl= '<tpl for="."><div style="height:'+(this.treeHeight)+'px"><div id="'+this.renderTo+'_tree"></div></div></tpl>';
       Tm.TreeComboBox.superclass.constructor.apply(this, arguments);
       this._init();
        },
        /*
        *初始化
        */
        _init:function(){
         this.getTree();
       this.on("expand",function(){
		this.tree.render(this.renderTo+'_tree');
		});
		//树点击添加监听
		this.tree.addListener("click",function(node,e){
		 e.stopEvent();
		 if(this.onlyLeafCheckable){
		     if(!node.leaf){
		     node.expand();
		     return;
		     }
		     }
		     if(node.disabled)return;
		 this.setValue(node.id);
		 this.setRawValue(node.text);
		  this.collapse();
		},this);
        },

        /*
         *获取树对象
         */
      getTree: function(){
      
      if(!this.tree){
      var root =new Ext.tree.AsyncTreeNode({
								id:'root',
								text:this.treeRootText,
								children:this.treeValue
							});
		var load1=new Ext.tree.TreeLoader();
		var load2=new Ext.tree.TreeLoader({
					            dataUrl:this.treeurl
					        })					
       this.tree=new Ext.tree.TreePanel({
			        root:root,//定位到根节点
			        animate:true,//开启动画效果
			        enableDD:false,//不允许子节点拖动
			        border:false,//没有边框
			        rootVisible:this.treeRootVisible||false,//设为false将隐藏根节点
			        loader:this.treeurl==null?load1:load2
		    });
      }
      return this.tree;
       }
    });
0
12
分享到:
评论

相关推荐

    Ext combobox 下拉多选框带搜索功能

    在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...

    Ext下拉树、下拉表格

    在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...

    ext 下拉树demo

    4. **TreePicker**:EXT中的下拉树组件可能基于Combobox(组合框)组件扩展,提供树形选择功能。它在初始状态下显示为一个输入框,当用户点击时展开为一个下拉树列表。 5. **配置项**:在创建TreePicker时,需要...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

    Ext4.0 动态修改ComboBox选择项(本地模式)

    首先,ComboBox在Ext JS中是一个可选列表的输入控件,它可以展示一个下拉菜单供用户选择。在本地模式下,ComboBox的数据通常存储在本地,如JavaScript数组中,而不是从远程服务器获取。这样可以提高应用的响应速度,...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    Ext ComboboxGrid

    在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则用于展示大量数据并进行编辑和操作。ComboboxGrid将这两者融合,使得用户可以在输入框中输入关键字搜索,同时下拉展示匹配的网格数据,便于多维度筛选...

    ext多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...

    Ext comboBox的remote模式,联想功能实现

    本篇我们将深入探讨“Ext comboBox的remote模式”及其联想功能的实现。 在Ext JS的comboBox中,远程模式(remote mode)是一种数据加载策略,它适用于处理大量数据或实时数据的情况。在这种模式下,comboBox不会一...

    Ext ComBobox 附带完整附件

    4. **事件处理**:作为Ext JS组件,ComBobox会有一套完整的事件系统,如选择项的改变、打开和关闭下拉列表等,开发者可以通过监听这些事件来实现特定的业务逻辑。 5. **多选功能**:一些组合框允许用户选择多个值,...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    用Ext 2.0 combobox 做的省份和城市联动选择框的例程

    在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    extjs4 实现下拉树并支持复选

    在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    综上所述,ExtJS 4.x的ComboboxTree组件是实现下拉树形菜单的强大工具,它结合了下拉框的简洁和树结构的层次感,提供了丰富的定制选项,能满足多种场景下的需求。理解并熟练掌握其用法,将极大地提升开发效率和用户...

Global site tag (gtag.js) - Google Analytics