javascript - EXTJS Writer Grid - 删除行 - 客户端和服务器端

Question

当我删除行时 - 它重新出现在客户端 - 刷新页面我看到它确实已被删除

在方法中添加store.reload意味着它会再次出现，然后在重新加载store时消失。

感谢任何帮助

// The DataWriter component.
var writer = new Ext.data.JsonWriter({
    encode: false
})


Ext.namespace('codeblender');

codeblender.app = function() {
    /**
     * Render the ground links
     *
     * @param val
     * @param p
     * @param record
     * @return
     */
    function rendererGroundLink(val, p, record) {
        var string = record.data.ground;
        var newContent = string.replace(/ /g, '-');

        return ('<a href="venues/' + newContent.toLowerCase() + '/" target="_new">' + record.data.ground + '</a>');
    }

    // Public space
    return {

        // Public methods
        init: function() {
            // !Create the data store
            var store = new Ext.data.JsonStore({
                fields: [{
                    name: 'id',
                    type: 'int'
                }, {
                    name: 'division_id',
                    type: 'int'
                }, {
                    name: 'competition',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'date',
                    dateFormat: 'Y-m-d'
                }, {
                    name: 'time',
                    type: 'time'
                }, {
                    name: 'referee',
                    type: 'string'
                }, {
                    name: 'ground',
                    type: 'string'
                }, {
                    name: 'team_a',
                    type: 'string'
                }, {
                    name: 'score_a',
                    type: 'string'
                }, {
                    name: 'scorer_a',
                    type: 'string'
                }, {
                    name: 'team_b',
                    type: 'string'
                }, {
                    name: 'score_b',
                    type: 'string'
                }, {
                    name: 'scorer_b',
                    type: 'string'
                }],

                idProperty: 'id',
                messageProperty: 'message',
                pruneModifiedRecords: true,
                remoteSort: true,
                restful: true,
                root: 'data',
                sortInfo: {
                    field: 'date',
                    direction: "DESC"
                },
                successProperty: 'success',
                totalProperty: 'totalCount',
                url: '/restfixture',
                writer: writer
            });

            store.load({
                params: {
                    start: 0,
                    limit: 50,
                    sort: 'date',
                    dir: 'DESC'
                }
            });

            // !Create the Team data store
            var storeTeam = new Ext.data.JsonStore({
                baseParams: {
                    status: 'Active'
                },
                fields: [{
                    name: 'id',
                    type: 'int'
                }, {
                    name: 'team',
                    type: 'string'
                }],
                restful: true,
                root: 'data',
                sortInfo: {
                    field: 'team',
                    direction: "ASC"
                },
                url: '/restteam'
            });

            // !Create the Ground data store
            var storeGround = new Ext.data.JsonStore({
                fields: [{
                    name: 'id',
                    type: 'int'
                }, {
                    name: 'ground',
                    type: 'string'
                }],
                restful: true,
                root: 'data',
                url: '/restground'
            });

            // !Create the Referee data store
            var storeReferee = new Ext.data.JsonStore({
                fields: [{
                    name: 'id',
                    type: 'int'
                }, {
                    name: 'referee',
                    type: 'string'
                }],
                restful: true,
                root: 'data',
                url: '/restreferee'
            });

            // !Create the column model
            var columns = [{
                    header: 'Division',
                    sortable: true,
                    dataIndex: 'division_id',
                    width: 75,
                    editor: {
                        allowBlank: false,
                        editable: false,
                        lazyRender: true,
                        mode: 'local',
                        store: [
                            [1, 'Division 1'],
                            [2, 'Division 2'],
                            [3, 'Division 3']
                        ],
                        triggerAction: 'all',
                        xtype: 'combo'
                    }
                }, {
                    header: 'Competition',
                    sortable: true,
                    dataIndex: 'competition',
                    editor: {
                        allowBlank: false,
                        editable: false,
                        lazyRender: true,
                        mode: 'local',
                        store: ['Season 8', 'Cup 8', 'Season 7', 'Cup 7', 'Season 6', 'Cup 6', 'Season 5', 'Cup 5', 'Season 4', 'Cup 4', 'Season 3', 'Cup 3', 'Season 2', 'Cup 2', 'Season 1', 'Cup 1'],
                        triggerAction: 'all',
                        xtype: 'combo'
                    }
                }, {
                    header: 'Date',
                    sortable: true,
                    dataIndex: 'date',
                    xtype: 'datecolumn',
                    format: 'Y-m-d',
                    width: 100,
                    editor: {
                        allowBlank: false,
                        editable: true,
                        emptyText: 'Date',
                        format: 'Y-m-d',
                        xtype: 'datefield'
                    }
                }, {
                    header: 'Time',
                    sortable: false,
                    dataIndex: 'time',
                    editor: {
                        allowBlank: false,
                        editable: false,
                        format: 'H:i:s',
                        increment: 5,
                        minValue: '09:00:00',
                        xtype: 'timefield'
                    }
                }, {
                    header: 'Referee',
                    sortable: true,
                    dataIndex: 'referee',
                    editor: {
                        allowBlank: false,
                        displayField: 'referee',
                        editable: false,
                        emptyText: 'Select Referee',
                        forceSelection: true,
                        lazyRender: true,
                        mode: 'remote',
                        store: storeReferee,
                        triggerAction: 'all',
                        valueField: 'id',
                        xtype: 'combo'
                    }
                }, {
                    header: 'Ground',
                    sortable: true,
                    dataIndex: 'ground',
                    renderer: rendererGroundLink,
                    editor: {
                        allowBlank: false,
                        displayField: 'ground',
                        editable: false,
                        emptyText: 'Select Ground',
                        forceSelection: true,
                        lazyRender: true,
                        mode: 'remote',
                        store: storeGround,
                        triggerAction: 'all',
                        valueField: 'id',
                        xtype: 'combo'
                    }
                }, {
                    header: 'Team A',
                    sortable: true,
                    dataIndex: 'team_a',
                    editor: {
                        allowBlank: false,
                        displayField: 'team',
                        editable: false,
                        emptyText: 'Select Team A',
                        forceSelection: true,
                        lazyRender: true,
                        mode: 'remote',
                        name: 'team',
                        store: storeTeam,
                        triggerAction: 'all',
                        valueField: 'id',
                        xtype: 'combo'
                    }
                }, {
                    header: 'Score A',
                    sortable: true,
                    dataIndex: 'score_a',
                    editor: {
                        xtype: 'spinnerfield'
                    }
                }, {
                    header: 'Scorer A',
                    sortable: false,
                    dataIndex: 'scorer_a',
                    editor: {
                        xtype: 'textarea'
                    }
                }, {
                    header: 'Team B',
                    sortable: true,
                    dataIndex: 'team_b',
                    editor: {
                        allowBlank: false,
                        displayField: 'team',
                        editable: false,
                        emptyText: 'Select Team B',
                        forceSelection: true,
                        lazyRender: true,
                        mode: 'remote',
                        name: 'team',
                        store: storeTeam,
                        triggerAction: 'all',
                        valueField: 'id',
                        xtype: 'combo'
                    }
                }, {
                    header: 'Score B',
                    sortable: true,
                    dataIndex: 'score_b',
                    editor: {
                        xtype: 'spinnerfield'
                    }
                }, {
                    header: 'Scorer B',
                    sortable: false,
                    dataIndex: 'scorer_b',
                    editor: {
                        xtype: 'textarea'
                    }
                }

            ];

            // Create the pager
            var pagingBar = new Ext.PagingToolbar({
                displayInfo: true,
                displayMsg: '{0} - {1} of {2}',
                emptyMsg: 'No Data',
                pageSize: 50,
                store: store
            });

            // Create the Grid
            var grid = new xg.GridPanel({
                bbar: pagingBar,
                columns: columns,
                height: 500,
                iconCls: 'icon-grid',
                loadMask: {
                    msg: 'Loading data.',
                    enabled: true
                },
                plugins: [rowEditor],
                renderTo: 'dbGrid',
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true
                }),
                store: store,
                stripeRows: true,
                tbar: [{
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function() {
                        var record = new store.recordType({
                            division_id: 1,
                            date: (new Date()).clearTime(),
                            time: '10:00:00',
                            referee: '',
                            ground: '',
                            team_a: '',
                            score_a: '',
                            team_b: '',
                            score_b: ''
                        });

                        grid.suspendEvents();
                        rowEditor.stopEditing();
                        grid.store.insert(0, record);
                        grid.getView().refresh();
                        grid.getSelectionModel().selectRow(0);
                        rowEditor.startEditing(0);
                        grid.resumeEvents();
                    }
                }, {
                    iconCls: 'icon-del',
                    text: 'Remove Fixture',
                    handler: function() {

                        rowEditor.stopEditing();
                        grid.suspendEvents();

                        var record = grid.getSelectionModel().getSelected();

                        if (record) {
                            store.remove(record);
                        }

                        store.reload({}, true);
                        grid.resumeEvents();
                    }
                }],
                title: 'Fixtures',
                viewConfig: {
                    forceFit: true
                }
            });
        }
    };

}();

Answer 1

尝试:

grid.getView().refresh()  

而不是:

store.reload({}, true);