Refreshing gridpanel after removing newly added record from store

Question

How do I remove a newly added row from a gridpanel? The gridpanel is bound to a store.

I use:

store.remove(record);
store.sync();

It works fine on existing records in the grid, the record is removed from the grid directly, but when I add a record and want to remove it right away, it isn't 'removed' form the grid.

The api is called, so the record is 'removed from the database' and the record is indeed gone when I do e.g. a browser refresh.

Does anyone knows how this works? Thanks in advance.

Store configurations

Ext.define('Iziezie.store.animal.doggywood.animal', {
    extend: 'Iziezie.store.animal.animal',

    model: 'Iziezie.model.animal.doggywood.animal',

    proxy: {
        type: 'baseProxy',
        api: {
            create: '../php/api/doggywood_animals.php?request=create',
            read: '../php/api/doggywood_animals.php?request=read',
            update: '../php/api/doggywood_animals.php?request=update',
            destroy:  '../php/api/doggywood_animals.php?request=destroy'
        }

    }

});

New records is added by form:

var store = gridpanel.getStore();
var model = Ext.ModelMgr.getModel(store.model);

var record = model.create();
store.insert(0, record);

...

frm.loadRecord(record);

On form submit

frm.updateRecord();
var record = frm.getRecord();
record.save();

On remove:

var sm = gridpanel.getSelectionModel();
var record = sm.getLastSelected();
var store = gridpanel.getStore();

store.remove(record);
store.sync();

Answer 1

To force a visual refresh on the grid, you can just call

myGridPanel.getView().refresh();

But this shouldn't be required, the grid should just show whatever is in your store. Can you post a full code sample of what you are doing?

Answer 2

try this to create a new record to grid panel using row editing:

createRecord: function() {
    var model = Ext.ModelMgr.getModel('EKOJS.model.m_yourmodel');
    var r = Ext.ModelManager.create({
        id: '',
        text: ''
    }, model);
    this.getYourgridaliasview().getStore().insert(0, r);
    this.getYourgridaliasview().rowEditing.startEdit(0, 0);
},

and to remove the selected record in your grid panel :

deleteRecord: function(dataview, selections) {
    var getstore = this.getYourgridaliasview().getStore();
    var selection = this.getYourgridaliasview().getSelectionModel().getSelection()[
        0];
    if (selection) {
        Ext.Msg.confirm('Confirmation',
            'Are you sure to delete this data: id = "' + selection.data
            .id + '"?', function(btn) {
                if (btn == 'yes') {
                    getstore.remove(selection);
                    getstore.sync();
                }
            });
    }
},

and, the important thing always reload your store after creating record like this :

Ext.Ajax.request({
    method: 'POST',
    url: '../php/api/doggywood_animals.php?request=create',
    params: {
        data: jsonData
    },
    success: function(response) {
        e.store.reload({
            callback: function() {
                var newRecordIndex = e.store.findBy(
                    function(record, id) {
                        if (record.get('id') === e.record
                            .data.id) {
                            return true;
                        }
                        return false;
                    });
                /* me.grid.getView().select(recordIndex); */
                me.grid.getSelectionModel().select(
                    newRecordIndex);
            }
        });
    }
});

The listener of after edit in rowediting plugin i use is like this below :

'afteredit': function(editor, e) {
    var me = this;
    if ((/^\s*$/).test(e.record.data.id)) {
        Ext.Msg.alert('Peringatan', 'Kolom "id" tidak boleh kosong.');
        return false;
    }
    /* e.store.sync();
                    return true; */
    var jsonData = Ext.encode(e.record.data);
    Ext.Ajax.request({
        method: 'POST',
        url: '../php/api/doggywood_animals.php?request=create',
        params: {
            data: jsonData
        },
        success: function(response) {
            e.store.reload({
                callback: function() {
                    var newRecordIndex = e.store.findBy(
                        function(record, id) {
                            if (record.get('id') ===
                                e.record.data.id
                            ) {
                                return true;
                            }
                            return false;
                        });
                    /* me.grid.getView().select(recordIndex); */
                    me.grid.getSelectionModel().select(
                        newRecordIndex);
                }
            });
        }
    });
    return true;
}

May be a little help for you.