在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" ;
}
果然只显示了二行!成功!
剩下的工作就简单了,不再细说。