Extjs 3.2。グリッドビュー・ストアの相関

Question

グリッドのデータを記録するために私の例では、次の通りである：空のレコードの

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

実行の挿入と表示の順序は、異なる非同期要求から呼び出すことができるため保証できません。

私の質問は次です。 ストアの変更はビューの状態によって異なりますが、どうすればこのことから自分自身を守ることができますか？

test case

Answer 1

それとも、ショーの後のGridViewをリフレッシュすることができ

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

Answer 2

GridViewのinitは（）（これは、グリッドのonRender()から呼ばれる）と呼ばれるまで、店の「追加」イベントのGridViewのリスナーがビューに追加されていないように見えます。これは、グリッドがレンダリングされるときに発生します（win.show（））。 GridViewのprocessRows()のExt.fly(rows[0]).addClass(this.firstRowCls);に決して衝突しなかったので、＃2（insert-insert-show）でエラーが表示されませんでした。

私は、コードにinitとonAdd（店のためのハンドラがイベントを追加）GridViewsにいくつかのログをプリントアウトするためにビットを変更：ここで

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

です。私はこれまでにもっと良い解決策を見いださなかった。私はこれが役立つことを願っています