How to put edited record on first position in grid after saveing chnages?

Question

I am using Extjs 4.2.1 and I ask myself a while how to put an edited and saved record on top of the grid after the save process has taken place. So the user can see the effect of the saved change.

I tried to put some code between the success callback method of the save method of the store. It looks like this:

store.save({
    success : function(rec, op, success) {

    var selectionModel = Ext.getCmp('grid').getSelectionModel();
    var selection = selectionModel.getSelection();
    selectionModel.select(selection);
    billRecordStore.insert(0, selection);
    billRecordStore.reload();
    Ext.getCmp('grid').getView().refresh();
}

But i have no idea how to get the changed record on top of the table.... Any ideas and helpful posts are very welcome!

Thanks for your help in advance!

Answer 1

when I edit a record, I do not use the load() or reload() method. I use only the sync () method.

This way the edited register remain highlighted in the grid.

Something like this:

var values = form.getValues();
var record = form.getRecord();
record.set(values);

var store = grid.getStore();

store.sync({
   success: function(){...},
   failure: function(){...}
});

When I create a new record, I have the grid records sorted so that the last inserted record is displayed on the first line.

So when it does the load (), or loadPage(1), is always selected the first row of the grid that corresponds to the last inserted record.

Edited 26/06/2015

        var form = Ext.ComponentQuery.query('#formitemId')[0];
        var grid = Ext.ComponentQuery.query('#griditemId')[0];
        var values = form.getValues();
        var record = form.getRecord();

        record.set(values);

        var store = grid.getStore();

        store.sync({
            callback: function(){
                var record1 = grid.getSelectionModel().getLastSelected(record);
                form.loadRecord(record1);
            },
            scope: this,

            success: function(){

                var windowInfoCNrecord = Ext.MessageBox.show({
                        title:'INFO',
                        msg: 'Success...',
                        closable: true,
                        modal: false,
                        iconCls: 'msg_success',
                        icon: Ext.MessageBox.INFO
                });

            },
            failure: function(){
                var windowInfoErrorEdit = Ext.Msg.alert({
                    title: 'Error',
                    message:'Error...!',
                    icon: Ext.Msg.ERROR,
                    button: Ext.Msg.CANCEL,
                    buttonText:{
                        cancel: 'Close'
                    },
                });
            }
        }); //sync