1

私の例では、グリッドにデータを記録する順序は次のとおりです。

  1. 必要な量の空のレコードを追加
  2. 必要なセルの値を変更する

これは、サーバーまたはテーブル全体からの変更のみを送信するために必要です。場合によっては、変更がないか、一部のデータが削除されることさえあります。しかし、データは 2 つのステップで変更する必要があるという主な考え方です。問題は、データの書き換えがコール レンダリングで異なるタイミングで発生する可能性があることです。場合によっては、エラーが発生します。

//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 関数の実行順序を保証することはできません。

私の質問は次のとおりです。 ストア内の変更がビュー ステートに依存するのはなぜですか?また、これを防ぐにはどうすればよいでしょうか?

テストケース

4

2 に答える 2

1

または、表示後に GridView を更新できます

win.show();
grid.getView().refresh();
于 2012-04-20T10:42:40.973 に答える
1

GridView の init() (これは Grid からonRender()呼び出されます) が呼び出されるまで、ストアの「追加」イベントに対する GridView のリスナーはビューに追加されないようです。これは、グリッドがレンダリングされる (win.show()) ときに発生します。#2 (insert-insert-show) でエラーが発生していませんでした。これExt.fly(rows[0]).addClass(this.firstRowCls);は、GridView の にヒットしたことがないためprocessRows()です。

コードを少し変更して、GridViews init と onAdd (ストアの追加イベントのハンドラー) でいくつかのログを出力しました。

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

以下は、3 つの異なるケースのコンソールです。

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

最初に。これまでのところ、より良い解決策は見つかりませんでした。これが役立つことを願っています。

于 2012-04-19T18:40:56.930 に答える