有一段時間沒寫博客了，最近因項目一直在忙，終于抽出空來寫點東西，在項目中使用了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' ? '擴建' : '工藝提升' }

如圖：顯示就正常啦

?

總結

以上是生活随笔為你收集整理的extjs的EditorGridPanel中的ComboBox列中显示值的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。