`
huoyunshen888
  • 浏览: 83498 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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') {
                //如果是另外一列,做另外的事
            }
        }
    }


分享到:
评论

相关推荐

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

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

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

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

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

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

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

    - **打开链接**:在事件处理中使用JavaScript打开链接。 #### 40. HowToMakeCaptionInUniGUI? 在UniGUI中设置标题的方法: - **设置属性**:直接在IDE中设置标题属性。 - **代码控制**:通过代码控制标题的显示...

    selenium_doc

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

    UniGUI集合说明

    使用Grid+Report报表控件的方法是一种推荐的解决方案,它结合了数据网格与报表的功能,能够更灵活地展示和打印数据。 #### 33. UniGUI的布局面板控件TUniRegionPanel `TUniRegionPanel`是一种用于布局控制的容器...

    ExtAspNet_v2.3.2_dll

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

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

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

    ext js中文开发手册

    源码分析涉及组件架构、事件处理流程、数据绑定机制等方面,对于定制高级功能和调试问题尤为重要。 **九、程序规划入门** 在使用EXT JS进行项目开发前,合理的规划至关重要。这包括选择合适的布局、定义组件层次、...

    EXT-js-中文手册

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

    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