Extjs實作多個Grid使用同一個Store，但顯示不同的内容

在Extjs開發應用的過程中，遇到這樣的要求：存在一個資料庫表的内容（比較有字段A1,A2,A3,A4,B1,B2,B3,B4,C1,C2,C3,C4,D1,D2,D3,D4），在前端顯示時，要在grid1中顯示部分内容的資料(如A1,A2,A3,B1,B2,B3)，在Grid2中顯示另一部分内容的資料（C1,C2,C3,D1,D2,D3），在第三個Grid3中顯示全部的資料的另外一些字段(如A1,A4,B1,B4,C1,C4,D1,D4)；另外，grid1，grid2中新增列時，Grid3也要自動顯示新增的資料。

為了實作這個功能，使用3個store，并監聽grid1和grid2的store的新增事件，當然應該是實作所需要的功能的。

但我想的是，如果三個grid使用同的一個store實作該功能的話，會更好：1、不用多個store同步資料，減少出錯的機會；2、儲存時更友善，因為隻有一個Store。

因為我相信Extjs會提供相應的實作，是以我就開始各種嘗試和網上搜尋。一個個的檢視grid和Store的配置、屬性、方法、事件，好像都不行；google上進行各種搜尋，但沒有找到有價值的參考資料。最後，一個偶然的機會，看到了gridview的getRowClass方法，api文檔中說“Override this function to apply custom CSSclasses to rows during rendering”，是說可以動态的給grid的row設定自定義的css！這樣不就是可以通過給row設定自定義的css來實作部分顯示store中内容了嗎？嘗試建立style:

.hide{      display:none    }
           

在grid的viewConfig中設定：

getRowClass: function(record,rowIndex, rowParams, store){
                    if(rowIndex > 1)
                        return "hide" ;
                }
           

果然隻顯示了二行！成功！

剩下的工作就簡單了，不再細說。