Question

在我的例子中，网格中记录数据的顺序如下：

添加所需数量的空记录
更改所需单元格中的值

这是必要的，以便仅从服务器传输整个表的更改。在某些情况下，可能没有任何变化，甚至可能会删除某些数据。但数据必须分两步改变的主要思想。问题是数据的重写可以在调用呈现的不同时间发生。在某些情况下，我们会有错误。

//error
store.insert(0, new Rec());   
win.show();         
store.insert(0, new Rec());

//no error
store.insert(0, new Rec());     
store.insert(0, new Rec());  
win.show();         

//no error
win.show();         
store.insert(0, new Rec());   
store.insert(0, new Rec());

我们无法保证执行insert和show函数的顺序，因为它们可以从不同的异步请求中调用。

我的问题出在下一个; 为什么商店中的更改取决于视图状态以及我们如何保护自己？

test case

Answer 1

看起来GridView的商店“add”事件的监听器没有被添加到视图中，直到调用了GridView的init（）（这是从Grid的onRender()调用的）。渲染网格时会发生这种情况（win.show（））。您没有在＃2（插入 - 插入 - 显示）上收到错误，因为它从未到达GridView的Ext.fly(rows[0]).addClass(this.firstRowCls);中的processRows()。

我稍微更改了代码以在GridViews init和onAdd（商店的add事件的处理程序）中打印出一些日志记录：

Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel({
        columns: [{
                dataIndex: 'common',
                editor: new Ext.form.TextField({allowBlank: false})
            }]
    });

    var store = new Ext.data.Store({
        reader: new Ext.data.JsonReader({
            record: 'plant',
            fields: [{name: 'common', type: 'string'}]
        })
    });

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        region: "center",
        view: new Ext.grid.GridView({
            init : function(grid) {
                console.log("\tinit()");
                this.grid = grid;

                this.initTemplates();
                this.initData(grid.store, grid.colModel);
                this.initUI(grid);
            },
            onAdd : function(store, records, index) {
                console.log("\t\tadding: ", records[0].id);
                this.insertRows(store, index, index + (records.length-1));
            }
        })
    });

    var win = new Ext.Window({
        layout: "border",
        items: [grid],
        width : 300,
        height : 300
    });

    var Rec = grid.getStore().recordType;
  /*   
    console.log("show-insert-insert");
    win.show();

    console.log("\t1st insert");
    store.insert(0, new Rec());

    console.log("\t2nd insert");
    store.insert(0, new Rec());     
   */
    console.log("insert-insert-show");
    console.log("\t1st insert");
    store.insert(0, new Rec());

    console.log("\t2nd insert");
    store.insert(0, new Rec());

    console.log("win.show()");
    win.show();
});

以下是来自三种不同情况的控制台：

show-insert-insert
    init()
    1st insert
        adding: ext-record-1
    2nd insert
        adding: ext-record-2
    win.show()

insert-show-insert
    1st insert
    win.show()
    init()
    2nd insert
        adding: ext-record-2

Ext.fly(rows[0]) is null
[Break On This Error]   
Ext.fly(rows[0]).addClass(this.firstRowCls);
ext-all-debug.js (line 43959

insert-insert-show
    1st insert
    2nd insert
    win.show()
    init()

正如您所看到的那样，它实际上将两个项目添加到Grid（和GridView）的唯一情况是在show-insert-insert情况下。到目前为止，我发现的最佳解决方案就是

win.show();
win.hide();

一开始。到目前为止，我还没有找到更好的解决方案。我希望这会有所帮助。

Answer 2

或者您可以在show

之后刷新GridView

win.show();
grid.getView().refresh();

Extjs 3.2。网格视图 - 存储关联

2 个答案: