在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" ;
                }

果然只显示了二行！成功！

剩下的工作就简单了，不再细说。

1楼f3630451745天前 10:46

文字表述方面该多练练