实例背景:
使用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中的GridPanel的单元格在IE无法选中复制的问题
NULL 博文链接:https://stanly-xia.iteye.com/blog/1534256
ExtJs 4.0 Grid 单元格合并控件封装
EXTJS实现单元格变色、行变色(文字、背景)
Extjs图片渲染效果Extjs图片渲染效果Extjs图片渲染效果Extjs图片渲染效果
extjs单元格合并,gridpanel中多行合并
100行代码解决ExtJs4.1合并单元格问题
NULL 博文链接:https://zdk8105.iteye.com/blog/2232570
NULL 博文链接:https://dejazhan.iteye.com/blog/871259
Extjs4.2 Grid单元格编辑,包含日期控件,下拉框控件,同时可控制单元格是否有编辑权限。
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
ext表格合并单元格的方法,合并表头的方法extjs的官网上有,这里提供的是合并数据单元格的方法
EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据) Js代码 代码如下: grid.addListener(‘cellclick’,cellclick); function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore()....
NULL 博文链接:https://tipx.iteye.com/blog/718279
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
Extjs 整合 kindeditor例子,压缩包中的内容全,使用的是kindeditor 4.X extjs 3.1
extjs资料extjs资料extjs资料extjs资料extjs资料
csdn里有个兄弟类似的东西要10分,而且收录的不全,这个代码本是一个外国朋友的然后国人加了些修改,这里把两个版本同时献上
附件包含 控件及调用例子,看看理解即可,无法直接运行
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子