`
roc08
  • 浏览: 227190 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【转】ExtJS Grid中文字链接点击事件的更合理的处理办法

阅读更多
原文出处: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的响应函数,只能接收字面参数,想传递一个对象是不可能的,如果应用上述方法,即可解决
分享到:
评论

相关推荐

    ExtJs表格点击超链接获取行的值

    #### 三、处理点击事件 当用户点击超链接时,我们通常需要捕获这个事件并执行相应的操作。这可以通过监听`click`事件并在事件处理器中检查点击的目标元素来实现。 **代码示例**: ```javascript grid.on('...

    EXTJS4.0视频教程 30集 下载地址

    - **事件监听**:通过`on`方法添加事件监听器,例如点击事件、键盘事件等。 - **自定义事件**:允许开发者定义自己的事件类型,提高组件之间的交互性。 #### 三、EXTJS 4.0 高级特性 **3.1 主题定制** - **Sass...

    如果表格内的数据是一个链接如:www.sina.com这样写法

    从给定的文件信息来看,主要讨论了在ExtJS框架中如何处理表格内数据作为链接的显示方式,以及与之相关的表格配置、选择模式、数据获取等知识点。下面将对这些知识点进行详细的阐述。 ### 表格数据作为链接的显示 ...

    selenium_doc

    在处理ExtJS组件时,可能需要利用到Selenium的特殊方法来应对动态加载的内容和自定义事件处理。理解ExtJS的组件结构和事件模型有助于编写更精确的测试用例。 3. **selenium_docs**: 这个部分可能是Selenium的中文...

    UniGUI集合说明--追月无名.pdf

    - **编码处理**:确保Cookie中的中文汉字被正确编码。 - **设置编码**:在设置Cookie时指定正确的编码。 #### 37. UniGUI如何实现压缩传输数据? 实现压缩传输数据的方法: - **启用压缩**:在服务器端启用数据...

    Ext解决题目(内存分页+导出Excel)

    总的来说,ExtJS提供了丰富的功能来处理大数据的分页显示和导出,通过合理利用其组件和API,我们可以构建出高效且用户友好的数据管理应用。在实践中,理解并熟练掌握内存分页和导出Excel的技巧,对于提升Web应用的...

    UniGUI集合说明

    在UniGUI中使用含有中文汉字的Cookies,需要注意编码问题,确保在设置和读取Cookies时正确处理字符编码。 #### 37. UniGUI如何实现压缩传输数据? 实现数据压缩传输的方法通常包括: - **启用压缩**:在服务器端...

    ext js中文开发手册

    EXT JS的事件处理机制灵活且强大,支持事件委托、事件阻止和事件捕获等高级特性。掌握事件处理是创建交互式应用的关键。 **十五、类设计与对象创建** 框架内置的类设计模式有助于创建可复用和可扩展的代码。通过...

    EXT-js-中文手册

    - **事件处理**:解释了如何编写事件处理函数来响应特定事件,如点击、拖拽等。 #### 7. 使用Widgets - **组件介绍**: - **MessageBox**:用于显示模态对话框,提供确认、警告等功能。 - **Grid**:展示表格数据...

    ExtAspNet_v2.3.2_dll

    -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的点击事件(feedback:yymaoji)。 +2009-11-26 v2.1.6 +修正动态创建Grid列的BUG(feedback:gxpan)。 -...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的点击事件(feedback:yymaoji)。 +2009-11-26 v2.1.6 +修正动态创建Grid列的BUG(feedback:gxpan)。 -...

Global site tag (gtag.js) - Google Analytics