Adding link against each row in grid

Question

I need to display a 'Delete' link against each row in a editorgridpanel.
How do I create this link;as it is not mapped to any particular column in the store?
I tried the following but it does not display the link against the added records:

 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();
            }

            });

Help is appreciated.

Answer 1

You'd be better off using an ActionColumn. Anyway, you can also wrap a solution around custom element (link...) with the cellclick event. Here's an example showing both methods:

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);

Update

And just because I may be completely off topic on your question, I think your code is not working because when you call this:

renderer: this.delRenderer

Your not in a scope where this points to your grid (since it has not even been created at this point...). What you want to do is rather something like this:

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

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

Or put the function inline in the grid definition...

Answer 2

You can change model by adding delete field :

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

You can then add extra column in your grid and check for link click by 'cellclick' event of the grid with some modifications.Here is the working example : Working Fiddle.

Have a nice day :-)

Answer 3

The dataIndex config is required on your column, so just provide any field there (e.g. the id) and in your renderer function just ignore the value argument (as you are already doing).