[CLOSED] GridPanel RowSelect event fires twice

[vadym.f]

Hi,

I have a client side function selecting a new GridPanel row into view:

        var selectRecordIntoView = function (recordKey) {
            var grid = GridPanel1,
            record = grid.store.getById(recordKey);
            grid.store.openPage(record, function () {
                grid.getSelectionModel().selectRow(grid.store.indexOf(record));
            });
        };

        var addNewRecord = function (response) {
            var grid = GridPanel1;
            var newRecord = {
                RecordKey: response.RecordKey,
                param1: response.param1
            };
            grid.addRecord(newRecord);
            grid.store.commitChanges();

            selectRecordIntoView(response.RecordKey);
            //FormPanel1.getForm().loadRecord(newRecord);
            //FormPanel1.record = newRecord;
        }

The GridPanel defines the RowSelect handler as follows:

                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true" ID="RowSelectionModel1">
                        <DirectEvents>
                            <RowSelect Before="HiddenSelectedRow.setValue(Ext.encode(GridPanel1.getRowsValues({selectedOnly: true})));"
                                OnEvent="GridPanel1_RowSelect" Success="FormPanel1.getForm().loadRecord(record);
                                                                                FormPanel1.record=record;
                                                                                ">
                                <ExtraParams>
                                    <ext:Parameter Name="param1" Value="record.data['param1']" Mode="Raw">
                                    </ext:Parameter>
                                </ExtraParams>
                                <EventMask ShowMask="true" />
                            </RowSelect>
                        </DirectEvents>
                    </ext:RowSelectionModel>
                </SelectionModel>

When I add a new row on the client using the addNewRecord() function, I'd like to select the new row and the details form databinding to occur. There're several problems I'm experiencing here:

• Form databinding has to be done manually
• RowSelect event fires twice for some reason
• The new record gets selected but isn't scrolled into view - would be nice to have

Please suggest a workaround or let me know if you need more info.

[Daniil]

Hi Vadym,

• Form databinding has to be done manually

Not sure what you mean. I don't think it should be done automatically when the Store gets a new record.

• RowSelect event fires twice for some reason

Does setting up

SelectionMemory="Disabled"

for the GridPanel help?

• The new record gets selected but isn't scrolled into view - would be nice to have

Calling the GridView focusRow forces a record to be scrolled into the view.
http://docs.sencha.com/ext-js/3-4/#!...ethod-focusRow

[vadym.f]

Hi Daniil,

I've got SelectionMemory="Enabled", switched it to "Disabled" with no effect. I think what may screw up the row selection sequence is the Store Load handler. When a new row is added on the client, it probably gets executed, too.

                            <Load Handler="if (records.length > 0) {
                                        var sm = GridPanel1.getSelectionModel();
                                        if (!sm.hasSelection()) {
                                            sm.selectRow(0);
                                        }
                                        else{
                                            var recordKey=GridPanel1.getRowsValues({selectedOnly: true})[0].RecordKey;
                                            sm.selectRow(Store1.find('RecordKey', recordKey));
                                        }
                                   }" />

Do you think I can temporarily disable it on the client so that the second RowSelect event doesn't fire and then activate it back?

Thanks for the focusRow() suggestion, it works!

[Daniil]

I think what may screw up the row selection sequence is the Store Load handler. When a new row is added on the client, it probably gets executed, too.

Well, if the Store is reloaded after adding a new record, then yes, the Load listener is executed.

I guess the callback passed to the openPage function is triggered after the Load listener.

Maybe something like this:

var sm = grid.getSelectionModel();
sm.lockSelection = true;
grid.store.openPage(record, function () {
    sm.selectRow(grid.getSore().indexOf(record));
    sm.lockSelection = false;
});

<Load Handler="if (records.length > 0) {
                   var sm = GridPanel1.getSelectionModel();
                   if (!sm.hasSelection() && !sm.lockSelection) {
                       sm.selectRow(0);
                   }
               }" />

By the way, the original "else" block is unclear for me. Seems the already selected row is just re-selected.

[vadym.f]

Thanks for the suggestions Daniil! I will probably have to redesign the whole row selection paradigm in order to eliminate some complexity. You can close this thread down for now.