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

Ext中Combo组件的联动封装

    博客分类:
  • Web
EXT 
阅读更多
在Extjs中构造N级联动下拉的麻烦不少,需定制下拉数据并设定响应事件。通过对Combo集合的封装,无需自己配置Combo,只需设定数据和关联层级,即可自动构造出一组支持正向和逆向过滤的联动下拉并获取其中某一个的实例。

Ext.custom = {};

/**
 * 封装了联动下拉的数据和数据结构转换的Ext类
 * 需要传入数据:
 * 1 联动下拉数据
 * 2 combo数组(要求定义level属性)或者level数组
 * 
 * @author 杨一
 * @date 2009-7-1
 */
Ext.custom.LinkComboBag = function(data, combos) {
	this.data = data || [];
	// 按照各个联动的顺序传入下拉数组
	this.combos = combos || [];
	// 持有各个联动数据的引用
	this.stores = {};
	// 构造关联部分
	var thisObj = this;
	// 初始化下拉
	for (var i = 0; i < combos.length; i++) {
		if(combos[i] instanceof Object){
		}else{
			combos[i] = {
				level: combos[i]
			}
		}
		
		combos[i].id = Ext.id();
		combos[i]["xtype"] = 'combo';
		combos[i]["editable"] = false;
		combos[i]["emptyText"] = '请选择';
		combos[i]["displayField"] = 'text';
		combos[i]["valueField"] = 'value';
		combos[i]["triggerAction"] = 'all';
		combos[i]["mode"] = 'local';
		
		combos[i]["store"] = this.buildStore(combos[i].level);
		// 回调函数
		combos[i]["listeners"] = {
			'beforeselect' : function(combo, record, index) {
				// 找到当前的下拉索引号
				for (var k = 0; k < combos.length; k++) {
					if (combos[k].level === combo.level)
						break;
				}
				// 遍历所有当前下拉后的组件下拉
				for (var j = k + 1; j < combos.length; j++) {
					// 清空这些下拉的数据集
					Ext.getCmp(combos[j].id).clearValue();
				}
				// 如果存在下一个下拉
				if (k + 1 < combos.length)
					// 把下一个下拉重新设定数据集
					thisObj.change(combos[k + 1].level, record.get('type'));
				thisObj.reverseSelect(combo.level, record.get('type'));
			}
		}
	}
};
/**
 * 按照索引获取下拉
 * 
 * @param index
 *            下拉索引
 * @return 组件下拉
 */
Ext.custom.LinkComboBag.prototype.getComboByIndex = function(index){
	return this.combos[index];
}

/**
 * 按照层级获取下拉
 * 
 * @param level
 *            下拉层级
 * @return 组件下拉
 */
Ext.custom.LinkComboBag.prototype.getComboByLevel = function(level){
	for(var i=0;i<this.combos.length;i++){
		if(this.combos[i].level == level)
			return this.combos[i];
	}
	return null;
}

/**
 * 建立一个默认的store并持有其引用
 * 
 * @param level
 *            combo所属的层次
 * @return 建立的数据集store
 */
Ext.custom.LinkComboBag.prototype.buildStore = function(level) {
	if (!this.stores[level])
		this.stores[level] = new Ext.data.SimpleStore({
			fields : ["type", "text", "value"],
			sortInfo : {
				field : "type",
				direction : "ASC"
			}
		});
	this.initData(level);
	return this.stores[level];
};

/**
 * 根据制定的层级初始化一个combo使用的数据集 也可以采用Store:Filter的形式实现
 * 
 * @param level
 *            combo所属的层次
 * @param type
 *            选项类别
 */
Ext.custom.LinkComboBag.prototype.initData = function(level) {
	var reData = [];
	var index = 0;
	for (var i = 0; i < this.data.length; i++) {
		if (this.data[i].level == level)
			reData[index++] = [this.data[i].type, this.data[i].text,
					this.data[i].value];
	}
	this.stores[level].loadData(reData, false);
};

/**
 * 根据制定的层级及父类别更新一个combo使用的数据集 也可以采用Store:Filter的形式实现
 * 
 * @param level
 *            combo所属的层次
 * @param type
 *            选项类别
 */
Ext.custom.LinkComboBag.prototype.change = function(level, type) {
	var reData = [];
	var index = 0;
	for (var i = 0; i < this.data.length; i++) {
		if (this.data[i].level == level
				&& this.data[i].type.substr(0, type.length) === type)
			reData[index++] = [this.data[i].type, this.data[i].text,
					this.data[i].value];
	}
	this.stores[level].loadData(reData, false);
};

/**
 * 反向选择,改变值,不改变数据集
 * 
 * @param level
 *            combo所属的层次
 * @param type
 *            选项类别
 */
Ext.custom.LinkComboBag.prototype.reverseSelect = function(level, type) {
	//找到当前组件索引号
	for (var k = 0; k < this.combos.length; k++) {
		if (this.combos[k].level === level)
			break;
	}
	//遍历所有前面的组件
	for(var j=k-1;j>=0;j--){
		for (var i = 0; i < this.data.length; i++) {
			if (this.data[i].level == this.combos[j].level
				&& type.substr(0, type.length - 2*(k - j)) == this.data[i].type){
				Ext.getCmp(this.combos[j].id).setValue(this.data[i].value);
			}
		}
	}
};


使用方法,如:
数据:

Ext.test = {};

Ext.test.lcbdata = [{
    level: 1, //下拉层级,可以是数字或字符串
    type: '11', //所有父类别累加+本级类别
    text: 'text1',//显示文本
    value: '11'//值
},{
    level: 1,
    type: '12',
    text: 'text2',
    value: '12'
},{
    level: 2,
    type: '111',
    text: 'text3',
    value: '111'
},{
    level: 3,
    type: '1111',
    text: 'text4',
    value: '1111'
}];


使用:

var lcb = new Ext.custom.LinkComboBag(Ext.test.lcbdata, [1, 2, 3]); //第二个参数的数组顺序就是下拉的层级顺序
var lv1 = lcb.getComboByLevel(1); //level值是1的ComboBox
var lv2 = lcb.getComboByLevel(2);
var lv3 = lcb.getComboByLevel(3);
分享到:
评论

相关推荐

    ext中combo过滤

    在探讨“Ext中Combo过滤”的实现机制之前,我们先来了解一下基本概念。Ext是一个功能强大的JavaScript框架,用于构建复杂的Web应用程序。它提供了大量的UI组件,其中就包括了`ComboBox`(简称`Combo`)。`ComboBox`...

    ext combobox二级联动

    ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...

    EXT多选COMBO

    EXT多选COMBO是一种在EXTJS框架中实现的组件,用于创建具有多选功能的下拉框。EXTJS是一款强大的JavaScript UI库,它提供了一系列预定义的组件,帮助开发者构建富客户端应用程序。在这个特定的场景中,“EXT多选...

    Ext组件说明 Ext组件概述

    Container是Ext中用于组织和管理其他组件的通用容器。它可以嵌套其他容器或组件,并应用不同的布局策略。 ##### 5. **DataView(数据视图)** DataView组件用于展示数据集,支持各种数据绑定和动态更新机制。它...

    EXT中COMBOX联动

    "EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...

    tapestry4.02中封装ext的GridPanel组件

    在Tapestry 4.02中封装Ext的GridPanel组件,意味着开发者将ExtJS的GridPanel功能集成到Tapestry应用中,使Tapestry应用能够利用GridPanel的强大功能。这个过程通常涉及到以下几个关键步骤: 1. **引入ExtJS库**:...

    EXT.form组件

    3. `combo`:`Ext.form.ComboBox`是下拉列表框组件,允许用户在预设的选项中进行选择,同时可以提供搜索功能以便快速定位选项。 4. `datefield`:`Ext.form.DateField`是日期选择组件,用户可以通过日历控件选择...

    ext 颜色改变组件

    EXT Color Change Component,即EXT颜色改变组件,是EXT库中一个用于处理颜色选择和展示的UI组件,它提供了用户友好的界面,使得用户可以在应用中方便地更改颜色。 在EXT框架中,组件是构建用户界面的基本单元,...

    tapestry4.02中封装ext的TabPanel组件

    在本文中,我们将深入探讨 Tapestry 4.02 框架中封装的 Ext TabPanel 组件。Tapestry 是一个开源的Java Web 应用程序开发框架,它允许开发者使用简单的Java类和模板语言来创建动态、交互式的Web应用。而 Ext 是一个...

    Ext、Ext4中各个组件、属性、方法详解

    Ext、Ext4中各个组件、属性、方法详解,一个不漏;Ext学习入门及参考最好的资料

    ext下拉多选组件multicombo

    通过深入学习EXTJS的"ext下拉多选组件multicombo",开发者可以掌握如何在自己的应用中实现多选下拉功能,提升用户体验。同时,对源码的研究有助于增强EXTJS框架的理解,从而更好地进行组件的扩展和定制,满足特定...

    Ext二级联动完整例子

    总的来说,这个“Ext二级联动完整例子”项目将涵盖ExtJS的基础组件使用、数据绑定、事件处理和用户交互等多个方面,对于学习和掌握ExtJS的联动功能具有很高的参考价值。通过分析和运行这个项目,开发者能够深入理解...

    ExtJS Combobox二级联动列子

    ExtJS的Combobox组件是一种常见的数据输入控件,它提供了下拉列表的功能,用户可以选择列表中的一个选项或者在输入框中自由输入。在实际应用中,我们常常会遇到需要实现二级甚至多级联动的场景,这通常是由于数据的...

    Ext combo 下拉框级联

    在IT领域,"Ext combo 下拉框级联"是一个常见的前端UI组件开发技术,主要应用于构建交互式的Web应用。Ext JS是一个强大的JavaScript框架,用于创建富客户端应用,其中的ComboBox(下拉框)组件是其核心功能之一。...

    Ext2.0.2经典的一个JS组件带EXT中文手册.rar

    这个"Ext2.0.2经典的一个JS组件带EXT中文手册.rar"文件包含了该版本的ExtJS组件和相关的中文文档,帮助开发者更好地理解和使用这个框架。 1. **EXT中文手册**: 提供的`EXT 中文手册.doc`是ExtJS的中文文档,这...

    Ext组件描述,各个组件含义

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    Ext2.0 文件上传组件

    "Ext2.0 文件上传组件"是一个用于Web应用程序的组件,它允许用户在浏览器中方便地上传文件。这个组件基于Ext JavaScript库的2.0版本,Ext是一个强大的前端开发框架,提供了丰富的用户界面组件和数据管理功能。在本文...

    Ext的日历组件ExtCalendar.zip

    Ext Calendar 是 ExtJS 的一个功能非常强大的日历显示组件,支持包括 IE、Firefox、Safari、Chrome 和 Opera 浏览器。 类结构图如下所示: 运行效果图如下: 标签:ExtCalendar

Global site tag (gtag.js) - Google Analytics