Ext中combobox在grid显示问题
来源:互联网 发布:淘宝联盟导购推广id 编辑:程序博客网 时间:2024/05/19 19:39
问题描述:我在edit grid中嵌一个combox,combox的下拉单是文字的,但是提交时用数字代码表示。但是我的grid只显示数字代码,不显示对应的文字.
首先,我的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:textname="com.label.username"/>',
dataIndex: 'userName',
width: 90,
align: 'center'
},{
header: '<s:textname="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索引
varindex =statusDS.find(Ext.getCmp('statusCmb').valueField,value);
//通过索引取得记录ds中的记录集
varrecord = statusDS.getAt(index);
//返回记录集中的value字段的值
returnrecord.data.value;//注意这个地方的value是上面displayField中的value,因为我水平低,搞了好长时间 才明白 ,呵呵
}
},{
header: '<s:textname="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.javaeye.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;
这就就对了!
//在这里return通过val(就是那个id)获取的name的值
return combostore.getAt(combostore.find('id',val)).data.name;
}}
return value.name;
}
修改的时候是用大峡的那种方法...
- Most likely the dataIndex is missing or improperly assigned inthe grid's ColumnModel definition for that particular column. If thedataIndex is omitted the editor will, by default, gather the cell'sinnerhtml4strict as the editable content.
- As an alternative, see this thread.
- to set up a ComboBox Editor in a grid so it allows other (custom) values that are not in the combobox's store:
Ext.form.ComboBox({ ... valueField: undefined, ...});
- See this thread for another approach.
- Here is a portion of a column model:
{ name: "user_account", hidden: false, hideable: true, header: "User Account", editor: { xtype: "combo", typeAhead: true, triggerAction:"all", lazyRender: true, listClass: "x-combo-list-small", store:[ [ "0" , "Staff Account" ], //the value at index 0 is //assumed to be the combo value [ "1" , "Admin Account" ], //the value at index 1 is //assumed to be the combo text [ "2" , "Super Account" ] ] }, width:150 }
- How do I get the value of the combo's selection (instead of the text) displayed after an edit is done on the combo?
- Set up the Grid to actually store "0", "1" or "2" and use a column renderer to display the textual representation.
- Add a listener to the EditorGridPanel's 'validateedit ' event, and pull the textual value out of the combo, and manually set it into the record, then return false so that EditorGridPanel does not go ahead with its change (grid does not think it was a 'true' edit).
//listening for the grid's 'validateedit' event'validateedit': function(e){ var rec = e.record; //looking into the store of the combo var store = rec.fields.items[e.column].editor.store; if(store && store instanceof Array && store[0] instanceof Array){ for(var opt = 0; opt < store.length; opt++){ var option = store[opt]; if(option[0] == e.value){ //setting the value to the 'textual' value of the selection //using rec.set(fieldName, newValue) to set it how you want rec.set(e.field, option[1]); //return false so that the EditorGridPanel thinks it was //an invalid edit and does not do the change itself return false; } } }}
- Getting the comboBox to display the displayField instead of their 'value' after the user makes a change.
- An EditorGridPanel calls getValue() on the form Field (in this case a comboBox) that it is using as the column editor at the end of the edit. If there is a hidden field, getValue() returns that field, not the displayed text.
So, the value of the Combo will be "0", "1" or "2" and that is what will be displayed in the Grid. Two options:
- Give the Combo a hiddenName as the name of the field you wish submitted.
- If you use name, it is the visible input which gets that name (which is a normal <input type="text">) and is submitted. hiddenName is used to create an <input type="hidden"> into which the valueField is stored.
- Ext中combobox在grid显示问题
- Ext中combobox在grid显示问题
- Ext中combobox在Grid里显示问题
- Ext应用--Combobox在Grid中的查询与显示
- 在修改信息窗口中,Ext.combobox的默认值显示
- 一个包含comboBox的grid,将comboBox中的value显示在输入框中
- Ext.form.ComboBox显示错误的问题
- ext combobox 下拉框显示位置问题
- 有关ext grid表头不显示问题
- ext grid 显示数据精度丢失问题
- Ext grid中处理时间显示格式
- Ext.net中如何在JS中获取前台ComboBox的显示值
- 关于Ext.form.ComboBox在Ext.grid.EditorGridPanel中的小应用
- 从action中获取的json无法显示在ext的grid中解决方法
- Ext中ComboBox读取数据、显示数据出现的一些问题
- Ext Combobox 显示valueField值 不显示displayField问题
- Ext Combobox 显示valueField值 不显示displayField问题
- 在dataGridView中显示combobox
- onInterceptTouchEvent和onTouchEvent调用时序
- 如何修改postgresql中一个表的oid
- 网络 工具
- Java事件模型与Android事件模型的比较
- hypertable安装
- Ext中combobox在grid显示问题
- PHP相册模块,支持Flash及JS模板插件安装。
- 一个pic单片机iic例子(未检验正确性)
- C++操作XML编程实例 转
- 在 Linux 上构建一个 RADIUS 服务器
- SDL入门教程--从零开开始
- pic单片机硬件iic例子(未检验)
- 12月2日 SQL语句
- LazyInitializationException的OpenSessionInView解决方案