Ext关于comboBox级联的问题

[lzy83925]

我们一般在项目开发的时候都会注意 重用的问题。不然每次都new一个组件的时候会因为一些繁琐的配置而伤透脑经，所以我写了一个 Ext comboBox的级联重用类。但是现在问题出来了。。
我先把代码发给大家把

CascadeCombo = Ext.extend(Ext.form.ComboBox, {
	// valueField : 'id',
		// displayField : 'label',
		mode : 'local',
		emptyText : '请选择',
		triggerAction : 'all',
		editable:false,
		forceSelection:false,
		selectOnFocus:true,
		typeAhead:true,
		
		initComponent : function() {
			this.children = [];
			/**
			 * 调用父类的构造函数（必须）
			 */
			CascadeCombo.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 : 'root',
					totalProperty : 'totalProperty'
				}, this.storeFields)
			});
		},
		/**
		 * 设置默认值，并触发select事件
		 */

		setDefaultValue : function(v) {
			this.setValue(v);
			this.fireEvent('select', this);
		},

		/**
		 * 向数据源添加request参数
		 */

		addParams : function(parameters) {
			Ext.apply(this.store.baseParams, parameters);
		},

		/**
		 * 添加下级级联的下拉框
		 */

		addChild : function(child) {
			this.children.push(child);
		},

		/**
		 * 重新加载数据源
		 */

		reload : function() {
			if (this.store) {
				this.store.load();
			}
			if (this.defaultValue) {
				this.setDefaultValue(this.defaultValue);
				this.defaultValue = null;// 默认值只初始化一次
			}
			return this;
		},

		listeners : {
			select : function(combo, record, index) {
				Ext.each(this.children, function(child) {
					child.addParams( {
						parent : combo.value
					});
					child.defaultValue = '请选择';
					child.reload();
				});
			}
		}

	});

Ext.onReady(function() {
	var roleGroup = new CascadeCombo( {
		dataUrl : path + '/sys/queryAllRolegroup.pt',
		// renderTo : 'sel1',
		hiddenName:'rolegroupId',
		params : {
			id : 'rolegroupId'
		},
		storeFields : [ {
			name : 'rolegroupId'
		}, {
			name : 'groupName'
		}],
		valueField : 'rolegroupId',
		displayField : 'groupName'

	});

	var role = new CascadeCombo( {
		dataUrl : path + '/sys/findByGroupRole.pt',
		// renderTo : 'sel2',
		hiddenName:'roleId',
		storeFields : [ {
			name : 'roleId'
		}, {
			name : 'roleName'
		}],
		valueField : 'roleId',
		displayField : 'roleName'

	});
	roleGroup.addChild(role);
	roleGroup.reload();

    new Ext.Button( {
		text : '显示',
		renderTo:'sel1',
		handler:function(){
			var window=new Ext.Window({
				title:'测试',
				resizable:false,
				items:[new Ext.form.FormPanel({
					frame : true,
					border : false,
					labelAlign : 'right',
					labelWidth : 60,
					defaults : {
						xtype : "textfield",
						width : 150
					},
					items:[roleGroup,role]
				
				})]
			}).show();
		}
		
	});

});

现在的问题就是 我点击显示按钮 第一次出来的时候都是正常的 数据也有 也有级联效果。但是一旦关闭了 window 再点击显示按钮的时候 window里什么都没有了。
如果我在 我的formPanel里加上其他的item的话 其他的item照常正常显示 但是就是
这个级联下拉框 不显示。。
不得其所 希望大家 来认真关注下 谢谢了

[leadergg]

ID冲突。因为你关闭window时没有注销控件，再次打开是又new了一个一样的控件，发生冲突，就不能正常显示。解决办法由两个：
1、每次打开window调用hide和show方法。如果window对象存在就直接show，关闭时是hide；如果window对象不存在才new一个。
2、关闭window时直接用close，包括点右上角的x都调用close。这样就会把window里面的控件都注销。

[mumu_java]

关闭window的时候不要调用window的close方法，要隐藏window,调用window.hide();

[JavaAlpha]

/******************级联combo********************/
var dptComStore = null;
var dptCombo = null;
var postComStore = null;
var postCombo = null;
function createComboBox() {
if (dptComStore == null) {
dptComStore = new Ext.data.JsonStore({
totalProperty : "results",
root : "items",
url : 'department.do?method=getAllDepartment',
fields : ['id', 'name']
});
dptComStore.load();
dptCombo = new Ext.form.ComboBox({
fieldLabel : '请选择部门',
id : 'department',
store : dptComStore,
emptyText : "请选择",
mode : 'remote',
typeAhead : true,
triggerAction : 'all',
valueField : 'id',
displayField : 'name',
loadingText : '正在加载部门信息',
selectOnFocus : true,
editable : false,
pageSize : 10,
border : true,
frame : true,
resizable : true
});
}
if (postComStore == null) {
dptCombo.on('select', function(combox) {
var url = 'department.do?method=getAllPost&dptId=' + combox.value;
postComStore.proxy = new Ext.data.HttpProxy({
url : url
});
postComStore.load({
callback : function(r) {
if (r.length >= 1) {
var key = r[0].get('value');
postCombo.setValue(key);
}
}
});
});
postComStore = new Ext.data.JsonStore({
totalProperty : "results",
root : "items",
fields : ['id', 'name']
});
postCombo = new Ext.form.ComboBox({
fieldLabel : '请选择职务',
id : 'post',
hiddenName : 'postId',
store : postComStore,
emptyText : "请选择",
mode : 'remote',
typeAhead : true,
triggerAction : 'all',
valueField : 'id',
displayField : 'name',
loadingText : '正在加载职务信息',
selectOnFocus : true,
editable : false,
pageSize : 10,
border : true,
frame : true,
resizable : true
});
}
};
/***************主入口*******************/
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
createComboBox();//创建那俩combo
Ext.form.Field.prototype.msgTarget = 'qtip';
var toolbar = new Ext.Toolbar(["请选择部门:", dptCombo, "请选择职务:", postCombo]);
var gridStore = new Ext.data.JsonStore({
root : 'items',
totalRecord : 'results',
fields : ['id', 'name', 'book', 'photo', 'certificateTyp',
'certificateCode']
});
dptCombo.on('select', function() {
gridStore.proxy = new Ext.data.HttpProxy({
url : 'employee.do?method=getAllEmployeeByDpt&dptId='
+ dptCombo.value
})
gridStore.load();
});
postCombo.on('select', function() {
gridStore.proxy = new Ext.data.HttpProxy({
url : 'post.do?method=getAllEmployee&postId=' + postCombo.value
})
gridStore.load();
});
var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect : true
});
var bootbar = new Ext.PagingToolbar({
store : gridStore,
pageSize : 20,
displayInfor : true,
displayMsg : '第{0}条到底{1}条,一共{2}条',
emptyMsg : '没有记录'
});
var cm = new Ext.grid.ColumnModel([sm, {
header : 'ID',
dataIndex : 'id'
}, {
header : '照片',
dataIndex : 'photo'
}, {
header : '姓名',
dataIndex : 'name'
}, {
header : '职务',
dataIndex : 'book'
}, {
header : '证件类型',
dataIndex : 'certificateTyp'
}, {
header : '证件号码',
dataIndex : 'certificateCode'
}])
var gridPanel = new Ext.grid.GridPanel({
frame : true,
cm : cm,
sm : sm,
border : false,
bbar : bootbar,
tbar : toolbar,
store : gridStore,
viewConfig : {
autoFill : true
},
loadMask : { // 填充表格数据加载时间
msg : '正在加载数据，请稍后.....'
},
listeners : {
"rowclick" : function(grid, index) {
var record = grid.getSelectionModel().getSelected();
var eid = record.get('id');
formPanel.getForm().load({
url : 'employee.do?method=getAllEmployeeById',// 请求的url地址
params : {
eid : eid
},
method : 'GET',// 请求方式
success : function(form, action) {// 加载成功的处理函数

},
failure : function(form, action) {// 加载失败的处理函数
Ext.Msg.alert('提示', '数据加载失败');
}
})
}
}
});

/********************************/
重点是将那个combo放在ToolBar里就可以了.

[泛泛之辈110]

[Quote=引用 2 楼 leadergg 的回复:]
ID冲突。因为你关闭window时没有注销控件，再次打开是又new了一个一样的控件，发生冲突，就不能正常显示。解决办法由两个：
1、每次打开window调用hide和show方法。如果window对象存在就直接show，关闭时是hide；如果window对象不存在才new一个。
2、关闭window时直接用close，包括点右上角的x都调用close。这样就会把window里面的控件都注销。
[/Quote]
说的对！