关于comboBox和grid的使用问题（Extjs）

[转自：http://kandy0619.blog.163.com/blog/static/64344345200961495742175/]

2009-07-14 09:57:42|  分类： Extjs |字号 订阅

         在gird中加入comboBox（下拉列表）来实现选择comboBox的值来补充grid（表格）单元格中的值，这是一种富客户端的表现，可以大量减少用户的输入，提高用户的工作效率。

          然而在初学Ext的时候，会经常遇到一个问题：如何使得用户在comboBox中选择的值显示在grid中？

         1、 问题来源：

               在grid的单元格中加入comboBox，当用户选择comboBox的时候，comboBox会将对应的valueField的值传给grid，grid将这个值显示出来。比如:

                1           男

                2           女

                上面是一个下拉列表的值，1和2是ID，应该对应comboBox的valueField属性，而男和女是名称，应该对应comboBox的displayField。ps：ext中的comboBox与html的不一样，不过可以这样来看待：ext.comboBox中的valueField对应html.select的value，而displayField对应innerHTML。

                  按道理来说，是应该这样设计的。但是由于comboBox的放在grid中的，这样会出现一种现象：当用户选择comboBox之后，比如说：女。comboBox给gird的值就应该是对应的ID：2。那么grid就会把2显示在grid的单元格中。（想放图上来，发现网易的图片上传用不了，算了~）

                  客户当然不希望显示在grid中的数据是他所不明白的，所以问题就出来了：怎么使得comboBox选择之后，返回到grid中的值是displayField的值，而不是valueField的值呢？

          2、解决办法：加入renderer

               代码如下：

var colM = new Ext.grid.ColumnModel( [
    {
     header :"编号",
     dataIndex :"deal_id",
     sortable :true,
     width :100
    },
    {
     header :"工序",
     dataIndex :"process_name",
     sortable :true,
     width :200,
     editor :new Ext.form.ComboBox( {
      id :"combo_process",
      store :store_process,
      valueField :"process_id",
      displayField :"process_name",
      forceSelection :true,
      typeAhead :true,
      triggerAction :'all',
      selectOnFocus :true,// 用户不能自己输入,只能选择列表中有的记录
      allowBlank :false
     }),
     renderer : function(value, cellmeta, record) {

      //获取当前id="combo_process"的comboBox选择的值
      var index = store_process.find(Ext
        .getCmp('combo_process').valueField, value);
      var record = store_process.getAt(index);
      var displayText = "";
      // 如果下拉列表没有被选择，那么record也就不存在，这时候，返回传进来的value，
      // 而这个value就是grid的deal_with_name列的value，所以直接返回
      if (record == null) {

      //返回默认值，这是与网上其他解决办法不同的。这个方法才是正确的。我研究了很久才发现。
       displayText = value;

      } else {
       displayText = record.data.process_name;//获取record中的数据集中的process_name字段的值
      }
      return displayText;
     }
    },

}]);

上面的代码请看清楚，网上有很多都是错的。网上的例子对record==null或者空的时候，没有作出判断，导致返回到grid的值是空字符串。这样会导致另一个问题，就是初始化grid的时候，加入了comboBox的列不会显示数据。

  if (record == null) {
      //返回默认值，这是与网上其他解决办法不同的。这个方法才是正确的。我研究了很久才发现。
       displayText = value;
      }

 这一段代码可以解决。为什么会导致这个问题呢？原因是修改renderer之后，返回的值是从comboBox中获取来的，可以初始化的时候，comboBox并没有选择值，可以说，并没有初始化，所以renderer返回的是空的。于是grid中就不显示值，或者说显示空值。

           我修改的代码是当comboBox返回空的时候，将返回的值设置成传进来的value，也就是grid给comboBox的值，也就是我们数据库中的数据。