Question

我有一个extjs网格

this.rentProofInfoGrid = new Ext.grid.EditorGridPanel({
            store : this.rentProofInfoStore,
            id : 'rentProofInfoGrid',
            cm : this.rentProofColModel,
            autoWidth : true,
            height : 300,
            bodyBorder : true,
            clicksToEdit : 1,
            containerScroll : true,
            autoScroll : true,
            iconCls : 'icon-grid',
            tbar : [this.addRentProofAction, this.deleteRentProofAction],
            plugins : [this.attachmentButton, this.deleteAttachment,
                    this.downloadLink],
            sm : this.selModel
        });

我的colmodel是

this.rentProofColModel = new Ext.grid.ColumnModel([
        this.rentProofInfoMasterCombo, {
            id : 'landLordName',
            header : "Landlord Name",
            dataIndex : 'landLordName',
            width : 140,
            align : 'right',
            editor : new Ext.form.TextField({
                        id : 'landLordName',
                        emptyText : 'Name'
                    }),
            scope : this
        }, {
            id : 'landLordAdd',
            header : "Landlord Address",
            dataIndex : 'landLordAddr',
            width : 200,
            align : 'right',
            editor : new Ext.form.TextField({
                        id : 'landLordAdd',
                        emptyText : 'Address'
                    }),
            scope : this
        }, {
            id : 'landLordPan',
            header : "Landlord PAN",
            dataIndex : 'landLordPAN',
            width : 100,
            align : 'right',
            editor : new Ext.form.TextField({
                        id : 'landLordPan',
                        emptyText : 'PAN Number'
                    }),
            scope : this
        }, {
            id : 'viewDeclaration',
            header : "View Declaration",
            dataIndex : 'viewDeclaration',
            width : 100,
            align : 'right',
            renderer : function(val, p, record) {
                var link = '';
                if (val != null) {
                    link = "<span class='downloadLink' row_id='"
                            + record.data.id
                            + "' style='text-decoration:underline;cursor:pointer;'>"
                            + val + "<span>";
                }
                return link;
            }
        }, this.attachmentButton, this.deleteAttachment]);

在我的一栏“viewDeclaration”中我正在创建一个渲染器，使dataIndex值成为超链接现在我的问题是如何在点击该跨度时注册点击事件，任何一个PLZ可以帮助我吗？

Answer 1

您可以使用Ext.select来检索与CSS选择器匹配的节点列表。

Ext.select('. downloadLink').on('click', function() { alert('bar'); });

Answer 2

我会处理网格上的cellclick事件。 doc（ExtJS 2.2）说：

cellclick : ( Grid this, Number rowIndex, Number columnIndex, Ext.EventObject e )

使用如下函数处理此事件：

function(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);  // Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
    var data = record.get(fieldName);
}

同样在此功能中，您可以通过以下操作准确获取用户点击的内容：

e.getTarget('.downloadLink') //returns you an HTMLElement

一旦你拥有了HTML元素，你就可以进行任何类型的检查。您甚至可以检查它是否具有您在渲染器中指定的“row_id”属性。

在col模型中为extjs Grid注册click事件处理程序

2 个答案: