extjs常用增删改查操作.docx-资料库

jiangbo110119-9824374-16359647335172108481.docx.pdf-第1页.png

第1页 / 共90页

jiangbo110119-9824374-16359647335172108481.docx.pdf-第2页.png

第2页 / 共90页

jiangbo110119-9824374-16359647335172108481.docx.pdf-第3页.png

第3页 / 共90页

jiangbo110119-9824374-16359647335172108481.docx.pdf-第4页.png

第4页 / 共90页

jiangbo110119-9824374-16359647335172108481.docx.pdf-第5页.png

第5页 / 共90页

jiangbo110119-9824374-16359647335172108481.docx.pdf-第6页.png

第6页 / 共90页

jiangbo110119-9824374-16359647335172108481.docx.pdf-第7页.png

第7页 / 共90页

jiangbo110119-9824374-16359647335172108481.docx.pdf-第8页.png

第8页 / 共90页

extjs 常用增删改查操作代码版权声明：本文为博主原创文章，未经博主允许不得转载。 1. //设置每页显示的行数默认为 10 2. var QUERY_PAGE_SIZE = 10; 3. //SearchQueryForm():绘制查询表单 4. function searchQueryForm(){ 5. 6. 7. 8. 9. 10. 11. //form 使用的时候建议设为局部变量，可以通过 Ext.getCmp(“”)去获取 form var queryForm = new Ext.FormPanel({ id:'queryForm', //指定 queryForm 的 Id renderTo:'searchPanel', //指向 form 所在的 div 层 labelWidth:70, //label 标签的 width 占页面的百分比 region:'north', border:false, //以显示面板的 body 元素的边界，虚假隐藏起来（默认为 true）界） badyBorder:false, //显示面板的 body 元素，假以隐藏它（默认为 true 的内部边 labelAlign:'right', //label 标签的对齐方式 frame:true, //自定义面板的圆形边界，边界宽度 1px。默认为 false title:'用户信息查询', //form 的标题 //buttons:在 FormPanel 中按钮的集合 buttons:[ {handler:addForm,text:'新增'}, {handler:submitForm,text:'查询'}, {handler:resetForm,text:'重置'}], //items: 在 FormPanel 中不可缺少的部分 items:[{ /** * layout:extJs 容器组件，可以设置它的显示风格 * 它的有效值有 absolute,accordion,anchor,border,card,fit,form and table 共 9 种 */ layout:'column', items:[{ columnWidth:.5, layout:'form', items:{ name:'userId', hiddenName:'userId', xtype:'textfield', fieldLabel:'用户编码', maxLength:'50', vtype:'specialChar', anchor:'80%' } },{ columnWidth:.5, layout:'form', items:{ name:'userName', 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44.

hiddenName:'userName', xtype:'textfield', fieldLabel:'用户名称', maxLength:'100', vtype:'specialChar', anchor:'80%' } }] }); }] 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. } 56. /** 57. * showUserForm():绘制添加表单 58. */ 59. function showUserForm() { 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. layout:'column', items:[ { //将变量定义成局部变量，避免每次都生成一个新对象 var userForm = null; userForm = new Ext.FormPanel({ id:'conditionForm', labelWidth:'80', labelAlign:'right', border:false, bodyBorder:false, frame:true, items:[ columnWidth:'.8', items:{ name:'userInfo.userId', hiddenName:'userInfo.userId', //hiddenName 动态的绑定数据库中对应的字段件明 } },{ xtype:'textField', //xtype 可以分为三类,textField 为表单域的控 fieldLabel:'用户编码*',//控件前的文本说 labelSeparator:'', blankText : '填写用户编码', //为空的文本框提示信息 allowBlank:false, //不允许为空 maxLength:'50', //文本框允许输入的最大的长度,最小的 minLength vtype:'specialChar', anchor:'80%' columnWidth:'.8', items:{ name:'userInfo.userName', hiddenName:'userInfo.userName', xtype:'textField', fieldLabel:'用户姓名*', labelSeparator:'', 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92.

93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. blankText:'填写用户姓名', allowBlank:false, maxLength:'100', vtype:'specialChar', anchor:'100%' } },{ },{ columnWidth:'.8', items:{ name:'userInfo.pwd', hiddenName:'userInfo.pwd', xtype:'textField', inputType:'password', fieldLabel:'用户密码*', labelSeparator:'', blankText:'填写用户密码', allowBlank:false, maxLength:'12', minLength:'6', value:'123456', //用户默认的秘密 anchor:'100%' } columnWidth:'.8', items:{ name:'rPwd', hiddenName:'rPwd', xtype:'textField', inputType:'password', fieldLabel:'确认密码*', labelSeparator:'', blankText:'二次输入的秘密要相同', allowBlank:false, vtype:'pwdRange', pwdRange:{begin:'userInfo.pwd',end:'rPwd'}, maxLength:'12', anchor:'100%' } }] ] }); } /** * editUserForm():绘制修改表单 */ function editUserForm(){ //将变量定义成局部变量，避免每次都生成一个新对象 var userForm = null; userForm = new Ext.FormPanel({ id:'editForm', labelWidth:'80',

144. 145. 146. 147. 148. 149. 150. 151. 152. 153. 154. 中对应的字段 155. 控件 156. 157. 158. 159. 160. 161. 162. minLength 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174. 175. 176. 177. 178. 179. 180. 181. 结尾!', 182. 183. 184. 185. 186. 187. 188. 189. 190. labelAlign:'right', border:false, bodyBorder:false, frame:true, items:[ layout:'column', items:[{ columnWidth:'.8', items:{ name:'userInfo.userId', hiddenName:'userInfo.userId', //hiddenName 动态的绑定数据库 xtype:'textField', //xtype 可以分为三类,textField 为表单域的 fieldLabel:'用户编码', //控件前的文本说明 labelSeparator:':', readOnly:true, //文本框只读 disabled:true, //文本框灰色,区别与其他的文本框颜色 blankText : '填写用户编码', //为空的文本框提示信息 allowBlank:false, //不允许为空 maxLength:'50', //文本框允许输入的最大的长度,最小的 //字母开头，且只能存在字母与数字长度为 2 到 12 位 regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){1,11}$/, regexText : '用户编码必须以字母开头,长度 2-12 位!', anchor:'90%' } },{ columnWidth:'.8', items:{ name:'userInfo.userName', hiddenName:'userInfo.userName', xtype:'textField', fieldLabel:'用户姓名', labelSeparator:':', blankText:'填写用户姓名', allowBlank:false, maxLength:'100', //只含有汉字、数字、字母、下划线不能以下划线开头和结尾 regex : /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/, regexText : '只含有汉字、数字、字母、下划线不能以下划线开头和 anchor:'90%' } },{ columnWidth:'.2', items:{ hiddenName:"infoFill", name:"infoFill", xtype:'label', html:'*',

191. 192. 193. 194. 195. 196. 197. 198. 199. 200. 201. 202. 203. 204. 205. 206. 207. 208. 209. 210. 211. 212. 213. 214. 215. 216. 217. 218. 219. 220. 221. 222. 223. 224. 225. 226. 227. 228. 229. 230. 231. labelSeparator:'', anchor:'100%' } },{ columnWidth:'.8', items:{ name:'userInfo.pwd', hiddenName:'userInfo.pwd', xtype:'textField', inputType:'password', fieldLabel:'用户密码*', labelSeparator:':', blankText:'填写用户密码', allowBlank:false, maxLength:'12', minLength:'6', anchor:'90%' } },{ },{ columnWidth:'.2', items:{ hiddenName:"infoFill", name:"infoFill", xtype:'label', html:'*', labelSeparator:'', anchor:'100%' } columnWidth:'.8', items:{ name:'rPwd', hiddenName:'rPwd', xtype:'textField', inputType:'password', fieldLabel:'确认密码*', labelSeparator:':', blankText:'二次输入的秘密要相同', allowBlank:false, //在 extCommon.js 文件中定义二次输入的密码相同验证 pwdRange // vtype 为验证的方法，如果是通用的验证，请在方法中定义，如果是特例，可以使用 regex 232. 233. 234. 235. 236. 237. 238. 239. 240. vtype:'pwdRange', pwdRange:{begin:'userInfo.pwd',end:'rPwd'}, maxLength:'12', anchor:'90%' } },{ columnWidth:'.2', items:{ hiddenName:"infoFill",

241. 242. 243. 244. 245. 246. 247. 248. 249. 250. 251. 252. 253. 254. 255. 256. 257. 258. 259. 260. 261. 262. 263. 264. 265. name:"infoFill", xtype:'label', html:'*', labelSeparator:'', anchor:'100%' } }] ]}); } /** * onReady:该文件准备好(在 onload 和图像加载之前) */ Ext.onReady(function(){ searchQueryForm(); //获取查询 form var queryForm = Ext.getCmp("queryForm").getForm(); /** * layout 设置为 border 表示页面将划分为东南西北中五个部分 * 这里表示 centerPanel 放在中间 */ var layout = new Ext.Viewport({ layout:'border', defaluts:{border:false,bodyBorder:false,activeTab:0}, items:[queryForm,{id:'centerPanel',region:'center',height:doc ument.body.clientHeight,contentEl:'mainDiv'}] 266. 267. 268. 269. 270. 271. 272. 273. 274. 275. 276. 277. }); //页面加载的时候，默认数据查询页面显示用户信息列表 submitForm(); }); //查询信息 var store = new Ext.data.Store({ url:'../user/doGetPageList.action', //action 的路径 reader:new Ext.data.JsonReader({ root:'userList', //从 struts2.0 里面传递过来的参数:用户的集合 totalProperty:'rowTotal', //从 struts2.0 里面传递过来的参数:总共的信息的行数 278. 279. 280. 281. 282. 283. 284. 285. 286. 287. 288. 289. id:'userId', successPropery:'success' }, ['userId','userName','pwd']) }); /** * callback:调用的函数 */ function getMsg() {} /** * 模糊查询

290. 291. 292. 293. 294. 295. 296. 297. 298. 299. 300. 301. */ function submitForm() { //初始化 grid var grid = null; //复选框 var sm = new Ext.grid.CheckboxSelectionModel({ dataIndex:'id', width:'20' }); /** * ? sortabel:（可选）如果真要排序允许在此列 * ? renderer:（可选）用于生成给定数据值单元格的 HTML 标记的功能。如果没有指定，默认渲染器使用的原始数据值。 302. 303. 304. 305. 306. * 在 renderer:function createButton(参数)这里的参数可以没有或多个 * ? 鼠标移动图片上变成"手"是:style="cursor:hand" */ var colM = new Ext.grid.ColumnModel( [sm,{header:'用户账号 ',dataIndex:'userId',align:'center',sortable:true}, 307. {header:'用户姓名 ',dataIndex:'userName',align:'center',sortabel:true}, 308. {header:'删除 ',dataIndex:'id',align:'center',renderer:function createButton(){ 309. return '

';}}, 310. {header:'编辑 ',dataIndex:'userId',align:'center',renderer:function createButton(userId, m etadata, record){ 311. return ''+record.get('userName')+'的信息修改'+'';}}] 312. 313. 314. 315. 316. 317. 318. 319. 320. 321. 322. 323. 324. 325. 326. 327. sg}); 328. 329. 330. ); //获取查询表单 var form = Ext.getCmp("queryForm").getForm(); //判断是否通过验证，如果没有请直接关闭 if(!form.isValid()) { Ext.Msg.alert("系统提示","查询数据不正确，请确认输入!"); return ; } //差选 queryform 中查询的数据参数 store.baseParams = form.getValues(); /** * getLimitCount():获取分页每页行数,如果不传值，则会取默认值 * Start 表示读取数据的起始位置、limit 表示每次读取多少条数据 * callback:getMsg 表示回调时，执行函数 getMsg。可省略 */ store.load({params:{start:0,limit:getLimitCount()}, callback:getM if(grid == null) { grid = new Ext.grid.EditorGridPanel({ renderTo:"mainDiv", //grid 查询结果指向显示的 div 层

331. 332. 值 333. 334. 335. 336. 337. 338. 339. 340. 341. 342. 343. 过程中 344. 345. 346. 347. 显示多少条的 348. 349. 350. 351. 352. 353. 354. 355. 356. 357. 358. 359. QUERY_PAGE_SIZE title:"用户查询结果", //grid 标题 width:document.body.clientWidth, //设置 grid 的 width 的 hight:document.doby.clientHight-100,//设置 hight 的值 viewConfig:{forceFit:true}, //设置列数的充满窗口 loadMask:true, //在加载数据时的遮罩效果 stripeRows:true, //隔行换色 region:'center', //这个是设置在 ViewPort 中显示的位置 cm:colM, //定义的列 ds:store, //定义的数据源 border:false, bodyBorder:false, sm:sm, //定义的复选框 //listeners:包含一个或多个事件处理程序被添加到这个对象初始化 listeners:{cellclick:renderPage}, /** * bbar: new Ext.PagingToolbar 部分是定义分页工具栏， * 这里的分页控件栏还用到了 1 个自己定义的插件，就是可以选择每页 * plugins : [new Ext.ux.PageSizePlugin()],参考 Ext 的 API * 要实现分页，后台必须有 total 属性，表示共多少条数据 */ bbar:new Ext.PagingToolbar({ items:[{ xtype:'button', text:'删除所选', handler:delUserAll, //自定义执行动 pressed:true }], id:'pageToolBar', pageSize:QUERY_PAGE_SIZE, //每页的行数默认为： store:store, displayInfo:true, displayMsg:'显示第{0}条到{1}条记录，共{2}条记录', emptMsg:'没有记录', plugins:[new Ext.ux.PageSizePlugin()] 360. 361. 362. 363. 364. 365. 366. 367. 368. 369. 370. 371. 372. 373. 374. 375. 376. 377. }) }); } grid.render(); } /** * 增加用户信息 */ function addForm() { showUserForm(); //获取绘制用户窗口的 form var userForm = Ext.getCmp("conditionForm").getForm(); //初始化用户添加的窗口的 Id

资料库

extjs常用增删改查操作.docx

相关推荐

开发技术

热门标签

最新资料