Extjs 3.4 add buttons (Edit, Delete) to the grid row

Question

I have Grid, in each row must be a column with edit/delete buttons. When I click on Edit -it must open the popup window and in this popup window must be a form with object filds from the grid row. When I click delete button, it must delete object(row). I can not find simple solution...

What I did:

columns: [
{
    header: 'Action',
    width: 145,
    sortable: false,
    renderer: function (value, metaData, record, rowIndex, colIndex, store) {

        function createGridButton(value, id, record, handlerFunc, rowIndex) {
            new Ext.Button({
                text: value,
                value: rowIndex,
                handler: handlerFunc
            }).render(document.body, id);
        }

        var id = 'x-btn-container-' + rowIndex;

        createGridButton.defer(1, this, ['Edit', id, record, function (btn, e) {
            openWindowWithForm();
        }, rowIndex]);

        createGridButton.defer(2, this, ['Delete', id, record, function (btn, e) {
            alert('Row was deleted');
        }, rowIndex]);
        return ('<div id="' + id + '"></div>');
    },
    dataIndex: 'action'
},
{
    header: 'Login',
    dataIndex: 'login'
},
{
    header: 'Email',
    dataIndex: 'email'
},
{
    header: 'FirtsName',
    dataIndex: 'firstName'
},
{
    header: 'LastName',
    dataIndex: 'lastName'
},
{
    header: 'Birthday',
    dataIndex: 'birthday',
    xtype: 'datecolumn',
    format: 'd/m/Y'
}
]

I have added the buttons in 1-st column, but how can I delete and Edit the rows, i can not get RowIndex to do it. Please any help with this problem.

Please put your full code, is the full grid object with its column model, store and selection model. If possible provide a jsfiddle. — koni
Sorry for my table "style" can't find cdn for 3.4 extjs styles — Andrey

koni koni · Accepted Answer · 2014-08-02T23:14:05

Here is what people usually do:

They create a link/button using the renderer with a specific class like this:
They use the grid rowclick event and check where the user clicked
If the user clicked on an item that has the targetted class, bingo :)

See the corrected fiddle here:

http://jsfiddle.net/bubbliscious/4x8LJ/1/

Extjs 3.4 add buttons (Edit, Delete) to the grid row

1 Answers