extjs4在rowediting中使用combobox，combobox只显示value，不显示displayvalue的解决方案

如题，直接上代码，

1定义一个combo，按照下面的代码重写extjs4中combo的setvalue方法

var RoleCombo = Ext.create('Ext.form.field.ComboBox', {

            name : 'roleNames',

            typeAhead : true,

            editable : false,

            triggerAction : 'all',

            lazyRender : true,

            width : 300,

            store : me.RoleStore,

            valueField : 'id',

            displayField : 'showname',

            multiSelect : true,

            queryMode : 'local',

            selectOnTab : true,

            allowBlank : false,

            setValue : function(value, doSelect) {

                var canRealValue = (doSelect == undefined);

                var me = this, valueNotFoundText = me.valueNotFoundText, inputEl = me.inputEl, i, len, record, dataObj, matchedRecords = [], displayTplData = [], processedValue = [];

 

                if(me.store.loading) {

 

                    me.value = value;

                    me.setHiddenValue(me.value);

                    return me;

                }

                value = Ext.Array.from(value);

 

                for( i = 0, len = value.length; i < len; i++) {

                    record = value[i];

                    if(!record || !record.isModel) {

                        record = me.findRecordByValue(record);

                    }

 

                    if(record) {

                        matchedRecords.push(record);

                        displayTplData.push(record.data);

                        processedValue.push(record.get(me.valueField));

                    } else {

 

                        if(!me.forceSelection) {

                            processedValue.push(value[i]);

                            dataObj = {};

                            dataObj[me.displayField] = value[i];

                            displayTplData.push(dataObj);

 

                        } else if(Ext.isDefined(valueNotFoundText)) {

                            displayTplData.push(valueNotFoundText);

                        }

                    }

                }

 

                me.setHiddenValue(processedValue);

                me.value = me.multiSelect ? processedValue : processedValue[0];

                if(!Ext.isDefined(me.value)) {

                    me.value = null;

                }

 

                if(canRealValue && me.value && me.value.length == 1) {

                    var rawvalue;

                    var newMatchedRecords=[];

                    var value = (me.value)[0];

                    if(value.indexOf(',') == -1) {

                        var record = me.findRecord(me.valueField, parseInt(value));

                        if(record) {

                            rawvalue = record.data;

                            newMatchedRecords = record;

                        }

                    } else {

                        var valarr = value.split(',');

                        var result = [];

                        for(var i = 0; i < valarr.length; i++) {

                            val = parseInt(valarr[i]);

                            var record = me.findRecord(me.valueField, val);

                            if(record) {

                                result[i] = record.data;

                                newMatchedRecords[i] = record;

                            }

                        }

                        rawvalue = result;

                    }

                    me.displayTplData = rawvalue;

                    matchedRecords = newMatchedRecords;

                    me.lastSelection = me.valueModels = matchedRecords;

 

                    if(inputEl && me.emptyText && !Ext.isEmpty(value)) {

                        inputEl.removeCls(me.emptyCls);

                    }

 

                    me.setRawValue(me.getDisplayValue());

                } else {

                    me.displayTplData = displayTplData;

                    me.lastSelection = me.valueModels = matchedRecords;

 

                    if(inputEl && me.emptyText && !Ext.isEmpty(value)) {

                        inputEl.removeCls(me.emptyCls);

                    }

 

                    me.setRawValue(me.getDisplayValue());

                }

                me.checkChange();

 

                if(doSelect !== false) {

                    me.syncSelection();

                }

                me.applyEmptyText();

 

                return me;

            }

        });

 

2定义一个renderer方法供column使用

var comboRenderer = function(combo) {

            return function(value) {

                var val = 0;

                if(value.indexOf(',') != -1) {

                    var valarr = value.split(',');

                    var valstr = '';

                    for(var i = 0; i < valarr.length; i++) {

                        val = parseInt(valarr[i]);

                        var record = combo.findRecord(combo.valueField, val);

                        valstr += record.get(combo.displayField) + ", ";

                    }

                    return valstr.substring(0, valstr.length - 2);

                } else {

                    val = parseInt(value);

                    var record = combo.findRecord(combo.valueField, val);

                    return record ? record.get(combo.displayField) : combo.valueNotFoundText;

                }

            }

        }

 

3column定义时renderer使用上边定义的方法

dataIndex : 'roleNames',

                width : 250,

                sortable : true,

                editor : RoleCombo,

                renderer : comboRenderer(RoleCombo)

 

关于其他的关于gird的写法，rowediting的定义等等的代码，使用和官方的例子一致，这里不再赘述！

 

网上有一些方法，都没有解决实际问题，比如说定义combo的focus事件，当点击rowediting是这个字段时，显示displayvalue，但是如果点击焦点是grid的别的列，value值就又再次显示出来，只有重写setvalue方法，才能达到满意的效果，大家看看更改的如果有什么问题，请大家批评指正！