您的位置:首页 > Web前端 > JavaScript

Extjs中Combobox在修改的时候回写不成功

2013-06-03 18:03 239 查看
我自己碰到的这个问题,就是我在修改一条数据的时候,其他数据回显都没有问题,只有这个下拉列表中的数据,页面上显示的是数据库中对应的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不显示名称。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐