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的值
 

 

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

你可能感兴趣的:(extjs,edtorGrid,rederer,editor)