Add Delete button extjs grid

Question

I have a grid panel wherein I wish to add a delete button for every row. When a user clicks the button that row is deleted. Also I wanted to have a save button at the bottom which helps the user add a row to the grid. The issue is that I am adding the rows dynamically. So for each row the delete icon should also be added like that.

My requirements are just for 2 columns. One displays the name and the other will display the icon for delete.

Kindly advise me how to go about adding the icon to each row dynamically. I have a CSS already in place which goes something like this:

.icon-delete {
    background-image: url(../images/delete.png) !important;
}

This CSS is in a different file. I am new to extjs so I don't really have much experience with such features.

EDIT:

I have tried the following but it doesn't display the icon. Please tell me where am I wrong.

columns : [{
    text : 'Name', 
    dataIndex : 'name', 
    width : '50%'
},
{
    xtype : 'actioncolumn',
    draggable : false,
    hideable : false,
    menuDisabled : true,
    width:'50%',
    items : [{
        iconCls: 'icon-delete',
        tooltip: 'Delete',
        scope: this,                   
    }]
}]

3rgo 3rgo · Accepted Answer · 2015-05-13T09:27:28

You should use the Ext.grid.column.Action class, like this :

{
    xtype:'actioncolumn',
    width:20,
    items: [{
        iconCls: 'icon-delete',
        tooltip: 'Delete',
        handler: function(grid, rowIndex, colIndex) {
            grid.getStore().removeAt(rowIndex);
        },
        scope: this
    }]
}

Documentation for the class : http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Action

Add Delete button extjs grid

1 Answers