EXTJS 4.2.0.663：帶編輯器網格的緩衝存儲區

Question

帶編輯器網格的緩衝存儲區。

我們一直在使用4.1.1版本並且正在遷移到4.2.0.663。我們擁有包含大量數據的緩衝存儲的編輯網格。編輯器網格類似於行編輯示例（除了它使用緩衝存儲）。但對於電網的附加功能已經遷移後停止，它會引發錯誤

Ext.Error: insert operation not supported into buffered Store.

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { 
     clicksToMoveEditor: 1, 
     autoCancel: false 
    }); 
// create the grid and specify what field you want 
// to use for the editor at each column. 
var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    columns: [{ 
     header: 'Name', 
     dataIndex: 'name', 
     flex: 1, 
     editor: { 
      // defaults to textfield if no xtype is supplied 
      allowBlank: false 
     } 
    }, { 
     header: 'Email', 
     dataIndex: 'email', 
     width: 160, 
     editor: { 
      allowBlank: false, 
      vtype: 'email' 
     } 
    }, { 
     xtype: 'datecolumn', 
     header: 'Start Date', 
     dataIndex: 'start', 
     width: 90, 
     editor: { 
      xtype: 'datefield', 
      allowBlank: false, 
      format: 'm/d/Y', 
      minValue: '01/01/2006', 
      minText: 'Cannot have a start date before the company existed!', 
      maxValue: Ext.Date.format(new Date(), 'm/d/Y') 
     } 
    }, { 
     xtype: 'numbercolumn', 
     header: 'Salary', 
     dataIndex: 'salary', 
     format: '$0,0', 
     width: 90, 
     editor: { 
      xtype: 'numberfield', 
      allowBlank: false, 
      minValue: 1, 
      maxValue: 150000 
     } 
    }, { 
     xtype: 'checkcolumn', 
     header: 'Active?', 
     dataIndex: 'active', 
     width: 60, 
     editor: { 
      xtype: 'checkbox', 
      cls: 'x-grid-checkheader-editor' 
     } 
    }], 
    renderTo: 'editor-grid', 
    width: 600, 
    height: 400, 
    title: 'Employee Salaries', 
    frame: true, 
    tbar: [{ 
     text: 'Add Employee', 
     iconCls: 'employee-add', 
     handler : function() { 
      rowEditing.cancelEdit(); 

      // Create a model instance 
      var r = Ext.create('Employee', { 
       name: 'New Guy', 
       email: 'new@sencha-test.com', 
       start: Ext.Date.clearTime(new Date()), 
       salary: 50000, 
       active: true 
      }); 

      store.insert(0, r); 
      rowEditing.startEdit(0, 0); 
     } 
    }], 
    plugins: [rowEditing], 
}); 

請對什麼是應遵循的方法提出建議。

Answer 1

與行編輯插件有類似的問題。看起來這個問題與緩衝存儲內部結構有關。要解決此問題，您可以：

1. 擴展行編輯插件並更改插入數據的方式。在插入數據的重載當前頁之後說...
2. 從使用緩衝存儲器切換到爲網格使用bufferedrenderer插件。這個插件的快速瀏覽你可以在這裏找到：bufferedrenderer
3. 做一些更深入的研究，可能有一個解決方案，即使沒有消除緩衝的商店。

我我的情況下，我會選擇第二種方式，除非我在ExtJS的4.2緩衝存儲的變化澄清一切......

UPDATE：看來，緩衝專賣店在4.2有限functionalty。他們仍然是越野車。現在有這個問題：commit bug

Answer 2

我也有這個問題後遷移到Ext Js 4.2。我通過創建緩衝存儲的臨時副本而無需緩衝來解決此問題。應用於您的代碼，如下所示：

tbar: [{ 
    handler : function() { 
     rowEditing.cancelEdit(); 

     // Create a model instance 
     var r = Ext.create('Employee', { 
      name: 'New Guy', 
      email: 'new@sencha-test.com', 
      start: Ext.Date.clearTime(new Date()), 
      salary: 50000, 
      active: true 
     }); 

     var storeClassName = Ext.getClassName(store); 
     var tempStore = Ext.create(storeClassName, { buffered: false }); 
     tempStore.add(r); 
     tempStore.sync({ 
      success: function(args) { 
       // reload your grid and scroll to the position of the new record 
       // e.g. 
       store.data.clear(); 
       store.load({ 
         success: function() { 
          grid.view.bufferedRenderer.scrollTo(args.response.indexOfNewRecord, true); 
          rowEditing.startEdit(0, 0); 
         } 
       });      
      } 
     }); 
    } 
}], 

缺少的是索引的定義。我從我的web服務中獲取同步響應，因此我可以滾動到總共數據集中的索引位置。

Answer 3

需要注意的一件事是，儘管創建無緩衝存儲的解決方法在您可以通過代碼執行時效果很好，但您仍有一些網格編輯元素無法獲得此機會 - 例如，使用單元格或者在具有緩衝存儲的網格上的行編輯插件不再適用於4.2。

最後，我們最終回到4.1重新獲得緩衝存儲功能，並將在再次升級之前監視未來ExtJS更新中會發生的情況。我建議任何人在大型遠程數據庫上使用緩衝存儲（在頁面加載過程中不能接受讀取整個數據庫），請仔細考慮4.2升級。