天天看点

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' ? '扩建' : '工艺提升' }

如图:显示就正常啦

extjs的EditorGridPanel中的ComboBox列中显示值的问题