使用Ext.grid.Panel.reconfigure（）打破網格RowEditing插件

我正在創建一個extjs網格面板，它具有用戶可配置的一組列。爲此，Ext.grid.Panel組件提供了一個方便的reconfigure(store, columns)方法。使用Ext.grid.Panel.reconfigure（）打破網格RowEditing插件

此方法按預期方式工作，重新配置網格的商店/列而不必完全銷燬和重新創建網格。但是，如果您使用Ext.grid.plugins.RowEditing插件提供內嵌行編輯，則在使用新列重新配置網格後，這些列將不同步。

由於RowEditing插件已經在監視添加/刪除/調整列的大小並正確處理這些列，所以這特別令人沮喪。我懷疑這只是目前4.1版本ExtJs的一個疏漏。

我想要的是RowEditor更新其編輯器列表和寬度，當網格重新配置新列時不破壞/重新創建網格/視圖。

經過大量的谷歌搜索後，我並不孤單尋找一個可以輕鬆重新配置的列列表和內聯編輯支持。

來源

2012-08-15 BenSwayne

Ext.grid.Panel提供了一個'reconfigure'事件，在調用reconfigure()方法後觸發。但是，在目前的4.1版本的ExtJs中，RowEditing插件沒有涉及到這個事件！

看來我們需要做我們自己的重擔。最終的解決方案非常簡單，但需要幾個小時才能達到最終的代碼。

RowEditing插件創建了RowEditor組件的一個實例（知道了嗎？將這兩個單獨存放在您的腦海中，類似的名稱但不同的組件！）。 RowEditing插件是連接到網格中的東西，以掛鉤必要的事件以知道何時顯示行編輯器等。RowEditor是可視組件，可在您的行上彈出用於在網格中進行內聯編輯的可視組件。

起初我嘗試重新配置行編輯器可能有十幾種不同的方式。我試着調用內部方法，初始化方法，調整方法等等......然後我注意到了關於這個架構的一些不錯的東西。 RowEditor實例有一個內部引用，其中包含一個用於獲取行編輯器和延遲加載的方法（如果需要）。這是關鍵！

您可以在不破壞RowEditing插件（不能動態加載/卸載插件）的情況下銷燬RowEditor，然後重新創建RowEditor。

還有一個問題，就是Ext網格的編輯插件爲每個列添加了一些擴展方法，分別用於獲取/設置每列的正確編輯器類型的getEditor()和setEditor()。當你重新配置網格時，任何應用的擴展方法都「消失」了（你有一些從未應用這些方法的新列）。因此，您還需要通過調用插件上的initFieldAccessors()方法來重新應用這些訪問器方法。

這裏是我的網格面板的重新配置事件處理程序：

/** 
* @event reconfigure 
* Fires after a reconfigure. 
* @param {Ext.grid.Panel} this 
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method 
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method 
*/ 
onReconfigure: function (grid, store, columnConfigs) { 
    var columns = grid.headerCt.getGridColumns(), 
     rowEditingPlugin = grid.getPlugin('rowEditor'); 

    // 
    // Re-attached the 'getField' and 'setField' extension methods to each column 
    // 
    rowEditingPlugin.initFieldAccessors(columns); 

    // 
    // Re-create the actual editor (the UI component within the 'RowEditing' plugin itself) 
    // 
    // 1. Destroy and make sure we aren't holding a reference to it. 
    // 
    Ext.destroy(rowEditingPlugin.editor); 
    rowEditingPlugin.editor = null; 
    // 
    // 2. This method has some lazy load logic built into it and will initialize a new row editor. 
    // 
    rowEditingPlugin.getEditor(); 
}

我使用配置添加監聽這在我的網格面板：

listeners: { 
    'reconfigure': Ext.bind(this.onReconfigure, this) 
}

來源

2012-08-15 03:49:04 BenSwayne

什麼是「我」定義爲？我想你在某處有'我=這個'？ – 2012-09-26 16:20:00

@AramKocharyan是的，對不起，在我的許多例程開始時，我使用'var me = this'行來消除'this'的含義，特別是在閉包中。這條線特別糟糕，因爲我同時使用了我和這個！我將編輯答案，僅在本文中使用'this'。 – BenSwayne 2012-09-26 16:24:38

謝謝！這就是我也嘗試過的，但是因爲我在與'listeners'相同的對象中定義了'onReconfigure'，所以在該階段不可用。這兩個屬性在不同的地方，如一個子類？ – 2012-09-26 16:31:42

看來這個問題已被校正在最新的ExtJS版本中 - 版本4.1.1a至少集成了類似於Ben Swayne實現的功能。

來源

2013-02-07 20:10:58 Triptoph

使用Ext.grid.Panel.reconfigure（）打破網格RowEditing插件

回答

相關問題