Ext.Window组件多次show或hide后combobox消失的问题

最新推荐文章于 2022-03-10 21:30:15 发布

Leon1509

最新推荐文章于 2022-03-10 21:30:15 发布

阅读量464

点赞数 1

文章标签： EXT FP CSS Ajax Windows

本文链接：https://blog.csdn.net/Leon1509/article/details/83426492

版权

转载地址：[url]http://www.iteye.com/problems/14728[/url]

问题描述，window中我放置了两个combobox，在tbar上设置按钮，负责显示window，并设置cancel按钮handler中函数，window.hide（）令其隐藏。
一：单击tbar，window出来combobox，我没去动他，然后直接点cancel按钮，window隐藏，再点tbar，window正常显示出来，并且window中的组件完好。
二：问题出现，当我点开window，并且选了combobox中的选项后，我点cancel，也就是window.hide（），然后我又把window打开，这时，window中的combobox不见了。只有fieldLabel的文字。

请大家帮忙。


handler:function(){

	var gradeWin = new Ext.Window({
		title : '添加年级',
		width : 300,
		height : 150,
		plain : true,
		closeAction : 'hide',
		layout : 'form',
		labelWidth : 80,
		constrain : true, // windows不超过浏览器
		buttonAlign : 'center',
		modal : true,// 生成背景半透明div
		defaultType : 'textfield',
		defaults:{width:160},
		bodyStyle : 'padding:10px;',
		buttons : [{
			text : '确定',
			handler:function(){
											//   var stuTreeNode = Ext.getCmp('stuTree');
				//  alert(Ext.getCmp('myTree')) ;
				var tree = Ext.getCmp('myTree') ;
				var stuNode = tree.getNodeById('stuTree') ;
				var text = Ext.getCmp('gradeName').getValue().toString();
				var type = Ext.getCmp('gradeType').getValue();
				if(text != ''&& type != ''){
					var node = new Ext.tree.TreeNode({
						text:text,
						leaf:true
					});
					//stuNode.isLeaf = false ;    
					stuNode.appendChild(node);
					gradeWin.hide();
				}else Ext.Msg.alert('错误提示','有空选项，请重新填写');
				//alert(tree.getNodeById('stuTree'));
			}//ok function
		}, {
			text : '取消',
			handler : function() {
				gradeWin.hide();
			}
		}],
		items :[{
			xtype:'combo',
			fieldLabel:'年级名称',
			id:'gradeName',
			displayField : "text",
			valueField : "value",
			mode : 'local',
			triggerAction : 'all',
			store : new Ext.data.SimpleStore({
				fields : ['value',　'text'],
				data : [['2004级', '2004级'],['2005级', '2005级'],　['2006级', '2006级'],['2007级', '2007级'],['2008级', '2008级'],['2009级', '2009级'],['2010级', '2010级'],['2011级', '2011级'],['2012级', '2012级'],['2013级', '2013级'],['2014级', '2014级']]
			})
		},{
			xtype:'combo',
			fieldLabel:'年级类型',
			id:'gradeType',
			readOnly : true,
			displayField : "text",
			valueField : "value",
			mode : 'local',
			triggerAction : 'all',
			store : new Ext.data.SimpleStore({
				fields : ['value','text'],
				data : [['已毕业', '已毕业'],['未毕业', '未毕业']]
			})
		}]//items
	}) ;//end gradeWin
	gradeWin.show();
}

答案：


2009-04-13 mgssnake (中级程序员)
楼主的做法不对，你既然将gradeWin对象放在hanlder事件中创建的话，那你多次点击后，就创建了多个gradeWin对象，你把gradeWin创建的部分放在外部即可，在hanlder调用的时候把gradeWin.show();出来即可。


提问者对于答案的评价：
哦，明白了。之前我也是把hide() 改成 close(); 但总觉得效率不高，之后发现这样的问题出现的原因是因为加了Id属性，由于id相同，所以第二次点出的window里没有了里面的组件。

[color=red][size=large]两种解决方法：
1. window组件不应该在显示window的函数中new，显示函数只负责window的show或hide方法
2. window内的combobox组件不要加id属性[/size][/color]

我成功的代码：


Ext.namespace("sf.or");
Ext.extend(demo.module,{
	init: function(){
		Ext.Ajax.on("beforerequest", function(){_grid.loadMask.show();});
		Ext.Ajax.on("requestcomplete", function(){_grid.loadMask.hide();});
		Ext.Ajax.on("requestexception", function(){_grid.loadMask.hide();});

		this.configs = {
			url: {
				list: contextPath + 'outRequest/list',
				update: contextPath + 'outRequest/update',
				geAvaliableDrivers: contextPath + 'carInfo/getAvailableDrivers',
				combo: {
					cars: contextPath + 'carInfo/comboCars',
					dscr: contextPath + 'default/getComboList?domain=dicSendCarReason',
					dd: contextPath + 'default/getComboList?domain=dicDirection'
				}
			},
	        tpl: new Ext.XTemplate(
				'<table width="100%" id="expander-table" cellpadding="0">',
				'<tr><td class="driverList"><b>审批人：</b>{disApprovePersons}',
				'</td><td colspan="2" class="driverList"><b>已审批人：</b>{approvedPersions}</td></tr>',
				'<tr><td class="driverList"><h2>出车理由：</h2>',
				'<ul><li>{reason}</li></ul>',
				'</td><td class="driverList"><h2>去向：</h2>',
				'<ul><li>{direction}</li></ul>',
				'</td><td class="driverList"><h2>备注：</h2><ul><li>{memo}</li></ul>',
				'</td></tr></table>'
			),
			record: Ext.data.Record.create([
	    		{name: 'id', type: 'int'},
	    		{name: 'car'},
	    		{name: 'car.id'},
	    		{name: 'car.carNo'},
	    		{name: 'driver'},
	    		{name: 'driver.id'},
	    		{name: 'driver.account.name'},
	    		{name: 'requester.name'},
	    		{name: 'requestDate', type : 'date', dateFormat : 'Y-m-d H:i:s'},
	    		{name: 'sendOutDate', type : 'date', dateFormat : 'Y-m-d H:i:s'},
	    		{name: 'backDate', type : 'date', dateFormat : 'Y-m-d H:i:s'},
	    		{name: 'carCfg.approvePersions'},
	    		{name: 'disApprovePersons'},
	    		{name: 'carCfg.exceptiondateFlag'},
	    		{name: 'approvedPersions', type: 'string'},
	    		{name: 'approveFlag', type: 'int'},
	    		{name: 'approveFlagRate', type: 'int'},
	    		{name: 'reason', type: 'string'},
	    		{name: 'direction', type: 'string'},
	    		{name: 'flag', type: 'int'},
	    		{name: 'memo', type: 'string'}
	    	])
		};

		this.expander = new Ext.grid.RowExpander({tpl : this.configs.tpl});
		this.approveFlagColumn = new Ext.ux.grid.ProgressColumn({
			header: "审批进度",
			dataIndex: 'approveFlagRate',
			width: 15,
			//textPst : '%',
			colored: true
		});
    	this.columns = [
			this.expander,
			{header: '车辆编号', dataIndex: 'car.carNo', width: 15},
			{header: '驾驶员', dataIndex: 'driver.account.name', width: 20},
			{header: '派车人/日期', dataIndex: 'requester.name', width: 35, renderer: function(v, c, r){
				return v + "(" + (r.data['requestDate'] ? r.data['requestDate'].dateFormat('Y-m-d H:i:s') : '') + ")";
			}},
			{header: '出发时间 | 返回时间', dataIndex: 'sendOutDate', width: 40, renderer: function(v, c, r){
				return (v ? v.dateFormat('Y-m-d H:i:s') : '') + (r.data['backDate'] ? (" | " + r.data['backDate'].dateFormat('Y-m-d H:i:s')) : ''); }
			},
			{header: '特殊日？', dataIndex: 'carCfg.exceptiondateFlag', width: 12, renderer: function(v){
				return v == 2 ? '<image src="' + contextPath + 'images/flag_red.png" align="absmiddle">' : '';
			}},
			this.approveFlagColumn,
			{header: '状态', dataIndex: 'flag', width: 15, renderer: function(v){
				var renderMsg = '';
				switch (v){
					case 0 : renderMsg = "<font color='red'>任务执行中</font>"; break;
					case 1 : renderMsg = "待命"; break;
					case 2 : renderMsg = "<font color='green'>任务结束</font>"; break;
					default : renderMsg = "<span color='red'>状态错误</span>";
				}
				return renderMsg;
			}}
        ];

		this.stores = {
			list: new Ext.data.Store({
				url : this.configs.url.list,
		        reader : new Ext.data.JsonReader({ totalProperty : 'totalCount', root : 'result' }, this.configs.record )
			})
		};
		this.combos = {};
		this.functions = {
			lineColor: function(record,rowIndex,rowParams,store){
	            var _flag = record.data['flag'];
				var _css;
				if(_flag == "0") _css = 'x-grid-record-red';
				else if(_flag == "2") _css = 'x-grid-record-green';
				else _css = 'x-grid-record-gray';
	            return _css;
	        },
			add: function(){
				var win = new sf.or.dataWindow({owner:this});
				win.setTitle('<image src="' + contextPath + 'images/edit.png" align="absmiddle"> 填写派车单');
				win.setSize(win.fp.width, win.fp.height);
				win.show();
				win.url = _configs.url.update;
				win.fp.form.reset();
				//win.gridRole.getSelectionModel().clearSelections();
			},
	        edit: function(){
				var rec = _grid.getSelectionModel().getSelected();
				if (rec){
					var win = new sf.or.dataWindow({owner:this});
					win.setTitle('<image src="' + contextPath + 'images/edit.png" align="absmiddle"> 编辑派车单');
					win.setSize(win.fp.width, win.fp.height);
					win.show();
					//win.url = 'qo/user/updateUser/'+rec.data.id;
					win.fp.form.reset();
					win.fp.form.loadRecord(rec);
					/*if (rec.data.car){
						alert(111)
						win.fp.form.findField('car').setValue(rec.data.car.id);
						win.fp.form.findField('car').setRawValue(rec.data.car.carNo);
						//win.fp.form.findField('car').setFieldValue(rec.data.car.id, rec.data.car.carNo);
					}*/
				} else {
					Ext.Msg.show({title: "操作提示", msg: "警告：至少选择一条记录进行编辑!", buttons: Ext.Msg.OK, icon : Ext.Msg.WARNING });
				}
			}
		};

		sf.or.dataWindow = Ext.extend(Ext.Window, {
			closeAction:'hide',
			layout:'fit',
			modal:true,
			initComponent:function(){
				var conf = {
					border:false,
					buttons:[
						{ text:'保存', handler:this.onSave.createDelegate(this) },
						{ text:'取消', handler:this.onCancel.createDelegate(this) }
					]
				};
				Ext.apply(this, conf);
				sf.or.dataWindow.superclass.initComponent.call(this);
				this.createForm();
				this.add(this.fp);
			},

			createForm:function(){
				var driverStore = new Ext.data.Store({
					proxy: new Ext.data.HttpProxy({url: _configs.url.geAvaliableDrivers}),
					reader: new Ext.data.JsonReader({},['id','name'])
				});
				this.carStore = new Ext.data.Store({
					baseParams: {userId: g_userId},
					proxy: new Ext.data.HttpProxy({url: _configs.url.combo.cars}),
					reader: new Ext.data.JsonReader({},['id','carNo']),
					autoLoad:true
				});
				this.dicSendCarReasonStore = new Ext.data.Store({
					autoLoad: true,
			        proxy: new Ext.data.HttpProxy({ url: _configs.url.combo.dscr }),
					reader: new Ext.data.JsonReader({}, [ {name : 'id'}, {name : 'content'}, {name : 'flag'}, {name : 'memo'} ])
				});
				this.dicDirectionStore = new Ext.data.Store({
					autoLoad: true,
			        proxy: new Ext.data.HttpProxy({ url: _configs.url.combo.dd }),
					reader: new Ext.data.JsonReader({}, [ {name : 'id'}, {name : 'content'}, {name : 'flag'}, {name : 'memo'} ])
				});
				var driverCombo = new Ext.form.ComboBox({
					//id: 'driver',
					name: 'driver.account.name',
					fieldLabel: '选择驾驶员',
					emptyText: '请选择驾驶员...',
					valueField: 'id',
					displayField: 'name',
					//hiddenName: 'driver.id',
					store: driverStore,
					//editable: true,
					readOnly: true,
					triggerAction: 'all',
					mode: 'local',
					width: 200,
					allowBlank: false
				});
				[color=red][size=large]this.carCombo = new Ext.form.ComboBox({
					//id: 'car',
					name: 'car.carNo',
					fieldLabel: '选择车辆',
					emptyText: '请选择车辆...',
					store: this.carStore,
					valueField: 'id',
					displayField: 'carNo',
					//hiddenName: 'car.id',
					//editable: true,
					readOnly: true,
					triggerAction: 'all',
					mode: 'local',
					width: 200,
					allowBlank: false,
					listeners: {
						select: function(combo, record, index){
							driverCombo.clearValue();
							driverStore.load({params:{carId: combo.value}});
						}
					}
				});[/size][/color]
				this.sendOutDate = new Ext.ux.DateTime({
					name: 'sendOutDate',
					fieldLabel:'出发时间',
					anchor:'-18',
					readOnly: true,
					timeFormat:'H:i:s',
					timeWidth: 80,
					timeConfig: { altFormats: 'H:i:s', allowBlank: false },
					dateFormat: 'Y-m-d',
					dateWidth: 80,
					dateConfig: { altFormats: 'Y-m-d|Y-n-d', allowBlank: false }
				});
				this.backDate = new Ext.ux.DateTime({
					name: 'backDate',
					fieldLabel:'返回时间',
					anchor:'-18',
					readOnly: true,
					timeFormat:'H:i:s',
					timeWidth: 80,
					timeConfig: { altFormats: 'H:i:s' },
					dateFormat: 'Y-m-d',
					dateWidth: 80,
					dateConfig: { altFormats: 'Y-m-d|Y-n-d' }
				});
				this.dicSendCarReasonCombo = new Ext.form.ComboBox({
					name: 'reason',
					fieldLabel: '出车理由',
					store: this.dicSendCarReasonStore,
					valueField: 'content',
					displayField: 'content',
					//hiddenName: 'reason',
					width: 240,
			        mode: 'local',
			        triggerAction: 'all',
			        selectOnFocus: true,
					allowBlank: false
				});
				this.dicDirectionCombo = new Ext.form.ComboBox({
					name: 'direction',
					fieldLabel: '去向',
					store: this.dicDirectionStore,
					valueField: 'content',
					displayField: 'content',
					//hiddenName: 'direction',
					width: 240,
			        mode: 'local',
			        triggerAction: 'all',
			        selectOnFocus: true,
					allowBlank: false
				});

				this.fp = new Ext.form.FormPanel({
					width:400,
					height:340,
					//fieldWidth:120,
					labelAlign:'right',
					border:false,
					items:{
						xtype:'tabpanel',
						activeTab:'0',
						deferredRender:false,
						border:false,
						height:300,
						items:[{
							title:'基本信息',
							items:{
								border:false,
								bodyStyle:'padding:10px;',
								layout:'form',
								defaultType:'textfield',
								//defaults:{width:100},
								items:[
									this.carCombo,
									driverCombo,
									this.sendOutDate,
									this.backDate,
									this.dicSendCarReasonCombo,
									this.dicDirectionCombo,
									{ xtype: 'textarea', fieldLabel:'备注', name:'memo', width:250 }
								]
							}
						}]
					}
				});
			},

			onSave:function(){
				if (this.fp.form.isValid() == false) return;
				this.fp.form.submit({
					waitTitle: '提示',
					waitMsg: demo.working,
					url: this.url,
					//params:{ roleIds:roleIds.join(',') },
					success:this.onSaveSuccess.createDelegate(this),
					failure:this.onSaveFailure.createDelegate(this)
				})
			},

			onSaveSuccess:function(){
				_grid.getStore().reload();
				this.hide();
			},

			onSaveFailure:function(form,action){
				Ext.Msg.show({title: '操作提示', msg: action.result.info, icon: Ext.Msg.ERROR, buttons: Ext.Msg.OK});
			},

			onCancel:function(){
				this.hide();
			}

		});

		this.bbar = new Ext.PagingToolbar({
			pageSize: iPageSize,
			store : this.stores.list,
			plugins : new Ext.ux.Andrie.pPageSize(),
			displayInfo : true,
			items : [ '-',
				{xtype: 'button', iconCls: 'btn_insert', text: '增加', handler: this.functions.add, tooltip: '新增派车单' },
				{xtype: 'button', iconCls: 'btn_modify', text: '编辑', handler: this.functions.edit, tooltip: '编辑派车单' }
			]
		});
		this.editorGridPanel = new Ext.grid.EditorGridPanel({
			bodyStyle: 'width:100%',
			viewConfig: {forceFit: true, getRowClass: this.functions.lineColor},
			store: this.stores.list,
			sm: new Ext.grid.RowSelectionModel(),
			columns: this.columns,
			loadMask: {msg: demo.working},
			plugins: [this.expander, this.approveFlagColumn],
			//clicksToEdit: 1,
			//autoExpandColumn : 'memo',
			//tbar: this.tbar,
			bbar: this.bbar
        })
		var _configs = this.configs;
		var _combos = this.combos;
		var _stores = this.stores;
		var _functions = this.functions;
		var _grid = this.editorGridPanel;

		this.main.add(this.editorGridPanel);
        this.main.doLayout();

        _stores.list.load({
            params: {start: 0, limit: iPageSize}
        });
	}
});