扩充GridPanel,附带分页选中状态，实现快速构建一个功能齐全的Grid

扩展GridPanel,附带分页选中状态，实现快速构建一个功能齐全的Grid

使用简单的配置就可以实现　store, columns, selModel , pagingToolbar ,?

最重要的一点是实现分页时可以保持前一页的选中状态，?
　但是要遵守其中的一些规定，至于哪些规定呢，看下面的代码就知道啦！?
　代码如下：?
Java代码??

1. /*?
2. ?*?@class?Ext.ux.grid.CollectGrid?
3. ?*?@version:?1.0?
4. ?*?@author:?chengbao_zhu?
5. ?*?
6. ?*?Example?:?Ext.onReady(function(){?????
7. ??????????????var?CM_JR_Record?=?[?
8. ??????????????{?
9. ?????????????????dataIndex:"",?//the?ColumnModel?options?alse?the?JsonReader?mapping?(required)?
10. ?????????????????header:"",????//the?ColumnModel?options?(required)??
11. ?????????????????visiable:?false,?//my?expands?option?to?show?the?header?or?not?(options)?
12. ?????????????????type:?date,???//the?type?of?this?data?(options)?
13. ?????????????????...another?options?of?ColumnModel?
14. ??????????????},{????
15. ?????????????????dataIndex?:?'',????
16. ?????????????????header?:?"",????
17. ?????????????????width?:?130????
18. ??????????????}];??
19. ??????????????
20. ??????????????var?myGrid?=?new?Ext.ux.grid.CollectGrid({?
21. ??????????????????url?:?'MyJsp.jsp',??????????//?the?store?load?url?(required)?
22. ??????????????????CM_JR_Record:?CM_JR_Record,?//.....(required)?
23. ??????????????????rowNumber:true,?????????????//true?to?add?a?Ext.grid.RowNumberer,defalut(true)?
24. ??????????????????checkBox:true,??????????????//true?to?add?a?Ext.grid.CheckBoxSelectionModel,default(true)?
25. ??????????????????pagingBar:true,?????????????//true?to?add?a?Ext.PagingToolBar,default(true)?
26. ??????????????????pagingConfig:objcet,????????//config?pagingToolBar?if?pagingBar?is?true?
27. ??????????????????keepSelectedOnPaging:?true,?//true?to?FireEvent?when?you?paging?to?keep?the?state?of?record?selected?
28. ??????????????????recordIds?:?new?Array()?,???//?store?seleced?ids?when?keepSelectedOnPaging?is?true?
29. ??????????????????idColName?:'stat_id',???????//the?id?column?name?
30. ???????????????????
31. ??????????????????...another?
32. ??????????????????width?:?700,??
33. ??????????????????height:?600,??
34. ???????????????????
35. ??????????????????title?:?'This?is?My?Grid'??,?
36. ??????????????????renderTo:?'my_grid'?
37. ??????????????});?
38. ???????????????
39. ??????????????myGrid.store.load({params:{start:0,limit:myGrid.pagingConfig.pageSize}});?
40. ??????????????//myUxGrid.render();?
41. ??????????????myGrid.on('rowclick',function(grid,rowIndex,e){?
42. ????????????????alert(grid.getStore().getAt(rowIndex).data['stat_id']);?
43. ??????????????}?
44. ??????????????);?
45. ?????????}?
46. ?????????);?
47. ?*/??
48. ??
49. ???
50. Ext.namespace('Ext.ux.grid');??
51. ??
52. Ext.ux.grid.CollectGrid?=?Ext.extend(Ext.grid.GridPanel,{??
53. ??????
54. ????/*?
55. ?????*?true?to?keep?the?records?selected?when?you?paging?
56. ?????*?@default(false)?
57. ?????*?@type:?boolean?
58. ?????*/??
59. ????keepSelectedOnPaging:?false,??
60. ??????
61. ????/*?
62. ?????*?the?array?to?store?the?record?id?
63. ?????*?@type:?array?
64. ?????*/??
65. ????recordIds:new?Array(),??
66. ??????
67. ????/*?
68. ?????*?set?your?id?Column?Name?
69. ?????*?@default?:?this.CM_JR_Record[0].dataIndex?
70. ?????*/??
71. ????idColName:'',??
72. ??????
73. ????/*?
74. ?????*?set?this.store.load?url;?
75. ?????*?@type:?string?
76. ?????*/??
77. ????url:?'',??
78. ??????
79. ????/*?
80. ?????*?show?the?rowNumber?or?not?
81. ?????*?@type:?boolean?
82. ?????*?@default:?true?
83. ?????*/??
84. ????rowNumber?:?true,??
85. ??????
86. ????/*?
87. ?????*?set?the?grid?sm,if?checkBoxSelection=true,sm=CheckBoxSelectionModel?
88. ?????*?else?sm=RowSelectionModel,default?to?true;?
89. ?????*?@type:?boolean?
90. ?????*/??
91. ????checkBox:?true,??
92. ??????
93. ????/*?
94. ?????*?set?the?grid?cm?array;?
95. ?????*?set?the?JsonReader?record;?
96. ?????*??
97. ?????*?format:?[{name:'',header:'',visiable:'',...another?cm?options},{}],?
98. ?????*?@name=dataIndex?
99. ?????*?@visiable:?set?this?record?to?the?cm(grid?header)?default(true)?
100. ?????*?@type:?array?(records)?
101. ?????*/???
102. ????CM_JR_Record:?null,??
103. ??????
104. ????/*?
105. ?????*?true?to?add?a?bottom?paging?bar?
106. ?????*?@defalut:?true?
107. ?????*?@type:?boolean?
108. ?????*/??
109. ????pagingBar:?true,??
110. ??????
111. ????/*?
112. ?????*?config?paging?bar?if?pagingBar?set?true?
113. ?????*?@type:?object?
114. ?????*?@default:?{pageSize:?20,store:?this.store,displayInfo:?true,?
115. ?????*????????????displayMsg:?'当前记录数:?{0}?-?{1}?总记录数:?{2}',?
116. ?????*????????????emptyMsg:?'<b>0</b>?条记录'}?
117. ?????*/??
118. ????pagingConfig:{??
119. ????????pageSize:?20,??
120. ????????//store:?this.store,??
121. ????????displayInfo:?true,??
122. ????????displayMsg:?'当前记录数:?{0}?-?{1}?总记录数:?{2}',??
123. ????????emptyMsg:?'<b>0</b>?条记录'??
124. ????},??
125. ??????
126. ????viewConfig:{??
127. ????????forceFit:?true??
128. ????},??
129. ??????
130. ????//private??
131. ????initComponent:?function(){??
132. ????????if(this.CM_JR_Record){??
133. ????????????this.init_SM_CM_DS();??
134. ????????}??
135. ????????if(this.pagingBar){??
136. ????????????this.init_PagingBar();??
137. ????????}??
138. ????????if(this.keepSelectedOnPaging){??
139. ????????????this.init_OnPaging();??
140. ????????}??
141. ????????Ext.ux.grid.CollectGrid.superclass.initComponent.call(this);??
142. ????},??
143. ??????
144. ????/*?
145. ?????*?init?the?grid?use?the?config?options?
146. ?????*?@return:?void?
147. ?????*?@params:?none?
148. ?????*/??
149. ????init_SM_CM_DS:?function(){??
150. ????????var?gCm?=?new?Array();??
151. ????????var?gRecord?=?new?Array();??
152. ??????????
153. ????????if(this.rowNumber){??
154. ????????????gCm[gCm.length]=new?Ext.grid.RowNumberer();??
155. ????????}??
156. ????????if(this.checkBox){??
157. ????????????var?sm?=?new?Ext.grid.CheckboxSelectionModel();??
158. ????????????gCm[gCm.length]?=?sm;??
159. ????????????this.selModel?=?sm;??
160. ????????}??
161. ??????????
162. ????????for(var?i=0;i<this.CM_JR_Record.length;i++)??
163. ????????{??
164. ????????????var?g?=?this.CM_JR_Record[i];??
165. ????????????if(g.visiable?||?g.visiable=='undefined'?||?g.visiable==null){??
166. ????????????????gCm[gCm.length]?=?g;??
167. ????????????}??
168. ??????????????
169. ????????????gRecord[gRecord.length]={??
170. ????????????????name:?g.dataIndex,??
171. ????????????????type:?g.type?||?'string'???
172. ????????????}??
173. ????????}??
174. ??????
175. ????????//create?grid?columnModel??
176. ????????this.cm?=?new?Ext.grid.ColumnModel(gCm);??
177. ????????this.cm.defaultSortable?=?true;??
178. ??????????
179. ????????//create?a?jsonStore??
180. ????????this.store?=?new?Ext.data.Store({??
181. ??????????
182. ????????????proxy:?new?Ext.data.HttpProxy({??
183. ????????????????url:?this.url,??
184. ????????????????method:?'post'??
185. ????????????}),??
186. ????????????reader:new?Ext.data.JsonReader({??
187. ????????????????totalProperty:?'totalProperty',??
188. ????????????????root:?'root'??
189. ????????????},??
190. ????????????Ext.data.Record.create(gRecord)??
191. ????????????)??
192. ??????????
193. ????????});??
194. ??????????
195. ??????????
196. ????????this.pagingConfig.store?=?this.store;??
197. ??????????
198. ????????if(this.pagingBar){??
199. ????????????this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});??
200. ????????}else{??
201. ????????????this.store.load();??
202. ????????}??
203. ??????????
204. ????},??
205. ??????
206. ????/*?
207. ?????*?创建并初始化paging?bar?
208. ?????*/??
209. ????init_PagingBar:?function(){??
210. ????????var?bbar?=?new?Ext.PagingToolbar(this.pagingConfig);??
211. ????????this.bbar?=?bbar;??
212. ????},??
213. ??????
214. ????init_OnPaging:?function(){??
215. ??????????
216. ????????this.idColName?=?this.CM_JR_Record[0].dataIndex?;//默认第一列为ID列??
217. ??????????
218. ????????this.selModel.on('rowdeselect',function(selMdl,rowIndex,rec?){??
219. ??????????
220. ??????????????
221. ????????????????for(var?i=0;i<this.recordIds.length;i++)??
222. ????????????????{??
223. ????????????????????if(rec.data[this.idColName]?==?this.recordIds[i]){??
224. ????????????????????????this.recordIds.splice(i,1);???????????????????????
225. ????????????????????????return;??
226. ????????????????????}??
227. ????????????????}??
228. ??????????????
229. ???????????????
230. ???????},this);??
231. ?????????
232. ???????this.selModel.on('rowselect',function(selMdl,rowIndex,rec){??
233. ????????????if(this.hasElement(this.recordIds)){??
234. ????????????????for(var?i=0;i<this.recordIds.length;i++){??
235. ????????????????????if(rec.data[this.idColName]?==?this.recordIds[i]){??
236. ????????????????????????return;??
237. ????????????????????}??
238. ????????????????}??
239. ????????????}?????
240. ??????????????
241. ????????????this.recordIds.unshift(rec.data[this.idColName]);??
242. ??????????????
243. ???????},this);??
244. ?????????
245. ???????this.store.on('load',function(st,recs){??
246. ????????????if(this.hasElement(this.recordIds)){??
247. ????????????????st.each(function(rec){??
248. ????????????????????Ext.each(this.recordIds,function(item,index,allItems){??
249. ????????????????????????if(rec.data[this.idColName]?==?item){??
250. ????????????????????????????this.selModel.selectRecords([rec],true);??????????????????????????
251. ????????????????????????????return?false;??
252. ????????????????????????}??
253. ????????????????????},this);??
254. ????????????????},this);??????
255. ????????????}?????
256. ???????},this);??
257. ???????????????
258. ????},??
259. ??????
260. ????hasElement?:?function(recIds){??
261. ????????if(recIds.length?>?0)??
262. ????????????return?true;??
263. ????????else??
264. ????????????return?false;??
265. ????}??
266. ??????
267. }??
268. )??

• cgrid.rar?(2.3 KB)

查看更多 下一篇