原文出处:http://showframework.tumblr.com/post/18375146539/extjs-grid
我们经常会给GridPanel中的某一个column加一个renderer,让它的内容可以变成一个链接,例如:
resultRenderer: function (value) {
return ‘<a href=”http://www.example.com/” onclick=”some_function()” >查看</a>’;
}
这样在Grid中,查看那两个字就变成链接了
如果点击这个查看的时候,想弹出窗口,那么我们最普通的方式,就是给链接加一个onclick响应函数,
onclick这里调用的函数,必然是通过全局的方式了,这样做有个缺点,就是全局函数的扩散,造成可维护性下降
其实,有一种更合理的处理办法,不论renderer中生成的是链接,还是其他的内容比如button,都是通用的
代码如下
首先给grid添加一个cellclick事件的响应函数
grid.on(‘cellclick’, grid.onCellClick, grid);
响应函数中做如下处理
onCellClick: function (grid, rowIndex, columnIndex, e) {
if (e.getTarget().innerHTML === ‘查看’ ) { //借助事件的target来判断,这里是链接可以这样判断,其他方式亦可
var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
var data = record.get(fieldName);//这个data就是点击的单元格的数据了,一定有用的
if (fieldName == ‘this_column’) {
//如果是这一列,做这个事
}
if (fieldName === ‘that_column’) {
//如果是另外一列,做另外的事
}
}
}
这个方法,不仅可以处理链接,简化一下就是处理某个单元格点击,onCellClick的作用域还是grid,这个是重点, onCellClick还是在grid这个组件之内,而没有产生全局调用 ,另外点击onclick的响应函数,只能接收字面参数,想传递一个对象是不可能的,如果应用上述方法,即可解决
分享到:
相关推荐
#### 三、处理点击事件 当用户点击超链接时,我们通常需要捕获这个事件并执行相应的操作。这可以通过监听`click`事件并在事件处理器中检查点击的目标元素来实现。 **代码示例**: ```javascript grid.on('...
- **事件监听**:通过`on`方法添加事件监听器,例如点击事件、键盘事件等。 - **自定义事件**:允许开发者定义自己的事件类型,提高组件之间的交互性。 #### 三、EXTJS 4.0 高级特性 **3.1 主题定制** - **Sass...
从给定的文件信息来看,主要讨论了在ExtJS框架中如何处理表格内数据作为链接的显示方式,以及与之相关的表格配置、选择模式、数据获取等知识点。下面将对这些知识点进行详细的阐述。 ### 表格数据作为链接的显示 ...
在处理ExtJS组件时,可能需要利用到Selenium的特殊方法来应对动态加载的内容和自定义事件处理。理解ExtJS的组件结构和事件模型有助于编写更精确的测试用例。 3. **selenium_docs**: 这个部分可能是Selenium的中文...
- **编码处理**:确保Cookie中的中文汉字被正确编码。 - **设置编码**:在设置Cookie时指定正确的编码。 #### 37. UniGUI如何实现压缩传输数据? 实现压缩传输数据的方法: - **启用压缩**:在服务器端启用数据...
总的来说,ExtJS提供了丰富的功能来处理大数据的分页显示和导出,通过合理利用其组件和API,我们可以构建出高效且用户友好的数据管理应用。在实践中,理解并熟练掌握内存分页和导出Excel的技巧,对于提升Web应用的...
在UniGUI中使用含有中文汉字的Cookies,需要注意编码问题,确保在设置和读取Cookies时正确处理字符编码。 #### 37. UniGUI如何实现压缩传输数据? 实现数据压缩传输的方法通常包括: - **启用压缩**:在服务器端...
EXT JS的事件处理机制灵活且强大,支持事件委托、事件阻止和事件捕获等高级特性。掌握事件处理是创建交互式应用的关键。 **十五、类设计与对象创建** 框架内置的类设计模式有助于创建可复用和可扩展的代码。通过...
- **事件处理**:解释了如何编写事件处理函数来响应特定事件,如点击、拖拽等。 #### 7. 使用Widgets - **组件介绍**: - **MessageBox**:用于显示模态对话框,提供确认、警告等功能。 - **Grid**:展示表格数据...
-修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的点击事件(feedback:yymaoji)。 +2009-11-26 v2.1.6 +修正动态创建Grid列的BUG(feedback:gxpan)。 -...
-修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的点击事件(feedback:yymaoji)。 +2009-11-26 v2.1.6 +修正动态创建Grid列的BUG(feedback:gxpan)。 -...