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:'',  
                        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',
				 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',
                 150,
                editor : {
                    xtype: 'NormalCombo',
                    name: 'traintype',
                    url: 'SysDictionaryController.do?method=selectListTrain',
                    selectOnFocus : true,
                    allowOnlyWhitespace : false
                }
            },{
                sortable: false,
                text : '12位编码',
                dataIndex : 'materialcode',
                 150,
                editor : 'textfield'
            },{
                sortable: false,
                text : '父编码',
                dataIndex : 'parentmaterialcode',
                 150,
                editor : 'textfield'
            },{
                sortable: false,
                text : '部件数量',
                dataIndex : 'fullcount',
                 100,
                editor : 'numberfield'
            },{
                sortable: false,
                text : '安装数量',
                dataIndex : 'installcount',
                 100,
                editor : 'numberfield'
            },{
                sortable: false,
                text : '部位',
                dataIndex : 'buweiid',
                 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}); 
    }
});