Extjs 3.4将按钮（编辑，删除）添加到网格行

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.

Answer 1

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/