Extjs中Combobox在修改的時候回寫不成功

我自己碰到的這個問題,就是我在修改一條數據的時候,其他數據回顯都沒有問題,只有這個下拉列表中的數據,頁面上顯示的是數據庫中對應的ID而不是想看到的名字。

一開始我把下拉框要加載的store寫在方法裏面了,就不顯示名稱,後來放到方法外面就可以了。

我的功能是通過在當前記錄頁面彈出一個小窗口來顯示的。

修改按鈕代碼:

	/** 修改按鈕 */
	var btn_update = new Ext.Button({
		text : '修改',
		iconCls : 'update',
		handler : function() {
			var record = grid.getSelectionModel().getSelected();   
			var num = grid.selModel.getSelections().length; //勾選的個數  
			if(!record){  
			     Ext.Msg.alert("修改操作", "請選擇要修改的項");                
			}else if(num > 1 || num == 0){  
			     Ext.Msg.alert("修改操作", "你選擇修改的記錄應該爲一條");    
			}else{
					popWin("2",record.data.id);
					var fm = Ext.getCmp('addForm');
					fm.getForm().loadRecord(record); //再加載數據  
					readBackToUpdatePage("2");
			}
		}
	});

調用的popWin()方法:

	/** 彈出窗口功能 */
	var win = null; 
	var classStore = new Ext.data.JsonStore({
		url: "./jxy/attendsystem/queryClassComboAction", 
		autoLoad: true,
		method  : 'post', 
		fields: ['id','clasName'],
		root: 'data',
		remoteSort: true,  
        		listeners:{  
            		load : function(store, records, options ){      
                			var data = { "id": "", "clasName": "休息"};      
                			var rs = [new Ext.data.Record(data)];      
                			store.insert(0,rs);  
           		}  
        		}  
	});
	var popWin = function(operStatus, id) {
		win = new Ext.Window({
			width : 550,
			height: 500,
			resizable : false,
			modal : true,
			closeAction : 'close',		
			items : [new Ext.form.FormPanel({
				labelAlign: 'right',
				labelWidth: 90,
				id: 'addForm',
				width : 550,
				height: 475,
				autoScroll: true,
				frame: true,
				items: [{
					layout: 'column',
					border: false,
					items: [{
						layout: 'form',
						xtype: 'panel',
						border: false,
						items: [{
							xtype: 'hidden',
							id: 'id'
						}]
					}, {
						layout: 'form',
						xtype: 'panel',
						border: false,
						items: [{
							xtype: 'hidden',
							id: 'lawDayContent'
						}]
					}]
				}, {
					xtype : 'panel',
					style : 'margin-top:10;',
					layout : 'column',
					items : [{
						layout : 'form',
						width : 240,
						items : [{
							xtype : 'textfield',
							width : 120,
							fieldLabel : '排班規則名稱',
							id : 'lawName',
							name : 'lawName',
							allowBlank : false,		//不可以爲空
							maxLength : 50
						}]
					}]
				}, {
					xtype : 'panel',
					layout : 'column',
					autoWidth : true,
					items : [{
						layout : 'form',
						width : 240,
						items : [{
							store : new Ext.data.SimpleStore({
								fields : ["value", "text"],
								data : [[1, '星期方式'], [2, '輪班方式']]
							}),
							xtype : 'combo',
							fieldLabel : '輪<span>  </span>班<span>  </span>方<span>  </span>式',
							width : 120,
							displayField: 'text',
							valueField: 'value',
							typeAhead : true,
							triggerAction : 'all',
							selectOnFocus : true,
							allowBlank : false,
							emptyText : '--選擇--',
							id : 'lawType',
							hiddenName : 'value',
							mode : 'local',
							editable : false,
							listeners : {
								select : function() {
																					}
							}
						}]
					}, {
						width : 200,
						layout : 'form',
						xtype : 'panel',
						items : [{
								xtype : 'numberfield',
								fieldLabel : '輪班天數',
								width : 90,
								decimalPrecision: '0',
								minValue: 1,
								maxValue: 7,
								allowBlank : false,
								maskRe :/\d/,
								id : 'lawDayNumber'
							}]
					}, {
						width : 40,
						layout : 'form',
						xtype : 'button',
						id : 'ruleCheck',
						text : '設定',
						handler : function() {
						}
					}]
				}, {
					xtype: 'panel',
					layout: 'column',
					width: 500,
					items: [{
						layout : 'form',
						height: 350,
						xtype : 'panel',
						border: true,
						style: 'margin-left:10; border-style: dotted;border-width: thin;border-color: blue;',
						title : '規律排班明細',
						collapsible: true,
						items : [{
							xtype: 'panel',
							layout: 'column',
							width : 380,
							height: 26,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							id : 'lawDayDetail',
							items: [{
								layout: 'form',
								width: '40%',
								xtype: 'label',
								border: true,
								style: 'font-size: 15; font-family: "黑體"; margin-left: 65;',
								text: '第幾天'
							}, {
								layout: 'form',
								xtype: 'label',
								border: true,
								style: 'font-size: 15; font-family: "黑體"; ',
								text: '班次'
							}]
						},{
							layout: 'column',
							xtype: 'panel',
							width : 380,
							id: 'day1',
							border: true,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							items: [{
								layout: 'form',
								width: '40%',
								id: 'dayNum1',
								xtype: 'label',
								style: 'font-size: 13; font-family: "黑體"; margin-left: 65;',
								text: '第一天'
							}, {
								layout: 'form',
								store: classStore,
								xtype: 'combo',
								width: 132,
								id: 'clas1',
								displayField: 'clasName',
								valueField: 'id',
								hiddenName: 'clasName1',
								typeAhead: true,
								triggerAction: 'all',
								forceSelection: true,
								selectOnFocus: true,
								mode: 'remote',
								editable: false
							}]
						},{
							layout: 'column',
							xtype: 'panel',
							width : 380,
							id: 'day2',
							border: true,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							items: [{
								layout: 'form',
								width: '40%',
								id: 'dayNum2',
								xtype: 'label',
								style: 'font-size: 13; font-family: "黑體"; margin-left: 65;',
								text: '第二天'
							}, {
								layout: 'form',
								store: classStore,
								xtype: 'combo',
								width: 132,
								id: 'clas2',
								displayField: 'clasName',
								valueField: 'id',
								hiddenName: 'clasName1',
								typeAhead: true,
								triggerAction: 'all',
								forceSelection: true,
								selectOnFocus: true,
								mode: 'remote',
								editable: false
							}]
						},{
							layout: 'column',
							xtype: 'panel',
							width : 380,
							id: 'day3',
							border: true,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							items: [{
								layout: 'form',
								width: '40%',
								xtype: 'label',
								id: 'dayNum3',
								style: 'font-size: 13; font-family: "黑體"; margin-left: 65;',
								text: '第三天'
							}, {
								layout: 'form',
								store: classStore,
								xtype: 'combo',
								width: 132,
								id: 'clas3',
								displayField: 'clasName',
								valueField: 'id',
								hiddenName: 'clasName1',
								typeAhead: true,
								triggerAction: 'all',
								forceSelection: true,
								selectOnFocus: true,
								mode: 'remote',
								editable: false
							}]
						},{
							layout: 'column',
							xtype: 'panel',
							width : 380,
							id: 'day4',
							border: true,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							items: [{
								layout: 'form',
								width: '40%',
								id: 'dayNum4',
								xtype: 'label',
								style: 'font-size: 13; font-family: "黑體"; margin-left: 65;',
								text: '第四天'
							}, {
								layout: 'form',
								store: classStore,
								xtype: 'combo',
								width: 132,
								id: 'clas4',
								displayField: 'clasName',
								valueField: 'id',
								hiddenName: 'clasName1',
								typeAhead: true,
								triggerAction: 'all',
								forceSelection: true,
								selectOnFocus: true,
								mode: 'remote',
								editable: false
							}]
						},{
							layout: 'column',
							xtype: 'panel',
							width : 380,
							id: 'day5',
							border: true,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							items: [{
								layout: 'form',
								width: '40%',
								id: 'dayNum5',
								xtype: 'label',
								style: 'font-size: 13; font-family: "黑體"; margin-left: 65;',
								text: '第五天'
							}, {
								layout: 'form',
								store: classStore,
								xtype: 'combo',
								width: 132,
								id: 'clas5',
								displayField: 'clasName',
								valueField: 'id',
								hiddenName: 'clasName1',
								typeAhead: true,
								triggerAction: 'all',
								forceSelection: true,
								selectOnFocus: true,
								mode: 'remote',
								editable: false
							}]
						},{
							layout: 'column',
							xtype: 'panel',
							width : 380,
							id: 'day6',
							border: true,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							items: [{
								layout: 'form',
								width: '40%',
								id: 'dayNum6',
								xtype: 'label',
								style: 'font-size: 13; font-family: "黑體"; margin-left: 65;',
								text: '第六天'
							}, {
								layout: 'form',
								store: classStore,
								xtype: 'combo',
								width: 132,
								id: 'clas6',
								displayField: 'clasName',
								valueField: 'id',
								hiddenName: 'clasName1',
								typeAhead: true,
								triggerAction: 'all',
								forceSelection: true,
								selectOnFocus: true,
								mode: 'remote',
								editable: false
							}]
						},{
							layout: 'column',
							xtype: 'panel',
							width : 380,
							id: 'day7',
							border: true,
							style: 'border-style: solid; border-width: thin; border-color:lightblue;',
							items: [{
								layout: 'form',
								width: '40%',
								id: 'dayNum7',
								xtype: 'label',
								style: 'font-size: 13; font-family: "黑體"; margin-left: 65;',
								text: '第七天'
							}, {
								layout: 'form',
								store: classStore, 
								xtype: 'combo',
								width: 132,
								height: 23,
								id: 'clas7',
								displayField: 'clasName',
								valueField: 'id',
								hiddenName: 'clasName1',
								typeAhead: true,
								triggerAction: 'all',
								forceSelection: true,
								selectOnFocus: true,
								mode: 'remote',
								editable: false
							}]
						}]
					}]
				}],
				buttonAlign : 'right',
				minButtonWidth : 60,
				buttons : [{
					text: '保存',
		            		id: 'addButton',
		            		width: 60,
		            		iconCls: 'add',
		            		xtype: 'button',
					handler: function() {/** 處理方法 */		            }
				}, {
					text : '重置',
					iconCls:'reset',
					id: 'reset',
					handler : function() {
						if(operStatus==1){
							this.ownerCt.ownerCt.form.reset();
						}else{
							var record = grid.getSelectionModel().getSelected();
							this.ownerCt.ownerCt.getForm().loadRecord(record);
						}
					}
				}, {
					text : '取消',
					iconCls:'return',
					id: 'cancel',
					style:'margin-right:25px;',
					handler : function() {
						this.ownerCt.ownerCt.ownerCt.close();
					}
				},{
					text : '關閉',
					iconCls:'return',
					id: 'close',
					hidden: true,
					style:'margin-right:25px;',
					handler : function() {
						this.ownerCt.ownerCt.ownerCt.close();
					}
				}]
			})]
		}).show();				
	}


下拉框中需要加載數據源classStore,但是這個store需要在popWin()外面去加載,如果寫到方法裏面去就不會正確回顯,只顯示ID不顯示名稱。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章