ext combobox修改问题

悬赏：5 发布时间：2008-07-24 提问人：chenxiaoji (初级程序员)

问题：用一个下拉框combobox同时保存两个字段，比如displayField：‘deptname’，valueField：‘deptid’，当进行添加操作的时候，很容易。但是修改的时候，combobox将valueField值显示在displayField里了，如果从combobox重新选择数据，保存无误，但是若不选择数据，后台就得不到数据！！！有些朋友说用hiddenName显示，这个道理一样。虽然hiddenName显示了displayField对应的数据，但是valueField还是空的！！！也有朋友说用setvalue，也不行！还有更麻烦的问题，比如displayField显示的内容已经被格式化了，修改的时候即使用hiddenName了，显示的数据也是不正确的！！！就没有像.net里面的，根据valueField值自动匹配displayField值的吗?在级联combobox中，这个问题更难解决！！！希望能解决的朋友帮一把！谢谢大家！！！

该问题已经关闭: 超过15天由系统自动关闭，悬赏平分给所有参与回答的会员

回答

createColumnModel : function() {
var t = this;

var c = this._c = Morik.Office.CommonCombox.createCompanyCombox();
var d = this._d = Morik.Office.CommonCombox.createDepartmentCombox({
// mode : 'local'
});
var u = this._u = Morik.Office.CommonCombox.createUserCombox();

c.self.on({
'select' : function(c, r, index) {
c.value = r.data["comName"];
t._c.tempValue = r.data["id"];
}
});
d.self.on({
'select' : function(c, r, index) {
c.value = r.data["depName"];
t._d.tempValue = r.data["id"];
}
});
u.self.on({
'select' : function(c, r, index) {
c.value = r.data["trueName"];
t._u.tempValue = r.data["id"];
}
});
var columnModel = new Ext.grid.ColumnModel([{
header : '部门编号',
width : 80,
align : 'center',
sortable : true,
dataIndex : 'depNum',
editor : new Ext.form.TextField({
allowBlank : false,
validateOnBlur : true,
regex : /^\d{4}$/,
regexText : '必须为四位数字'
})
}, {
header : '部门名称',
align : 'center',
width : 120,
sortable : true,
dataIndex : 'depName',
editor : new Ext.form.TextField({
width : 120,
allowBlank : false,
regex : /^[\u4e00-\u9fa5]{4,}$/,
regexText : '四位以上汉字'
})
}, {
header : '部门传真',
width : 80,
align : 'center',
dataIndex : 'depFax',
editor : new Ext.form.TextField({
width : 80,
allowBlank : false
})
}, {
header : '部门主管',
width : 80,
align : 'center',
dataIndex : 'superChiefName',
editor : u.self
}, {
header : '所属公司',
width : 120,
align : 'center',
dataIndex : 'companyName',
editor : c.self
}, {
header : '上级部门',
width : 120,
align : 'center',
dataIndex : 'supperDepName',
editor : d.self

}, {
header : '部门地址',
width : 190,
align : 'center',
dataIndex : 'depAddress'
}]);
return columnModel;
},
createGrid : function() {
var t = this, ds = this.ds;
var grid = this.grid = new Ext.grid.EditorGridPanel({
store : ds,
cm : t.createColumnModel(),
'sm' : new Ext.grid.RowSelectionModel(),
region : "center",
style : 'padding:3px 0px 0px 0px',
height : 460,
title : '部门列表',
clicksToEdit : 3,
loadMask : {
msg : "正在进行你的操作，请稍等。。。"
},
bbar : t.createSearchBar()
});
grid.on({
'beforeedit' : function(e) {
if (e.field == 'companyName') {
t._c.ds.load();
} else if (e.field == 'supperDepName') {
var m = [e.record.data['companyId'], ''];
var index = ds.modified.indexOf(e.record);
if (index != -1)
m = [ds.modified[index].data['companyId'], ''];
t._d.self.allQuery = m;
t._d.self.queryParam = 'arg';
t._d.self.setValue("");
} else if (e.field == 'superChiefName') {
var m = [e.record.data['id']];
t._u.self.allQuery = m;
t._u.self.queryParam = 'arg';
t._u.self.setValue("");

}

},
'afteredit' : function(e) {
// var m = e.grid.getSelectionModel().getSelectedCell();
if (e.field == 'companyName') {
e.record.data['companyId'] = t._c.tempValue;
delete t._c.tempValue;
// t.getCompanyDs().ds.tempcomRowValue = e.row;
e.record.data["supperDepName"] = '';
e.record.data["supperDepId"] = '';
var index = ds.modified.indexOf(e.record);
if (index == -1) {
ds.modified.push(e.record);
} else {
ds.modified[index] = e.record;
}
e.grid.getView().refresh();
e.grid.startEditing(e.row, e.column + 1);
} else if (e.field == 'supperDepName') {
e.record.data['supperDepId'] = t._d.tempValue;
delete t._d.tempValue;
var index = ds.modified.indexOf(e.record);
if (index == -1) {
ds.modified.push(e.record);
} else {
ds.modified[index] = e.record;
}
}
if (ds.modified && ds.modified.length > 0)
t.buttonSave.enable();
t.searchbar.updateInfo();
},
'cellclick' : function(grid, r, c, e) {
if (t.buttonDelete.disabled
&& grid.getSelectionModel().getSelections() != null)
t.buttonDelete.enable();

},
'keydown' : function(e) {
t.buttonDelete.disable();
var k = e.getKey();
if (k == e.DELETE) {
t.buttonDeleteHandler();
}
t.buttonDelete.enable();
}
});
ds.load(t.loadParams(false));
return grid;
}

解决你的第二个问题。

jljlpch (初级程序员) 2008-07-24

说明一下：
var c = this._c = Morik.Office.CommonCombox.createCompanyCombox();
var d = this._d = Morik.Office.CommonCombox.createDepartmentCombox({
// mode : 'local'
});
var u = this._u = Morik.Office.CommonCombox.createUserCombox();
//你完全可以为这个动态生成一个变量保存值，
//比如：t._c.tempValue = r.data/["id"];

c.self.on({
'select' : function(c, r, index) {
c.value = r.data["comName"];
t._c.tempValue = r.data["id"];
}
});
d.self.on({
'select' : function(c, r, index) {
c.value = r.data["depName"];
t._d.tempValue = r.data["id"];
}
});

第二个问题是关联的，我也很喜欢Asp.net那种方式，于是自己就在Ext仿了。

grid.on({
'beforeedit' : function(e) {
if (e.field == 'companyName') {
t._c.ds.load();
} else if (e.field == 'supperDepName') {

//装佩部门combox的Query参数，之后点combox的dropdownlist,就会触发该query param 去查。我以前也实现了一种方式，还是觉得这个好一点。不过这里采用的是DWRProxy，你可能对照去分析和修改一下。应该可以用。
var m = [e.record.data['companyId'], ''];
var index = ds.modified.indexOf(e.record);
if (index != -1)
m = [ds.modified[index].data['companyId'], ''];
t._d.self.allQuery = m;
t._d.self.queryParam = 'arg';
t._d.self.setValue("");
} else if (e.field == 'superChiefName') {
var m = [e.record.data['id']];
t._u.self.allQuery = m;
t._u.self.queryParam = 'arg';
t._u.self.setValue("");

}

},

下面是company,department combox ,希望能对你有点用：

createCompanyCombox : function(config) {
var recordType = $createRT(RT_Company);
var ds = $createDs({
serverMethod : CompanyService.getCompanyList,
recordType : recordType,
defaultParams : {
arg : ['', ''],
limit : 'all'
}
});
var companyCombo = new Ext.form.ComboBox(Ext.applyIf(config || {},
{
tpl : '<tpl for="."><div ext:qtip="{comName}" class="x-combo-list-item">{comName}</div></tpl>',
store : ds,
displayField : 'comName',
valueField : 'id',
typeAhead : true,
triggerAction : 'all',
emptyText : '请选择...',
// hiddenName : 'comName',
selectOnFocus : true,
loadingText : 'loading....',
lazyRender : true
}));

return {
self : companyCombo,
ds : ds,
rt : recordType
};

},
createDepartmentCombox : function(config) {
var recordType = $createRT([{
name : "id",
type : "int"
}, {
name : "depNum",
type : "string"
}, {
name : "depName",
type : "string"
}]);
/*
* var ds = $createDs({ serverMethod :
* DepartmentService.getSuperDepartmentList, recordType :
* recordType, defaultParams : { arg : ['', ''], limit : 'all' } });
*/

var ds = new Ext.data.Store({
proxy : new Ext.data.DWRProxy(
DepartmentService.getSuperDepartmentList, false),
reader : new Ext.data.ListRangeReader({
id : 'id',
totalProperty : 'totalSize'
}, recordType),
remoteSort : false,
baseParams : {
arg : ['', ''],
limit : 'all'
}
});
var depCombo = new Ext.form.ComboBox(Ext.applyIf(config || {}, {
tpl : '<tpl for="."><div ext:qtip="{depName}" class="x-combo-list-item">{depName}</div></tpl>',
store : ds,
displayField : 'depName',
valueField : 'id',
typeAhead : true,
triggerAction : 'all',
emptyText : '请选择...',
selectOnFocus : true,
loadingText : 'loading....',
lazyRender : true
}));

return {
self : depCombo,
ds : ds,
rt : recordType
};
},

jljlpch (初级程序员) 2008-07-24

突然你不要Grid中，
下面是Form中,个人实现的searchForm的一个完整的的

createQueryForm : function() {
var t = this;

var c = Morik.Office.CommonCombox.createLabelCompanyCombo({
emptyText : '所有公司'
});
var bItem = new c.rt({
id : '',
comName : '所有公司',
comNum : ''
});

var d = Morik.Office.CommonCombox.createLabelDepartmentCombo({
emptyText : '所有部门'
});
var bItem1 = new c.rt({
id : '',
depName : '所有部门',
depNum : ''
});
c.self.on({
'select' : function(c, r, i) {
c.value = r.data["comName"];
if (c.value == "所有公司")
c.value = "";

// t.ds.load(t.loadParams());

m = [r.data["id"], ''];
d.self.allQuery = m;
d.self.queryParam = 'arg';
d.self.setValue("");
},
'beforequery' : function(t1) {
if (c.ds.data.indexOf(bItem) == -1)
c.ds.insert(0, [bItem]);
}

});

d.self.on({
'select' : function(c, r, i) {
c.value = r.data["comName"];
if (c.value == "所有部门")
c.value = "";
t.ds.load(t.loadParams());
},
'beforequery' : function(t1) {
if (c.ds.data.indexOf(bItem1) == -1)
c.ds.insert(0, [bItem1]);
}

});
var form = new Ext.FormPanel({
style : 'padding:2px 0px 0px 0px',
frame : true,
width : 800,
height : 40,
region : 'north',
items : [{
layout : 'column',
items : [{
columnWidth : .2,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
width : 120,
items : [{
fieldLabel : '用户编号',
xtype : 'textfield',
name : 'User_ID',
anchor : '100%'
}]
}, {
columnWidth : .2,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
width : 120,
items : [{
fieldLabel : '用户姓名',
xtype : 'textfield',
name : 'UserName',
anchor : '100%'
}]
}, {
columnWidth : .2,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
width : 120,
items : [c.self]
}, {
columnWidth : .2,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
width : 120,
items : [d.self]
}, {
columnWidth : .2,
items : [new Ext.Button({
text : '查询',
handler : function() {
t.ds.load(t.loadParams());
}
})]
}]
}]
});
return form;

},

jljlpch (初级程序员) 2008-07-24

首先，你的想法完全可以实现！
1、可以实现服务器发送编码，客户端显示编码对应的名称：例如服务器发送0001 客户端显示的是联想电脑
2、可以实现setValue("0001"),下拉框显示"联想电脑"

不需要什么转换的代码，只需要设置好下拉框和下拉框的数据源就可以了，如下代码片段应该对你有用

{
 anchor:'100%',
 fieldLabel:'类型',
 name:'KindID',
 hiddenName:'KindID',
 allowBlank:false,
 xtype:'combo',
 store:storeCodeKindID,
 lastQuery:'',
 editable:false,
 displayField:'Name',
 valueField:'Value',
 typeAhead:true,
 mode:'local',
 triggerAction:'all',
 selectOnFocus:true
}

Ext.Ajax.request({
 url:'Code/GetCode.aspx',
 method:'POST',
 disableCaching:true,
 params:{
  CCL:'测试'
 },
 callback:function(options,success,response){
  if(success)
  {
    if(response.responseText=="")
  {
    document.body.innerText='无权操作！';
    return false;
  }

  try{
   CodeData=Ext.util.JSON.decode(response.responseText);
  }catch(e){
   document.body.innerText='无权操作！';
   return false;
  }

  storeCodeKindID=newExt.data.SimpleStore({
   fields:['Value','Name'],
   data:CodeData
  });
 }
});

oldmht (初级程序员) 2008-07-25

上面用Ajax获取data是为了同时获取所有代码，然后分配个不同的combox，当然这需要添加一些分类的手段

oldmht (初级程序员) 2008-07-25

主要是model：remote时的问题

combo中的字典数据store是combo加载后，你第一次点击时才从服务器端读取的。
就是说combo被render时，他根本不知道他的value对应的显示项是什么。
解决方法
1、将其store提出来，写在combo外面去，手动的load下。
然后将combo设为model:local即可

kimmking (中级程序员) 2008-08-04

级联的问题：
1、在第一个combo的change事件加上更新第二个combo的代码
2、在第2个combo的render事件里加上根据第一个combo的值初始化store的代码

kimmking (中级程序员) 2008-08-04

待解决问题数: 331
已解决问题数: 1462
已关闭问题数: 3419

答题高手

lggege 架构师 ( 100 - 1291 )
ham 架构师 ( 100 - 1248 )
qichunren 资深程序员 ( 70 - 950 )
小疯子资深程序员 ( 69 - 852 )
congjl2002 资深程序员 ( 61 - 911 )
aidiyuxin 资深程序员 ( 48 - 684 )
zhai puhong 资深程序员 ( 43 - 680 )
llade 资深程序员 ( 42 - 746 )
wangxin0072000 高级程序员 ( 32 - 451 )
hjgundam 高级程序员 ( 30 - 442 )