Reload grid selection after deletion of row in extjs

Question

I have a grid with one column, which when the user selects, is used to display information in various textfields, checkboxes which are embedded in a panel on the right. I have implemented a delete feature at the row level in the grid. Now I wish either of these two things to happen.

1) Either the default selection is such that the first row is by default selected after deletion of any row.
OR
2)The information in the various components in the panel on the right is cleared.

Currently what happens is that the information which corresponds to the deleted row stays after deletion since nothing is selected in the grid so the previous selected option is used to display information on the right.

Use the store remove event: docs.sencha.com/extjs/4.1.1/#!/api/… — CD..
I have used remove to delete the entry from the grid. The functionality I wanted advice for comes after that step. — aayush_v20

matt matt · Accepted Answer · 2015-05-18T14:22:43

As removing the record from the grid implies deselecting it, you really just need to listen for changes to the selection in your grid and implement the desired behaviour when no selection exists.

I'd recommend the selectionchange event, as you can cover both selection and deselection by inspecting the new selection state:

grid.on({
    'selectionchange': function(sm, selectedRecords) {
        if (selectedRecords.length === 0) {
            // no selection -> clear fields or select the first row
        } else {
            // selection exists -> load data into fields
        }
    }
});

(assuming you're using single selection, i.e. either one or no row can be selected)

Reload grid selection after deletion of row in extjs

1 Answers