Ext4.1 Grid 分页查询

转载：http://blog.csdn.net/zyujie/article/details/16362747

最近用Ext4.1自己做了做项目的练习：把一些知识点，在这里记录下来了！

上面一个form表单，用作添加用户信息，包含了一些验证技巧。下面是一个带查询参数的分页Grid。

[javascript] view plaincopy

1. /**预加载的组件**/
2. Ext.require([
3. 'Ext.grid.*',
4. 'Ext.data.*',
5. 'Ext.util.*',
6. 'Ext.toolbar.Paging',
7. 'Ext.ModelManager',
8. 'Ext.tip.QuickTipManager',
9. 'Ext.layout.container.Border'
10. ]);
11. Ext.onReady(function(){
12. Ext.Ajax.timeout = 60000; // 60秒
13. var pageSize = 10;
14. //自定义正则表达式验证
15. Ext.apply(Ext.form.VTypes,{
16. phonecheck : function(val) {
17. return /(^[1][358][0-9]{9}$)/.test(val);
18. },
19. phonecheckText : "号码不匹配!"
20. },{
21. usercheck : function(val) {
22. //var reg = /(^[1][358][0-9]{9}$)/;
23. //if(reg.test(val)==false){
24. //  return false;
25. //}
26. return /^[a-z]+$/.test(val);
27. },
28. usercheckText : "格式不正确，只接受小写字母！"
29. });
30. var form = Ext.create('Ext.form.Panel', {
31. id:'userForm',
32. title:'添加系统用户',
33. layout: 'column',
34. defaultType: 'textfield',
35. width: '100%',
36. height: 140,
37. bodyStyle: 'padding:5px',
38. animCollapse:true,
39. region : 'north',
40. collapsible:true,
41. border: true,
42. frame: true,
43. plan: true,
44. items: [{
45. columnWidth: .3,
46. id:'userId',
47. name:'userId',
48. fieldLabel: '用户编号',
49. fieldWidth: 30,
50. labelStyle : "text-align:right;width:30;padding-right:10px;",
51. blankText: '请输入用户编号',
52. allowBlank: false,
53. maxLength:18,
54. minLength:5,
55. vtype:'usercheck'
56. },{
57. id:'userName',
58. name:'userName',
59. fieldLabel: '用户姓名',
60. fieldWidth: 30,
61. labelStyle : "text-align:right;width:30;padding-right:10px;",
62. blankText: '请输入用户名',
63. allowBlank: false,
64. maxLength:18,
65. minLength:5,
66. columnWidth: .3
67. },{
68. id:'password',
69. name:'password',
70. fieldLabel: '密码',
71. fieldWidth: 30,
72. inputType:'password',
73. labelStyle : "text-align:right;width:30;padding-right:10px;",
74. blankText: '请输入密码',
75. allowBlank: false,
76. columnWidth: .3
77. },{
78. id:'userMail',
79. name:'userMail',
80. fieldLabel: '电子邮箱',
81. fieldWidth: 30,
82. labelStyle : "text-align:right;width:30;padding-right:10px;",
83. blankText: '请输入电子邮箱',
84. allowBlank: false,
85. vtype: 'email',
86. style: {
87. marginTop: '10px'
88. },
89. columnWidth: .3
90. },{
91. id:'phoneno',
92. name:'phoneno',
93. fieldLabel: '手机号',
94. fieldWidth: 30,
95. labelStyle : "text-align:right;width:30;padding-right:10px;",
96. blankText: '请输入手机号',
97. allowBlank: false,
98. vtype:'phonecheck',
99. style: {
100. marginTop: '10px'
101. },
102. columnWidth: .3
103. },{
104. id:'remark',
105. name:'remark',
106. fieldLabel: '备注信息',
107. fieldWidth: 30,
108. labelStyle : "text-align:right;width:30;padding-right:10px;",
109. blankText: '请输入备注信息',
110. allowBlank: true,
111. style: {
112. marginTop: '10px'
113. },
114. columnWidth: .3
115. }],
116. buttons: ['->', {
117. text: '添加用户',
118. iconCls: 'icon-add',
119. formBind: true,
120. handler:function(){
121. var form = Ext.getCmp('userForm').getForm();
122. if(form.isValid()){
123. form.submit({
124. url: '/mymis/system/userinfo/addUserInfo.action',
125. method:'post',
126. waitTitle: "请稍候",
127. waitMsg : '提交数据，请稍候...',
128. success: function(form, action) {
129. Ext.Msg.alert('Success', '保存成功!');
130. var flag = action.result.reason;
131. if(flag == "exists"){
132. Ext.Msg.alert('警告', '系统中已存该用户编号，请重新输入！');
133. }else{
134. Ext.Msg.alert('提示', '用户信息成功添加!');
135. var grid = Ext.getCmp("myGrid");
136. var store = grid.getStore();
137. store.load({ params: { start: 0, limit: pageSize} });
138. grid.reconfigure();
139. }
140. },
141. failure: function(form, action) {
142. Ext.Msg.alert('错误', '用户信息添加失败，请联系管理员！');
143. }
144. });
145. }
146. }
147. },'-',{
148. text: '重  置',
149. iconCls: 'icon-reset',
150. handler:function(){
151. Ext.getCmp('userForm').getForm().reset();
152. }
153. }]
154. });
155. /**grid**/
156. Ext.define('MsgList', {
157. extend: 'Ext.data.Model',
158. fields: [
159. {name: 'USER_ID',  type: 'string'},
160. {name: 'USER_NAME',  type: 'string'},
161. {name: 'USER_MAIL',  type: 'string'},
162. {name: 'PHONE_NO',  type: 'string'}
163. ],
164. });
165. var myStore = Ext.create('Ext.data.Store', {
166. id:'myStore',
167. model: 'MsgList',
168. pageSize:pageSize,
169. autoLoad: true,
170. remoteSort: true,
171. proxy: {
172. type: 'ajax',
173. url : '/mymis/system/userinfo/queryUserInfo.action',
174. reader: {
175. type: 'json',
176. root: 'rows',
177. totalProperty: 'total'
178. },
179. simpleSortMode: true
180. },
181. });
182. var titleBar = Ext.create('Ext.toolbar.Toolbar', {
183. renderTo: Ext.getBody(),
184. width : 600,
185. layout: {
186. overflowHandler: 'Menu'
187. },
188. items: [{
189. xtype:'textfield',
190. id:'searchMsg',
191. name: 'searchMsg',
192. fieldLabel: '请输入查询条件',
193. allowBlank: true
194. },'-',{
195. xtype:'button',
196. text:'查询',
197. iconCls: 'icon-search-form',
198. handler: function(){
199. var txtSearch = Ext.String.trim(Ext.getCmp("searchMsg").getValue());
200. var grid = Ext.getCmp("myGrid");
201. var store = grid.getStore();
202. //var pagingTB = Ext.getCmp("pagingBT");
203. store.load({ params: { start: 0, limit: pageSize,searchMsg: txtSearch} });
204. grid.reconfigure();
205. //alert(pagingTB);
206. //pagingTB.doRefresh();
207. }
208. }]
209. });
210. var grid = Ext.create('Ext.grid.Panel', {
211. id:'myGrid',
212. tbar:titleBar,
213. store: myStore,
214. frame: true,
215. region:'center',
216. border: true,
217. split: true,
218. loadMask:{msg:"数据加载中，请稍等..."},
219. //collapsible: true,
220. //autoHeight : true,
221. columns: [
222. { header: '编号', dataIndex: 'USER_ID', flex: 2 },
223. { header: '姓名', dataIndex: 'USER_NAME', flex: 6 },
224. { header: '邮箱', dataIndex: 'USER_MAIL', flex: 3 },
225. { header: '手机号', dataIndex: 'PHONE_NO', flex: 3 }
226. ],
227. //features: [{ftype:'grouping'}],
228. width: '100%',
229. height: Ext.getBody().getHeight() - 140,
230. //loadMask: true,
231. bbar: Ext.create('Ext.PagingToolbar', {
232. id:'pagingBT',
233. store: myStore,
234. displayInfo: true,
235. displayMsg: '显示 第 {0} - {1} 条记录 一共 {2} 条记录',
236. emptyMsg: "没有一第记录显示"
237. })
238. });
239. Ext.create('Ext.container.Viewport',{
240. layout : 'border',
241. items : [form,grid]
242. });
243. //带自定义参数的分页
244. myStore.on('beforeload', function (store, options) {
245. var searchMsg = Ext.getCmp('searchMsg').getValue();
246. Ext.apply(store.proxy.extraParams, {searchMsg: searchMsg});
247. });
248. myStore.load({ params: { start: 0, limit: pageSize} });
249. });

添加用户的Form表单提交Action：