2012-04-19 71 views
1

在我的例子中記錄的數據在網格中的順序如下:在需要的細胞Extjs 3.2。網格視圖商店相關

  1. 添加所需的空記錄量
  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

回答

1

或者你也可以秀後刷新的GridView

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

它看起來像GridView的聽衆對商店的「添加」事件未添加到視圖,直至在GridView的init()(這是從電網的onRender()調用)被調用。網格渲染時會發生這種情況(win.show())。您沒有在#2(插入 - 插入 - 顯示)中發生錯誤,因爲它從未在GridView的processRows()中碰到Ext.fly(rows[0]).addClass(this.firstRowCls);

我改變了代碼一點在GridView的打印出一些日誌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() 

正如你可以看到的唯一情況,它實際上將兩個項目添加到網格(和GridView)在show-insert-insert案例中。目前爲止我找到的最佳解決方案只是做

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

在開頭。到目前爲止我還沒有找到更好的解決方案。我希望這有幫助。