將新記錄添加到他的商店時，網格未更新

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
});

控制器：

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();
        },

Answer 2

問題在我的記錄中。 網格列渲染器中存在一個“ record.getOwner（）”，並且未設置owner屬性。 我不知道為什么該方法沒有返回錯誤。

網格：

Ext.define('S1.view.ciot.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.ciotgrid',
    store: 'Ciot',
    columns: [
        {
            header: 'Empresa',
            dataIndex: 'owner_id',
            renderer: function (v, md, record) {
                var owner = record.getOwner();
                if (owner instanceof S1.model.Person) {
                    v = owner.get('name');
                }
                return v;
            },
            flex: 1
        },
        {header: 'Número', dataIndex: 'number', flex: 1},
        {header: 'CIOT', dataIndex: 'ciot', flex: 1},
        {header: 'Produto', dataIndex: 'product', flex: 1},
        {header: 'Status', dataIndex: 'status', flex: 1}
    ]
});