ExtJs Grid 删除，编辑，查看详细等超链接处理

 

在网上查了好多资料，关于ExtJs处理操作栏的“删除”、“编辑”、“查看详细”的处理，原来项目都是这么处理：

操作栏：{
        text:'操作',
        xtype:'actioncolumn',
        items : [{
            icon : '../images/edit.png',
            tooltip : '编辑',
            handler:function(grid, rowIndex, colIndex){

                var record = grid.getStore().getAt(rowIndex);
                var data = record.data;
                
                var demoInfoForm = Ext.create('core.demo.view.DemoInfoForm ', {
                    parent : grid,
                    title  : '新增/编辑'
                });
                demoInfoForm.show();
            }
        }]
    }

 网上查了好多资料，一种是修改源码，另一种就是使用图片，也就是上面这种。如果是只有一种情况，例如只有：编辑；如果一栏有两列:例如有 “编辑” “查看” “删除” 这个就比较麻烦了。

 我这里提供一个只有一个“编辑”的时候的处理，这里我采用点击单元格的方式触发事件，因为目前只有一列编辑栏，所以这么处理。

 具体的代码如下：

处理后的代码：{
        text : '聊天记录',
        dataIndex : 'id',
        width : 80,
        renderer : function() {
            return '<a href="#">查看</a>';
        },
        listeners : {
            'click' : function(grid, rowIndex, colIndex) {
                // 获取数据
                var data = grid.store.data.items[colIndex].data;
                var id = data.id;
                
                var demoInfo = Ext.create('core.demo.view.DemoInfoForm',{
                                        // 传递参数
                    msgId  :  id
                });
                demoInfo.show();
            }
        }
    }

 这里处理了一下，返回一个超链接，但是点击的时候却是做了一个监听，监听这grid的一列的触发事件，这样点击时便弹出一个窗体（不喜欢图片，感觉不好看，才这么处理）。

 注：ExtJs 4.0