extjs的EditorGridPanel中的ComboBox列中顯示值的問題

有一段時間沒寫部落格了，最近因項目一直在忙，終于抽出空來寫點東西，在項目中使用了extjs的editorgridpanel,但是其中的combobox在選擇了相應的選項後，grid中顯示的是值域(valueField)的值，而非意願中的顯示域(displayField)的值，在網上搜尋了一番，結果幾乎都是在定義帶combobox的列時配置其renderer的屬性，下面是網上最常見的2中處理這個問題的代碼。

第一種：在渲染時利用Combobox來設定

//這是編輯框

 {

                  text: '改擴建類型',

                   name:'Upgrading_Type',

                  align:"center",

                  flex:1,

                  dataIndex: 'Upgrading_Type',

                  editor:combo,

                  defaultValue:'1',

                  renderer:Ext.util.Format.comboRenderer(combo)

  }

//這是ComboBox

var combo = new Ext.form.ComboBox({

          store:typeStore,

          istConfig: {

              emptyText: "未找到比對項",

              maxHeight: 150

          },

          id:'cb',

          name: "Config_Value",

          triggerAction: "all",        //單擊觸發按鈕顯示全部資料

          displayField: "Config_Name",

          valueField: "Config_Value",

          hiddenName:"Config_Value",

          queryMode: "local",

          forceSelection: true,        //要求輸入值必須在清單中存在

          typeAhead: true,     //允許自動選擇比對的剩餘部分文本

            value: "1"

      });

//下面是處理此問題的方法---Ext.util.Format.comboRenderer(combo)  

       Ext.util.Format.comboRenderer = function(combo){

          return function(value){

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

              return record ? record.get(combo.displayField) : '123';

          }

  }

第二種：通過Store對象來擷取record來設定

前面的編輯框的代碼和ComboBox如同上面的，下面的是處理的方法

//擷取目前id="cb"的comboBox選擇的值

                      var index = typeStore.find(Ext.getCmp('cb').valueField, value);

                      var record = typeStore.getAt(index);

                      var displayText = "";

                      if (record == null) {

                          displayText = value;

                      } else {

                          displayText = record.data.Config_Name;//擷取record中的資料集中的Config_Name字段的值

                      }

                      return displayText;

                  }

經過了一番嘗試以後結果發現這兩種辦法都不行，兩種辦法都執行了else，是以下面是我嘗試成功的

一個灰常簡單的辦法。

renderer:function(value){ return value == '1' ? '擴建' : '工藝提升' }

如圖：顯示就正常啦