Edit row in EXTJS grid on clicking edit button with a new window opened for editing the fields

Question

I am working on a EXTJS application, where I am displaying data in an EXTJS grid.

There is an edit button against each row. Please check the image.

I want on clicking the edit link, a pop window will open with all the editable fields and I can edit the row from there.

Please help me achieving this.

Grid View

Here is my code.

{
    xtype:'actioncolumn',
    width:50,
    items: [{
        icon: 'assets/images/edit.png',  // Use a URL in the icon config
        tooltip: 'Edit',
        handler: function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
            alert("Edit " + rec.get('ID'));
        }
    }
}

Thanks

matt matt · Accepted Answer · 2013-12-20T10:29:42

I'm not gonna do the coding for you, but here's what you'll need:

A window with a form panel.
The loadRecord method on the form panel's underlying basic form to the load record into the form
The getValues method on the basic form to retrieve the modified values
The set method on the record to write back the values from the form to the record

Edit row in EXTJS grid on clicking edit button with a new window opened for editing the fields

2 Answers