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});
    }
});