xt中combobox在grid显示有关问题

xt中combobox在grid显示问题
xt中combobox在grid显示问题

问题描述:我在edit grid中嵌一个combox，combox的下拉单是文字的，但是提交时用数字代码表示。但是我的grid只显示数字代码，不显示对应的文字.
嘿嘿，这可问题对于我这样的初学者讲根本就不懂，呵呵，google了一下，找到解决办法，嘿嘿，不过我只是试验了一种成功，其它的要么就不成功，要么就看不懂，呵呵，我现在先把我做成功的代码贴出来（从网上找到，大家不要介意）:
第一种方案(我做成功了，嘿嘿)
来源:http://blog.sina.com.cn/s/blog_4992583a0100bvwr.html
首先,我的combobox是使用本地的字典表,即在namespace里定义的数据.数据结构为:

Ext.data.status = [
['1', 'Yes'],
['0', 'No']
]


我要实现的是在grid中显示字典表里对应的value,而不是code.需要有下面几个步骤:


1.定义ds,即引入字典表中的数据

var statusDS = new Ext.data.SimpleStore({ //通过字典表获得用户使用状态数据源
fields: ['code', 'value'],
data:Ext.data.status //这里对应我在字典表里定义的类型名称
});


2.在grid相应列中加入渲染,即修改ColumnModel某列属性,红色字体部分是核心代码

{
header: '<s:text name="com.label.username"/>',
dataIndex: 'userName',
width: 90,
align: 'center'
},{
header: '<s:text name="com.label.authority"/>',
dataIndex: 'userAuthority',
width: 60,
align: 'center',
editor: new Ext.form.ComboBox({
id:'statusCmb', //为combobox定义一个ID,必须的
hiddenName:'',
store: statusDS, //引入ds
displayField:'value', //值
valueField:'code', //代码
editable:false,
mode: 'local',
triggerAction: 'all'
}),
renderer: function(value, cellmeta, record) {

//通过匹配value取得ds索引
var index = statusDS.find(Ext.getCmp('statusCmb').valueField,value);

//通过索引取得记录ds中的记录集
var record = statusDS.getAt(index);

//返回记录集中的value字段的值
return record.data.value;//注意这个地方的value是上面displayField中的value,因为我水平低，搞了好长时间 才明白 ，呵呵
}
},{
header: '<s:text name="com.label.email"/>',
dataIndex: 'email',
width: 150,
align: 'center'
}

以上的代码只是根据我个人情况实现的,大家应用到自己程序时可能会有变动,还得随机应变啊

这是人家的后来我需要在grid中显示出上面的效果自写改了一下，把代码发上来：

//物料数据源

   var materialDs = new Ext.data.JsonStore({

   fields: ['matId','matName'],

   url: '../combobox.do?action=getBaseMaterialComboBox',

   autoLoad: true

   })

//初始化物料名称Combobox

   var materialCombo = new Ext.form.ComboBox({

   name: 'matName',

   fieldLabel: '物料名称',

   store:materialDs,

   valueField: 'matId',

   displayField: 'matName',

   typeAhead: true,

   mode: 'local',//这个意思 我一直不明白，呵呵。

   triggerAction: 'all',

   emptyText: 'Select a inputNum name..',

   selectOnFocus: true,

   editable: false,

   allowBlank: false

   })

{header: '物料名称',dataIndex: 'matId',width: 170,sortable: true,renderer:function(value,cellmeta,record){

   var index =materialDs.find(materialCombo.valueField,value);

   var record = materialDs.getAt(index);

   return record.data.matName;

   }},

这种方式我不知道好不好，但我没办法，只能这样用，因为我只能想到这种方法。有更好的方法大家可以告诉我，谢谢。

第二种方案（这种方案比较简单，学习一下，呵呵）:

来源:http://www.iteye.com/topic/157067

{header:'单位',dataIndex:'Unit',sortable:true,width: 80,renderer:function(value){return value==1?'西药':'重要';},
editor: new Ext.form.ComboBox({
displayField:'kind',emptyText:'请选择',
valueField:'abbr',
selectOnFocus:true,
triggerAction: 'all',
mode: 'local',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'kind'],
data:[[1,'西药'],[2,'中药']]
}),
lazyRender:true
})},

第三种方式(是我从一个论坛上找的http://www.vifir.com,一个留言,我没试验，不知道能否成功，呵呵):

renderer:function(value){ return t_value[value];//值对应的显示值数组},
listeners:{select:function(combo, record,index){ //回显值数组
t_value[record.data.t_valueId] = record.data.t_valueName; } },

第四种方式 （也是我从上面的论坛中找的，这个很乱,我把上面一个大侠的留言给贴上吧，呵呵）:

1、呵呵，这个问题其实很好办的哈。因为你要手动设置combox的值，给你看一个例子：
writePanel.fp.form.load({
waitMsg:"$!{lang.get('Loading')}",
url:this.baseUrl+"?cmd=read&id="+id,
success:function(form){
if(record.data.myCategory){
writePanel.fp.form.findField("myCategory").setValue(record.data.myCategory.id);
writePanel.fp.form.findField("myCategory").el.dom.value=record.data.myCategory.name;//text
var oEditor = FCKeditorAPI.GetInstance('content') ;
if(oEditor)oEditor.SetHTML(form.findField("content").getValue());
}
}
});
上面的程序是从后台加载表单数据到FormPanel中，由于combox的处理比较特殊，需要通过下面两句来给他手动赋值：
writePanel.fp.form.findField("myCategory").setValue(record.data.myCategory.id);
writePanel.fp.form.findField("myCategory").el.dom.value=record.data.myCategory.name;//text

2、我的意思是，你在修改的时候，得手动设置一下combox的值。

对于你的情况，由于返回的record.data.name = '2' ，那么你就要先在[[1,a],[2,b][3,c]]这个数组中查询，查询2这个值对应的显示文本，也就是查到B。然后你再调用下面的语句:
cmb.setValue(2);
cmb.el.dom.value=B;
这就就对了!
3、{header:'用户名',dataIndex:'name',renderer:function(val){
//在这里return通过val(就是那个id)获取的name的值
return combostore.getAt(combostore.find('id',val)).data.name;
}}
4、
目前这个问题已经解决了
girdpanel.cm加上了一个
renderer: function(value, p, record) {
return value.name;
}