javascript - 当新记录添加到他的商店时网格不更新

Question

我有一个网格面板，当在其商店中插入记录时，该网格面板不会更新。

型号:

Ext.define('S1.model.Ciot', {
    extend: 'Ext.data.Model',
    requires: 'S1.proxy.Ciot',
    proxy: 'ciot',
    associations: [
        {
            type: 'belongsTo',
            model: 'S1.model.Person',
            associatedName: 'owner',
            primaryKey: 'id',
            foreignKey: 'owner_id',
            associationKey: 'owner',
            setterName: 'setOwner',
            getterName: 'getOwner'
        }
    ],
    fields: [
        {name: 'id', type: 'int', useNull: true},
        {name: "owner_id", type: 'int', useNull: true},
        {name: "number", type: 'int', useNull: true},
        {name: "status", type: 'int', useNull: true},
        {name: "product", type: 'string', useNull: true}
    ]
});

商店:

Ext.define('S1.store.Ciot', {
    autoLoad: true,
    extend: 'Ext.data.Store',
    requires: 'S1.proxy.Ciot',
    model: 'S1.model.Ciot',
    proxy: 'ciot',
    remoteSort: true,
    remoteFilter: true,
    remoteGroup: true,
    pageSize: 40
});

Controller :

Ext.define('S1.controller.Ciot', {
    extend: 'Ext.app.Controller',
    stores: [
        'Ciot'
    ],
    models: [
        'Ciot'
    ],
    views: [
        'ciot.Window',
        'ciot.Grid',
        'ciot.EditWindow',
        'ciot.Form'
    ],
    init: function () {
        var me = this;
        me.control({
            'ciotgrid button[name=new]': {
                click: me.onNewButtonClick
            },
            'ciotgrid': {
                itemdblclick: me.onGridItemDblClick
            },
            'ciotform button[name=save]': {
                click: me.onButtonSaveClick
            }
        });
    },
    onNewButtonClick: function (bt) {
        var record = Ext.create('S1.model.Ciot'),
            grid = bt.up('grid');
        this.openEditWindow(record, grid);
    },
    onGridItemDblClick: function (v, record) {
        this.openEditWindow(record, v);
    },
    openEditWindow: function (record, grid) {
        var w = Ext.create('S1.view.ciot.EditWindow');
        w.setGrid(grid || null);
        w.show();
        w.down('form').loadRecord(record);
    },
    onButtonSaveClick: function (bt) {
        var form = bt.up('form'),
            record = form.getRecord();
        if (!record) {
            return false;
        }
        if (!form.getForm().isValid()) {
            return false;
        }
        form.updateRecord();
        record.save({
            success: this.onSaveSuccess,
            failure: this.onSaveFailure,
            scope: form
        });
    },
    onSaveSuccess: function (r, op) {
        var w = this.up('cioteditwindow'),
            grid = w.getGrid(),
            rs = op.getResultSet();
        grid.getStore().insert(0, rs.records[0]);
        w.close();
    },
    onSaveFailure: function (record, op) {
        // ...
    }
});

回调 onSaveSuccess 成功将新记录添加到网格中，但前端没有任何反应。

后端返回的记录正常。

看起来我插入新记录的网格与渲染的网格不同。

我在这里做错了什么？

谢谢。

ps:为了演示目的，代码被缩短。

Answer 1

尝试刷新网格:

      onSaveSuccess: function (r, op) {
            var w = this.up('cioteditwindow'),
                grid = w.getGrid(),
                rs = op.getResultSet();
            grid.getStore().insert(0, rs.records[0]);
 -->         grid.getView().refresh();
            w.close();
        },