Extjs 针对网格中的每一行添加链接

我需要针对editorgridpanel中的每一行显示“删除”链接。
如何创建此链接；因为它没有映射到存储中的任何特定列？
我尝试了以下操作，但未显示针对添加记录的链接：

 var sampleRecord = new Ext.data.Record.create([
        {mapping: 'organizationId',name:'organizationId', type:'int'},
        {mapping: 'name',name:'name', type:'string'},
        {mapping: 'address',name:'address' , type:'int'}
        ]);

    var s_grid= new Ext.grid.EditorGridPanel ({
        .........
            columns: [
                  {header: 'id', width: 120, sortable: false, dataIndex: 'organizationId'},
                  {header: 'name',width: 120, sortable: false, dataIndex: 'name'},
                  {header: 'address', sortable: false,width: 45, dataIndex: 'address'},
                  {header: '',width: 50, sortable: false, renderer:this.delRenderer }
             ],
            .....
,
            delRenderer:function (val, meta, rec, rowIdx) {
                var tempStr="<div onclick=\"javascript:Ext.getCmp('" +"s_grid" + "').deAllocate(" + rowIdx + ");\" class='pointer'><span style='color:#0000FF'><u>Delete</u></span></div>";
                return tempStr ;
            },
            deAllocate:function (rowIdx ) {
                Ext.getCmp('s_grid').getStore().removeAt(rowIdx);
                Ext.getCmp('s_grid').getView().refresh();
            }

            });

var samplecord=new Ext.data.Record.create([
{映射：'organizationId'，名称：'organizationId'，类型：'int'}，
{映射：'name'，名称：'name'，类型：'string'}，
{映射：'address'，名称：'address'，类型：'int'}
]);
var s_grid=新建Ext.grid.editorgrid面板({
.........
栏目：[
{头：'id'，宽度：120，可排序：false，数据索引：'organizationId'}，
{标题：'name'，宽度：120，可排序：false，数据索引：'name'}，
{头：'address'，可排序：false，宽度：45，数据索引：'address'}，
{标头：“”，宽度：50，可排序：false，呈现器：this.delRenderer}
],
.....
,
delRenderer:函数（val、meta、rec、rowIdx）{
var tempStr=“删除”；
返回tempStr；
},
解除分配：函数（rowIdx）{
Ext.getCmp（'s_grid'）.getStore（）.removeAt（rowIdx）；
Ext.getCmp（'s_grid'）.getView（）.refresh（）；
}
});

---

非常感谢您的帮助。

您可以通过添加删除字段来更改型号：

    {
      name: 'delete',
      convert: function () {
        return '<a href="#">delete</a>';
    }

{
名称：“删除”，
转换：函数（）{
返回“”；
}

然后，您可以在网格中添加额外的列，并通过对网格的“cellclick”事件进行一些修改来检查链接单击。以下是工作示例：

---

祝您愉快：-）

您的列上需要配置，因此只需在那里提供任何字段（例如id），并且在渲染器函数中忽略

值

参数（正如您已经做的那样）。

您最好使用一个。无论如何，您也可以围绕自定义元素（链接…）包装一个解决方案通过事件。下面是一个示例，显示了两种方法：

var grid = new Ext.grid.GridPanel({
    renderTo: Ext.getBody()
    ,height: 300

    ,store: new Ext.data.JsonStore({
        fields: ['id', 'name']
        ,data: [
            {id: 1, name: 'Foo'}
            ,{id: 2, name: 'Bar'}
            ,{id: 3, name: 'Baz'}
        ]
    })

    ,columns: [
        {dataIndex: 'name'}
        ,{
            xtype: 'actioncolumn'
            ,icon: 'http://images.agoramedia.com/everydayhealth/gcms/icon_delete_16px.gif'
            ,handler: function(grid, row) {
                grid.store.removeAt(row);
            }
        }
        ,{
            renderer: function(value, md, record, row, col, store) {
                return '<a class="delete-link" href="#delete-record-' + record.id + '">Delete</a>';
            }
        }
    ]

    ,listeners: {
        cellclick: function(grid, row, col, e) {
            var el = e.getTarget('a.delete-link');
            if (el) {
                e.preventDefault();
                grid.store.removeAt(row);
            }
        }
    }
});

var lastId = 3;    
setInterval(function() {
    var store = grid.store,
        record = new store.recordType({id: ++lastId, name: 'New record #' + lastId}, lastId);
    store.add(record);
}, 3000);

您的应用程序不在

此

指向您的网格的范围内（因为此时还没有创建网格…）。您要做的是这样的：

var s_grid = new Ext.grid.EditorGridPanel ({
    ...
    columns: [..., {
        ...
        renderer: delRenderer
    }]
});

function delRenderer() {
    // FYI, `this` will be the column here
    ...
}

---

或者将函数内联到网格定义中…

考虑他使用的是ExtJS 3.oops没有看到！！：）并且，正如matt所指出的，

dataindex

选项在理论上是必需的。因此，您可能希望将它设置为动作列中的任何内容，即使在我的小提琴中没有它，它也可以正常工作。。。

var s_grid = new Ext.grid.EditorGridPanel ({
    ...
    columns: [..., {
        ...
        renderer: delRenderer
    }]
});

function delRenderer() {
    // FYI, `this` will be the column here
    ...
}