`

Extjs下拉树列表组合框实现

阅读更多

经常在用于显示组织机构的时候会使用下拉树列表组合框,在此给出本人的实现方式,直接上代码:

Ext.ux.TreeCombox = Ext.extend(Ext.form.ComboBox, {
	/**
	 * @cfg treeUrl {String}
	 * 树的请求地址
	 */
	/**
	 * 根节点
	 * @property root {TreeNode}
	 */
	store : new Ext.data.SimpleStore({
				fields : [],
				data : [[]]
			}),
	editable : false,
	mode : 'local',
	emptyText : "请选择",
	allowBlank : false,
	blankText : "必须输入!",
	triggerAction : 'all',
	maxHeight : 400,
	anchor : '95%',
	displayField : 'text',
	valueField : 'id',
	selectedClass : '',
	onSelect : Ext.emptyFn,
	initComponent : function() {
		this.addEvents(
			"nodeclick",
			"afterTreeExpand"
		)
		this.divId = Ext.id()
		this.tpl = "<tpl for='.'><div style='height:380px'><div id='"+this.divId+"'></div></div></tpl>"
		this.initTree();
		
		this.tree.on('click', function(node) {
//				alert("click")
//				this.selectByValue(node.text)
				this.setValue(node.text);
				this.fireEvent("nodeclick",this,node);
				this.collapse();
			},this)

		this.on('expand', function() {
					this.tree.render(this.divId);
					this.fireEvent("afterTreeExpand",this,this.tree)
					if(this.expandTree){
						this.tree.expandAll();
					}
				},this);

		Ext.ux.TreeCombox.superclass.initComponent.call(this);
	},
	initTree : function () {
		this.tree = new Ext.tree.TreePanel({
			height : 380,
			scope : this,
			autoScroll : true,
			split : true,
			rootVisible : false,
			root : this.root || {
				text : '根节点',
				draggable : false
			},

			loader :this.treeLoader || new Ext.tree.TreeLoader({
						url : this.treeUrl

					})
			});
	},
	getRootNode : function() {
		return this.tree.root;
	},
	getTree : function() {
		return this.tree;
	}
});
Ext.reg("comboxtree",Ext.ux.TreeCombox)

 

0
0
分享到:
评论

相关推荐

    ExtJs下拉树

    ExtJS是一款强大的JavaScript框架,...综上所述,ExtJS的下拉树组件是通过组合ComboBox和TreePanel的特性,为用户提供了一种高效的数据选择方式。了解其工作原理和关键API,有助于开发者在实际项目中灵活运用和定制。

    Extjs6 下拉列表

    - GridCombo是一个组合了下拉列表和表格视图的控件,通常称为Combogrid。它在ComboBox的基础上增加了表格展示的功能,使用户能够看到更多的信息,而不仅仅是简单的文本标签。 - GridCombo通过`store`连接到数据源...

    ExtJS下拉列表树控件1

    总之,ExtJS下拉列表树控件的实现涉及组件组合、数据存储、事件处理等多个方面,通过`extjs实现下拉框树形结构.js`文件,我们可以学习到如何将下拉列表与树形结构相结合,为用户提供更直观、易用的交互方式。...

    Extjs-多功能下拉树列表

    ### Extjs-多功能下拉树列表 #### 一、引言 在开发用户界面时,开发者经常需要构建具有复杂交互性的组件,以提供更高效、更直观的数据展示和选择方式。其中,下拉树列表是一种非常实用且常见的控件类型,它结合了...

    ExtJS4下拉树组件

    在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于需要展示分层数据结构的应用场景中。 #### 二、核心...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    ext 下拉树demo

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

    extjs表单中的下拉框(comobobox)手动添加空选项

    其中一个常用的组件就是`ComboBox`(组合框),它可以用来创建一个包含可选择项目的下拉列表。在某些场景下,我们可能需要在`ComboBox`中手动添加一个空选项或者默认选项,例如“所有”、“请选择”等,以便让用户...

    Extjs3 多选下拉框LovCombo

    3. **自定义模板**:可以定制显示模板,决定如何在下拉列表和组合框中展示每个选项。 4. **配置灵活性**:支持各种配置项,如fieldLabel(字段标签)、store(存储数据的源)、displayField(显示字段)、...

    combox下拉树combox下拉树

    在IT行业中,`Combox`(组合框)是一种常见的用户界面元素,它结合了文本输入框和下拉列表的功能,通常用于提供用户选择一个或多个预定义的选项。当需要在下拉列表中呈现层级结构时,我们就会涉及到“Combox下拉树”...

    Extjs 4.1 下拉框 Tree 的实现(mvc)

    本文将深入探讨如何在ExtJS 4.1环境中利用MVC架构实现一个功能丰富的下拉框(Tree ComboBox),并结合具体代码示例进行详细解析。 ### ExtJS 4.1 下拉框Tree实现(MVC) #### 1. MVC架构简介 MVC,即Model-View-...

    组合框combo里面change和click的区别

    当用户从下拉列表中选择一个新项,并且焦点离开组合框时,就会发生`Change`事件。这通常意味着当前选定的值已经发生了变化。 - 在`Change`事件的处理程序中,你可以访问`ComboBox.SelectedItem`或`ComboBox....

    extjs实现下拉框多选

    // 将按钮添加到组合框的工具栏 combo.tbar = [clearButton]; ``` 以上就是使用ExtJS实现下拉框多选的基本步骤。通过调整样式、事件处理和自定义行为,可以根据项目需求进一步优化这个组件。在实际应用中,你可能...

    extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    其中,下拉列表用于“是否启用密码策略”,使用了`xtype: 'combo'`来表示这是一个组合框。这个下拉列表的数据来源于一个本地数据存储`Ext.data.SimpleStore`,包含了两个选项:启用(1)和禁用(0)。通过`...

    extjs电子教材,开发extjs框架的好东西

    5. **表单(Forms)**:EXTJS提供了各种表单字段,如文本框、下拉列表、日期选择器等,以及表单验证功能,便于用户输入和数据管理。 6. **树形视图(Tree)**:EXTJS的树形组件可以展示层次结构的数据,支持拖放...

    extjs网页控件开发

    在ExtJS中,这通常通过组合框(ComboBox)组件和数据存储(Store)配合实现。每个级别的下拉框都有自己的Store,当上一级选择改变时,可以通过监听事件并更新Store来刷新下拉列表内容。 开发这样的控件需要掌握以下...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    首先,我们来看看`LovCombo.js`,这可能是一个自定义的组合框组件,扩展了ExtJS的原生ComboBox类,以实现多选功能。在ExtJS中,创建这样的组件通常涉及到以下步骤: 1. **创建一个新的类**:定义一个继承自Ext.form...

    Extjs Combotree

    ExtJS Combobox Tree,通常被称为Combotree,是ExtJS框架中的一个组件,它结合了下拉列表(Combobox)和树形结构(Tree),提供了一种用户友好的选择方式,尤其适用于展示层级关系的数据。在ExtJS 4.x版本中,这个...

    下拉(条件)搜索实例extjs4.2(亲测可用).zip

    在这个“下拉(条件)搜索实例”中,我们看到开发者利用ExtJS 4.2实现了一个交互式的用户界面,其中包含了下拉菜单和条件搜索功能。 下拉搜索通常指的是在输入框中使用下拉列表作为候选选项的搜索方式,用户可以快速...

Global site tag (gtag.js) - Google Analytics