Extjs EditorGrid 单元格渲染

阅读更多

实例背景：

使用EditorGrid来显示从数据库读出的的数据，EditorGrid中有个一字段（某一列的所有单元格），这个字段的值是数 字，而且这些数字正好对应的是一个comboBox的valueField的值。

现在要达到的效果就是 ：

1.让这个字段显示不再显示原先的数字，而是显示comboBox中对应的displayField的值。

2.当点击这个字段（表中的单元格）的时候，让这个单元格显示那个comboBox。

 

解决方案：

 

Q：首先先解决第二个问题，如何把comboBox绑定在单元格上，实现当单击单元格式，出现comboBox

A：我们知道通过创建列模型可以定义表格由哪些字段组成，并且可以将某一个单元格绑定一个Form控件，

例如：

 

var cm = new Ext.grid.ColumnModel([
		{header:"列名",
                  dataIndex:"对应record对象中的name属性的值",	
                  width:120,	
                  renderer:filterString //用来渲染单元格的funtion,也就是用来改变单元格中显示的内容
                  editor:comboBox对象名}
]);

 

通说上面加入editor属性就可以实现点击单元格弹出comboBox的效果，并且在comboBox中选择的的值，也会自 动的显示在单元格里。当然除了comboxBox外，也可是以textField，只要是Form类型的都可以。

 

Q：然后解决第一个问题。改变单元格显示的内容。

A：通过上面列模型的renderer属性就可以实现改变单元格的值，如上所示，通过filterString方法来改变显示的内 容。代码如下：

function filterString(value,metadata,record){
         var index = weatherTypeStore.find('vf',value);  //value就是单元格原本显示的数字
	 if(index!=-1){  
              return comboBoxStore.getAt(index).data.df;//得到valueField对应的displayField的值
         }  
         return value; 
}

 

下面的代码是comboBox的，主要用于作对照,

 

var comboBox=new Ext.form.ComboBox({
            valueField:'vf',     //与filterString方法中的红色字体对应
            displayField:'df',  //与filterString方法中的红色字体对应
            triggerAction:'all',
            store:comboBoxStore
        });

 

下面逐行解释一下filterString方法中的代码：

 

var index = comboBoxStore.find('vf',value);
在store中查找是否有属性vf的值为变量value的值，找到返回对应的索引，找不到返回-1

return comboBoxStore.getAt(index).data.df; 
根据索引index找到那条记录，得到属性名为df的值

 

 

完了！！哈哈。以上只是自己的总结，有帮助的可以看看，对大家没用的也可以喷喷。因不知道怎么插入本地的效果图，所以大家就凑副一下吧。