将新记录添加到他的商店时网格不更新答案

【问题标题】：Grid not updating when new record is added to his store将新记录添加到他的商店时网格不更新
【发布时间】：2016-01-19 11:18:41
【问题描述】：

我有一个网格面板，当在他的商店中插入一条记录时，它没有被更新。

型号：

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 成功将新记录添加到网格中，但前端没有任何反应。

后端返回的记录是OK的。

看起来我正在插入新记录的网格与呈现的网格不同。

我在这里做错了什么？

谢谢。

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

【问题讨论】：

你能为我们写一个小提琴吗？我看到一些我正在做的事情不同，但很难看出哪里出了问题:)
我为你写了一个小提琴，它就像一个魅力。这就是我发现错误的原因，谢谢。

标签： javascript extjs extjs4.2

【解决方案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();
        },

【讨论】：

【解决方案2】：

问题在我的记录中。网格列渲染器中有一个“record.getOwner()”，并且没有设置所有者属性。我不知道为什么那个方法没有返回错误。

网格：

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

【讨论】：