Ext中combobox在grid显示问题

问题描述: 我在edit grid中嵌一个combox，combox的下拉单是文字的，但是提交时用数字代码表示。但是我的grid只显示数字代码，不显示对应的文字.

嘿嘿，这可问题对于我这样的初学者讲根本就不懂，呵呵，google了一下，找到解决办法，嘿嘿，不过我只是试验了一种成功，其它的要么就不成功，要么就看不懂，呵呵，我现在先把我做成功的代码贴出来（从网上找到，大家不要介意）:

第一种方案 (我做成功了，嘿嘿)

来源:http://blog.sina.com.cn/s/blog_4992583a0100bvwr.html

首先,我的combobox是使用本地的字典表,即在namespace里定义的数据.数据结构为:

Ext.data.status = [
 ['1', 'Yes'],
 ['0', 'No'] 
]

 

我要实现的是在grid中显示字典表里对应的value,而不是code.需要有下面几个步骤:

 

1.定义ds,即引入字典表中的数据

     var statusDS = new Ext.data.SimpleStore({ //通过字典表获得用户使用状态数据源
          fields: ['code', 'value'],
          data:Ext.data.status //这里对应我在字典表里定义的类型名称
     });

 

2.在grid相应列中加入渲染,即修改ColumnModel某列属性,红色字体部分是核心代码

       {
           header: '<s:text name="com.label.username"/>',
           dataIndex: 'userName',
           width: 90,
           align: 'center'
        },{
           header: '<s:text name="com.label.authority"/>',
           dataIndex: 'userAuthority',
           width: 60,
           align: 'center',
           editor: new Ext.form.ComboBox({
              id:'statusCmb',  //为combobox定义一个ID,必须的
              hiddenName:'',
              store: statusDS,   //引入ds     
              displayField:'value', //值
              valueField:'code', //代码
              editable:false,
              mode: 'local',
              triggerAction: 'all'
        }),
        renderer: function(value, cellmeta, record) {

          //通过匹配value取得ds索引
          var index = statusDS.find(Ext.getCmp('statusCmb').valueField,value); 

          //通过索引取得记录ds中的记录集
          var record = statusDS.getAt(index); 

          //返回记录集中的value字段的值
          return record.data.value;//注意这个地方的value是上面displayField中的value,因为我水平低，搞了好长时间                                                     才明白 ，呵呵
        }           
        },{
           header: '<s:text name="com.label.email"/>',
           dataIndex: 'email',
           width: 150,
           align: 'center'
        }

以上的代码只是根据我个人情况实现的,大家应用到自己程序时可能会有变动,还得随机应变啊

这是人家的后来我需要在grid中显示出上面的效果自写改了一下，把代码发上来：

//物料数据源

    var materialDs = new Ext.data.JsonStore({

     fields: ['matId','matName'],

     url: '../combobox.do?action=getBaseMaterialComboBox',

     autoLoad: true

     })

//初始化物料名称Combobox

     var materialCombo = new Ext.form.ComboBox({

     name: 'matName',

     fieldLabel: '物料名称',

     store:materialDs,

     valueField: 'matId',

     displayField: 'matName',

     typeAhead: true,

     mode: 'local',//这个意思 我一直不明白，呵呵。

     triggerAction: 'all',

     emptyText: 'Select a inputNum name..',

     selectOnFocus: true,

     editable: false,

     allowBlank: false

     })

{header: '物料名称',dataIndex: 'matId',width: 170,sortable: true,renderer:function(value,cellmeta,record){

     var index =materialDs.find(materialCombo.valueField,value);

     var record = materialDs.getAt(index);

     return record.data.matName;

     }},

这种方式我不知道好不好，但我没办法，只能这样用，因为我只能想到这种方法。有更好的方法大家可以告诉我，谢谢。

 

 

第二种方案（这种方案比较简单，学习一下，呵呵）:

来源:http://www.javaeye.com/topic/157067

{header:'单位',dataIndex:'Unit',sortable:true,width: 80,renderer:function(value){return value==1?'西药':'重要';},
editor: new Ext.form.ComboBox({
displayField:'kind',emptyText:'请选择',
valueField:'abbr',
selectOnFocus:true,
triggerAction: 'all',
mode: 'local',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'kind'],
data:[[1,'西药'],[2,'中药']]
}),
lazyRender:true
})},

 

 

第三种方式 (是我从一个论坛上找的http://www.vifir.com,一个留言,我没试验，不知道能否成功，呵呵):

renderer:function(value){ return t_value[value];//值对应的显示值数组},
listeners:{select:function(combo, record,index){ //回显值数组                        
                 t_value[record.data.t_valueId] = record.data.t_valueName;                               } },

 

 

 

第四种方式 （也是我从上面的论坛中找的，这个很乱,我把上面一个大侠的留言给贴上吧，呵呵）:

1、呵呵，这个问题其实很好办的哈。因为你要手动设置combox的值，给你看一个例子：
writePanel.fp.form.load({
              waitMsg:"$!{lang.get('Loading')}",
              url:this.baseUrl+"?cmd=read&id="+id,
              success:function(form){
                  if(record.data.myCategory){                  
                  writePanel.fp.form.findField("myCategory").setValue(record.data.myCategory.id);
                  writePanel.fp.form.findField("myCategory").el.dom.value=record.data.myCategory.name;//text
                  var oEditor = FCKeditorAPI.GetInstance('content') ;
                  if(oEditor)oEditor.SetHTML(form.findField("content").getValue());
                  }
              }
          });
上面的程序是从后台加载表单数据到FormPanel中，由于combox的处理比较特殊，需要通过下面两句来给他手动赋值：
writePanel.fp.form.findField("myCategory").setValue(record.data.myCategory.id);
writePanel.fp.form.findField("myCategory").el.dom.value=record.data.myCategory.name;//text

2、我的意思是，你在修改的时候，得手动设置一下combox的值。

对于你的情况，由于返回的record.data.name = '2' ，那么你就要先在[[1,a],[2,b][3,c]]这个数组中查询，查询2这个值对应的显示文本，也就是查到B。然后你再调用下面的语句:
cmb.setValue(2);
cmb.el.dom.value=B;
这就就对了!

3、{header:'用户名',dataIndex:'name',renderer:function(val){
 //在这里return通过val(就是那个id)获取的name的值
return combostore.getAt(combostore.find('id',val)).data.name;
}}

4、

目前这个问题已经解决了

girdpanel.cm加上了一个

renderer: function(value, p, record) {
    return value.name;
}
修改的时候是用大峡的那种方法...

第五种( 老外的，哎，我小学还没毕业，老外的东西看不懂，也搞过来，呵呵，以后当作学E文了)：

来源(大家可以自已看看去，呵呵):http://extjs.com/learn/Ext_FAQ_Grid#ComboBox_displays

•  Most likely the dataIndex is missing or improperly assigned in the grid's ColumnModel definition for that particular column. If the dataIndex is omitted the editor will, by default, gather the cell's innerhtml4strict as the editable content.

• As an alternative, see this thread.
• to set up a ComboBox Editor in a grid so it allows other (custom) values that are not in the combobox's store:

Ext.form

.ComboBox

(

{


  ...
  valueField

: undefined,
  ...
}

)

;

• See this thread for another approach.
• Here is a portion of a column model:

   {


      name:     "user_account"

,
      hidden:   false

,
      hideable: true

,
      header

:   "User Account"

,
      editor: {


         xtype:        "combo"

,
         typeAhead:    true

,
         triggerAction:"all"

,
         lazyRender:   true

,
         listClass:    "x-combo-list-small"

,
         store:[


            [

 "0"

 , "Staff Account"

  ]

, //the value at index 0 is


                                        //assumed to be the combo value 


            [

 "1"

 , "Admin Account"

 ]

,  //the value at index 1 is


                                        //assumed to be the combo text


            [

 "2"

 , "Super Account"

 ]


         ]


      }

,
      width:150


   }

• How do I get the value of the combo's selection (instead of the text) displayed after an edit is done on the combo?

• Set up the Grid to actually store "0", "1" or "2" and use a column renderer to display the textual representation.
• Add a listener to the EditorGridPanel's 'validateedit ' event, and pull the textual value out of the combo, and manually set it into the record, then return false so that EditorGridPanel does not go ahead with its change (grid does not think it was a 'true' edit).

//listening for the grid's 'validateedit' event


'validateedit'

: function

(

e)

{


   var

 rec = e.record; 
   //looking into the store of the combo


   var

 store = rec.fields.items[

e.column]

.editor.store;
   if

(

store && store instanceof Array

 && store[

0

]

 instanceof Array

)

{


      for

(

var

 opt = 0

; opt < store.length; opt++)

{


         var

 option = store[

opt]

;
         if

(

option[

0

]

 == e.value)

{


            //setting the value to the 'textual' value of the selection


            //using rec.set(fieldName, newValue) to set it how you want


            rec.set(

e.field, option[

1

]

)

;
            //return false so that the EditorGridPanel thinks it was


            //an invalid edit and does not do the change itself


            return

 false

;
         }


      }


   }


}

• Getting the comboBox to display the displayField instead of their 'value' after the user makes a change.

• An EditorGridPanel calls getValue() on the form Field (in this case a comboBox) that it is using as the column editor at the end of the edit. If there is a hidden field, getValue() returns that field, not the displayed text.

So, the value of the Combo will be "0", "1" or "2" and that is what will be displayed in the Grid. Two options:

• Give the Combo a hiddenName as the name of the field you wish submitted.
• If you use name , it is the visible input which gets that name (which is a normal <input type="text">) and is submitted. hiddenName is used to create an <input type="hidden"> into which the valueField is stored.