`
379548695
  • 浏览: 155168 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

extjs 3.4下拉树扩展

 
阅读更多

根据[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree文章最后2个人反馈点击+号展开节点时列表框消失的情况自己体验了下。确实有这个现象,应该是3.x的有这个问题,2.x正常,现在修改代码如下解决这个问题

 

 

ie8,firefox,chrom测试正常,extjs 版本3.4
 

 

 

Ext.ux.ComboBoxTree = function(){
	this.treeId = Ext.id()+'-tree';
	this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight;
	this.tpl = new Ext.Template('<tpl for="."><div style="height:'+this.maxHeight+'px"><div id="'+this.treeId+'"></div></div></tpl>');
	this.store = new Ext.data.SimpleStore({fields:[],data:[[]]});
	this.selectedClass = '';
	this.mode = 'local';
	this.triggerAction = 'all';
	this.onSelect = Ext.emptyFn;
	this.editable = false;
	this.beforeBlur = Ext.emptyFn;

	//all:所有结点都可选中
	//exceptRoot:除根结点,其它结点都可选(默认)
	//folder:只有目录(非叶子和非根结点)可选
	//leaf:只有叶子结点可选
	this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot';
	
	this.addEvents('afterchange');

	Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments);

}

Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, {

	expand : function(){
		Ext.ux.ComboBoxTree.superclass.expand.call(this);
		if(this.tree.rendered){
			return;
		}

		Ext.apply(this.tree,{height:this.maxHeight, width:(this.listWidth||this.width-(Ext.isIE?3:0))-2, border:false, autoScroll:true});
		if(this.tree.xtype){
			this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);
		}
		this.tree.render(this.treeId);
		
		var root = this.tree.getRootNode();
		if(!root.isLoaded())
			root.reload();

		this.tree.on('click',function(node){
			var selModel = this.selectNodeModel;
			var isLeaf = node.isLeaf();
			
			if((node == root) && selModel != 'all'){
				return;
			}else if(selModel=='folder' && isLeaf){
				return;
			}else if(selModel=='leaf' && !isLeaf){
				return;
			}
			
			var oldNode = this.getNode();
			if(this.fireEvent('beforeselect', this, node, oldNode) !== false) {
				this.setValue(node);
				this.collapse();

				this.fireEvent('select', this, node, oldNode);
				(oldNode !== node) ? this.fireEvent('afterchange', this, node, oldNode) : '';
			}
		}, this);
    },
    
	setValue : function(node){
		this.node = node;
        var text = node.text;
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = node.id;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = node.id;
    },
    
    getValue : function(){
    	return typeof this.value != 'undefined' ? this.value : '';
    },

	getNode : function(){
		return this.node;
	},

	clearValue : function(){
		Ext.ux.ComboBoxTree.superclass.clearValue.call(this);
        this.node = null;
    },
	// 重写onViewClick,使展开树结点是不关闭下拉框  
    onViewClick : function(doFocus) {  
        var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);  
        if (r) {  
            this.onSelect(r, index);  
        }  
        if (doFocus !== false) {  
            this.el.focus();  
        }  
    },  
	// private
    destroy: function() {
		Ext.ux.ComboBoxTree.superclass.destroy.call(this);
		Ext.destroy([this.node,this.tree]);
		delete this.node;
    }
});

Ext.reg('combotree', Ext.ux.ComboBoxTree);
分享到:
评论
2 楼 -惜帅- 2012-09-04  
	var comboBoxTree = new Ext.ux.ComboBoxTree({ 
      renderTo : 'EserverTypeID', 
      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:'organization!queryDeptTreeJSON.json'}), 
            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){//选择树结点设值之后,并当新值和旧值不相等时的事件
                  //...
            }
      }
	});  
1 楼 -惜帅- 2012-09-04  
哇哦,支持了,找了好久,经测试确实有效哈,谢谢分享!
使用如下:方便后来者
	var comboBoxTree = new Ext.ux.ComboBoxTree({ 
      renderTo : 'EserverTypeID', 
      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:'organization!queryDeptTreeJSON.json'}), 
            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){//选择树结点设值之后,并当新值和旧值不相等时的事件
                  //...
            }
      }
	});  

相关推荐

    extjs 3.4 开发前准备

    【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...

    spket1.6和extjs3.4

    标题"spket1.6和extjs3.4"指的是两个不同的JavaScript开发工具和库。Spket是一个集成开发环境(IDE),主要用于JavaScript、JSON和AJAX开发,而ExtJS是一个用于构建富客户端Web应用的JavaScript框架。这里的版本号...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    本资源包包含了与ExtJS 3.4相关的学习资料,包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`,旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...

    ExtJS 3.4 源码包

    - **JS类系统**:ExtJS使用面向对象的类系统,类与类之间可以通过继承实现代码重用和扩展。 - **事件系统**:事件驱动是ExtJS的核心机制,允许组件间通信和响应用户操作。 - **Ajax通信**:Ext.Ajax模块负责异步...

    Extjs4 下拉树 TreeCombo

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

    ExtJs3.4 api

    extjs3.4api,很实用,方便大家学习extjs,欢迎大家下载 extjs3.4中文api,很实用,方便大家学习extjs,欢迎大家下载

    ExtJs4.2下拉树(修改版)

    ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...

    extjsapi/extjs3.4

    extjsapi,extjs文档,api手岫

    ExtJs3下拉树

    ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...

    extjs 3.4 full package

    extjs 3.4 full package extjs 3.4 ajax 实例

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

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

    ExtJs3.4 扩展的Tags控件

    在本主题中,我们关注的是ExtJs3.4版本中的一个扩展——Tags控件。这个控件允许用户在界面上以标签的形式输入和展示数据,常见于关键词选择或者多值输入的场景。 `Tags控件`是基于`DataView`组件进行扩展的。`...

    ExtJS 3.4关于TreePanel的一些实例

    1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. 给节点增加提示信息 9. 为节点设置超链接 10. 编辑节点名称 ...

    extjs_3.4官方离线API

    extjs_3.4官方离线API,方便查询所有组件属性

    Extjs下拉多选树

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

    ExtJS3.4和VS2010上传文件的进度条

    在ExtJS3.4版本中,它提供了丰富的UI组件和强大的数据管理功能,包括网格、表格、表单、树形结构等,以及各种视觉效果和交互控件。 在这个例子中,关键组件是“进度条”(ProgressBar)。ExtJS的进度条组件可以用来...

    Extjs4 下拉树( v1.0版本有bug,已经上传一个可以用的)

    标题中的“Extjs4 下拉树”指的是EXTJS框架中的一个组件,用于实现下拉菜单与树形结构的结合,这种组件通常在需要选择层级结构数据时非常有用,比如地区选择、组织架构选择等。EXTJS是Sencha公司开发的一个...

    ExtJs下拉树

    在ExtJS中,下拉树(ComboBoxTree)是一种结合了下拉框和树结构的组件,它允许用户从一个展开的树形列表中选择值,而不是传统的单行文本输入或简单的下拉列表。这种组件在数据层级结构复杂且需要用户进行多级选择时...

    ExtJS4下拉树组件

    ### ExtJS4 下拉树组件知识点详解 #### 一、概述 在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于...

    extjs下拉树

    ExtJS下拉树是一种在Web应用中常用的交互组件,它结合了下拉框和树形结构的优点,使得用户可以在一个紧凑的空间内选择嵌套层次的数据。这种组件在数据层级较多,需要用户进行逐级选择或者查看层级关系时非常实用。在...

Global site tag (gtag.js) - Google Analytics