在项目中使用了extjs的editorgridpanel,但是其中的combobox在选择了相应的选项后,grid中显示的是值域(valueField)的值,而非意愿中的显示域(displayField)的值,经过一些搜索和尝试后找到了一个比较好的解决方法——在定义带combobox的列时配置其renderer的属性。
var assistItemStore = new Ext.data.JsonStore({
url:'assist.do',
baseParams:{
m : 'listAllLike',
shopid: shopid ,
subid: subid
},
root:'items',
fields:[{
name:'aux_name',
mapping:'assistName'
},{
name:'aux_id',
mapping:'assistid'
}]
});
{
header :'项目名称',
width :100,
dataIndex :'aux_id',
editor : new Ext.form.ComboBox({
autoLoad:true,
triggerAction : 'all',
selectOnFocus : true,
allowBlank : true,
editable: true,
displayField:'aux_name',
valueField:'aux_id',
minChars:1,
queryParam:'subname',
typeAhead: true,
store: assistItemStore
}),
renderer: function(value,metadata,record){
var index = assistItemStore.find('aux_id',value);
if(index!=-1){
return assistItemStore.getAt(index).data.aux_name;
}
return value;
}
这样写之后,选择之后grid中显示了displayField的值,但最初从数据库提取的值仍然显示valueField的值,原因是store的数据是远程取得的,在grid最初的render中还无法从store中查到相对应的displayField的值,于是打算用ajax异步取得displayField的值,但是异步的线程不造成阻塞,无法保证返回值之前能取得相应的数据.后来想出另一个方法,为grid增加一个隐藏列,存放对应的值,在最初提取数据时能够从中获取要显示的值.
{
header:'',
width:10,
dataIndex:'aux_name',
hidden:true
}, {
header :'项目名称',
width :100,
dataIndex :'aux_id',
editor : new Ext.form.ComboBox({
autoLoad:true,
triggerAction : 'all',
selectOnFocus : true,
allowBlank : true,
editable: true,
displayField:'aux_name',
valueField:'aux_id',
minChars:1,
queryParam:'subname',
typeAhead: true,
store: assistItemStore
}),
renderer: function(value,metadata,record){
var index = assistItemStore.find('aux_id',value);
if(index!=-1){
return assistItemStore.getAt(index).data.aux_name;
}
return record.get('aux_name');
}
总感觉这个编辑框太小了,用着很不舒服,希望改进.
分享到:
相关推荐
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显
extjs 自动补全,模拟下拉列表combobox
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;
extjs的combobox功能很强大,通过它可以模糊查询,只要添加几个属性即可,网上找的代码有的不符合我的要求。 所以自己改了一些代码。
NULL 博文链接:https://huiqinbo.iteye.com/blog/2216788
在PropertyGrid中使用Combobox来选择值时,得到的应该是displayField的值,但是在确认选择的时候却显示了valueField的值
Extjs grid 中文排序问题修正,其实很简单,请自己看源代码
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
ExtJS锁定列头源码 ExtJS锁定列头源码
绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!
主要介绍了ExtJS4如何给Combobox设置列表中的默认值,需要的朋友可以参考下
代码看起来简洁又漂亮是如何做到的,这篇文章主要为大家详细介绍了Extjs如何让combobox写起来更简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046190