将新记录添加到其商店时,网格不会更新

时间:2015-10-20 17:10:47

标签: javascript extjs extjs4.2

我的网格面板在他的商店中插入记录时没有更新。

型号:

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:为了演示目的缩短了代码。

2 个答案:

答案 0 :(得分: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();
        },

答案 1 :(得分:0)

问题在于我的记录。 网格列渲染器中有一个“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}
    ]
});