Extjs GridPanel 中放入 Combox显示问题
http://weijun8611-126-com.iteye.com/blog/566201
在项目中使用了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');
}
下面记录一个树结构的表格处理方式
sortable: false,
text : '部位',
dataIndex : 'buweiid',
width: 150,
editor : combo,
renderer: function(value,metadata,record) {
if(combo.store.data.indexOfKey(value) != -1) {
return combo.store.data.get(value).raw.text;
}
return record.raw.buweitext;
}
Ext.define('APP.view.Trainbom.TreeGridList', {
extend : 'Ext.tree.Panel',
xtype : 'Trainbom_TreeGridList',
columnLines : true,
initComponent : function() {
var me = this;
me.plugins = [ me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing') ];
var combo = Ext.create('APP.lib.DictionaryCombo', {
name: 'buweiid',
code: 'CODE_BUWEI'
});
Ext.apply(me, {
store : 'TrainbomStore',
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
containerScroll: true
}
},
columns : [ {
xtype : 'treecolumn',
sortable: false,
text : '机车类型',
dataIndex : 'traintype',
width: 150,
editor : {
xtype: 'NormalCombo',
name: 'traintype',
url: 'SysDictionaryController.do?method=selectListTrain',
selectOnFocus : true,
allowOnlyWhitespace : false
}
},{
sortable: false,
text : '12位编码',
dataIndex : 'materialcode',
width: 150,
editor : 'textfield'
},{
sortable: false,
text : '父编码',
dataIndex : 'parentmaterialcode',
width: 150,
editor : 'textfield'
},{
sortable: false,
text : '部件数量',
dataIndex : 'fullcount',
width: 100,
editor : 'numberfield'
},{
sortable: false,
text : '安装数量',
dataIndex : 'installcount',
width: 100,
editor : 'numberfield'
},{
sortable: false,
text : '部位',
dataIndex : 'buweiid',
width: 150,
editor : combo,
renderer: function(value,metadata,record) {
if(combo.store.data.indexOfKey(value) != -1) {
return combo.store.data.get(value).raw.text;
}
return record.raw.buweitext;
}
}]
});
me.callParent(arguments);
me.relayEvents(me.getStore(), ['load'], 'store');
me.on('beforeedit', me.handleBeforeEdit, me);
},
getSelecedRecordId : function() {
var record = this.getSelectionModel().getSelection()[0];
return record ? record.getId() : '';
},
getSelecedRecord : function() {
var record = this.getSelectionModel().getSelection()[0];
return record;
},
handleBeforeEdit : function(editingPlugin, e) {
if(e.record.get('id') == 'root') {
Ext.popup.Msg('提示信息', '字典跟节点不允许编辑');
return false;
}
return true;
},
refreshView: function() {
//this.getView().refresh(); //本地刷新
var tree = this;
//tree.setLoading(true, tree.body);
//服务器端刷新
this.getStore().reload({mask:true});
}
});
