ComboBox封装

1、调用方式

//部门组合框
var dpCombo = new MyComboBox( {
	dataUrl : 'comboServer.jsp',
	fieldLabel:'所属部门',
	displayField : 'name',
	valueField : 'idno',
	params : {
              type : 'department'//部门，即字段名称
	} 
});

2、MyComboBox.js

MyComboBox = Ext.extend(Ext.form.ComboBox, {

	displayField : this.displayField,
	valueField : this.valueField,
	width:150,
	editable:false,
	emptyText : '请选择',// 默认值
		mode : 'remote',
		triggerAction : 'all',
		initComponent : function() {
		// 在组件初始化期间调用的代码
		this.children = [];
		// 调用父类构造函数（必须）
		MyComboBox.superclass.initComponent.apply(this, arguments);
		// 设置数据源
		this.store = new Ext.data.Store( {
			baseParams : this.params || {},
			proxy : new Ext.data.HttpProxy( {
				url : this.dataUrl
			}),
			reader : new Ext.data.JsonReader( {
				root : 'data',
				totalProperty : 'totalSize'
			}, [ {
				name : this.displayField,
				mapping : this.displayField
			}, {
				name : this.valueField,
				mapping : this.valueField
			}])
		});
	},
	// 设置默认值，并触发Select 事件
	setDefaultValue : function(v) {
		this.setValue(v);
		this.fireEvent('select', this);
	},
	//向数据源添加request参数 
	addParam : function(parameters) {
		Ext.apply(this.store.baseParams, parameters);
	},

	listeners : {
		select : function(combo, record, index) {
			Ext.each(this.children, function(child) {
				// child.clearValue();
					// 级联的子下拉框会多发送一个&parent=..的参数，后端据此可以做出判断如何加载数据
					child.addParam( {
						parent : combo.value
					});

					child.reload();

				});
		}
	},
	/**//** 添加下级级联的下拉框 */
	addChild : function(child) {
		this.children.push(child);
		return this;
	},
	/** 重新加载数据源 */
	reload : function() {
		if (this.store)
			this.store.load();
		if (this.defaultValue) {
			this.setDefaultValue(this.defaultValue);
			this.defaultValue = null; // 默认值，只初始化一次
		}
		return this;
	}
});