有一段時(shí)間沒寫博客了，最近因項(xiàng)目一直在忙，終于抽出空來寫點(diǎn)東西，在項(xiàng)目中使用了extjs的editorgridpanel,但是其中的combobox在選擇了相應(yīng)的選項(xiàng)后，grid中顯示的是值域(valueField)的值，而非意愿中的顯示域(displayField)的值，在網(wǎng)上搜索了一番，結(jié)果幾乎都是在定義帶combobox的列時(shí)配置其renderer的屬性，下面是網(wǎng)上最常見的2中處理這個(gè)問題的代碼。

第一種：在渲染時(shí)利用Combobox來設(shè)置

//這是編輯框

?{

? ? ? ? ? ? ? ? ? text: '改擴(kuò)建類型',
? ? ? ? ? ? ? ? ? ?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: "未找到匹配項(xiàng)",
? ? ? ? ? ? ? maxHeight: 150
? ? ? ? ? },
? ? ? ? ? id:'cb',
? ? ? ? ? name: "Config_Value",
? ? ? ? ? triggerAction: "all", ? ? ? ?//單擊觸發(fā)按鈕顯示全部數(shù)據(jù)
? ? ? ? ? displayField: "Config_Name",
? ? ? ? ? valueField: "Config_Value",
? ? ? ? ? hiddenName:"Config_Value",
? ? ? ? ? queryMode: "local",
? ? ? ? ? forceSelection: true, ? ? ? ?//要求輸入值必須在列表中存在
? ? ? ? ? typeAhead: true, ? ? //允許自動(dòng)選擇匹配的剩余部分文本
? ? ? ? ? ? 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對(duì)象來獲取record來設(shè)置

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

//獲取當(dāng)前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中的數(shù)據(jù)集中的Config_Name字段的值
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? return displayText;
? ? ? ? ? ? ? ? ? }

經(jīng)過了一番嘗試以后結(jié)果發(fā)現(xiàn)這兩種辦法都不行，兩種辦法都執(zhí)行了else，所以下面是我嘗試成功的

一個(gè)灰常簡(jiǎn)單的辦法。

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

如圖：顯示就正常啦

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。