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

var cm = new Ext.grid.ColumnModel([   
{header:'ID',dataIndex:'id',hidden:true},
{header:'名',dataIndex:'title'},
{header:'sort',dataIndex:'fileComment'},
{header:'登陆者',dataIndex:'wfWaitUserName'},
{header:'所属',dataIndex:'wfWaitSecName'},
{header:'开始日',dataIndex:'wfCreateDate'}
{
header : "操作",
width : 150,
dataIndex : 'operation',
align : 'center',
renderer : function(value, cellmeta, record, rowIndex, columnIndex,store) {
return "<button type='button' onclick='rMenu1Fn'>修改</button>" +
"&nbsp;&nbsp;<button type='button' onclick=''>废除</button>";
}
]);

我们经常会给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的响应函数，只能接收字面参数，想传递一个对象是不可能的，如果应用上述方法，即可解决

ext grid 的每行最后一列添加 按钮

var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id',sortable:true},
        {header:'性别',dataIndex:'sex',sortable:true ,renderer:renderSex},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn',renderer:renderDescn}
    ]);

    var data = [
        ['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
    ];

    var ds = new Ext.data.Store({       
        proxy: new Ext.data.HttpProxy({url:'http://192.168.0.219/ext-2.1/examples/helloworld/grid.php'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

    function renderSex(value) {
        if (value == 'male') {
            return "<span style='color:red;font-weight:bold;'>男</span>";
        } else {
            return "<span style='color:green;font-weight:bold;'>女</span>";
        }
    }

    function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
        var str = "<input type='button' value='详细信息' onclick='alert(\"" +
            "这个单元格的值是：" + value + "\\n" +
            "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
            "这个单元格对应行的record是：" + record.data["id"] + "，一行的数据都在里边\\n" +
            "这是第" + rowIndex + "行\\n" +
            "这是第" + columnIndex + "列\\n" +
            "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
            "\")'>";
        return str;
    }
    
var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    sm: sm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
});
ds.load({params:{start:0,limit:10}});
grid.render();