extjs增删改查.docx
- 文档编号:4907433
- 上传时间:2022-12-11
- 格式:DOCX
- 页数:24
- 大小:24.98KB
extjs增删改查.docx
《extjs增删改查.docx》由会员分享,可在线阅读,更多相关《extjs增删改查.docx(24页珍藏版)》请在冰豆网上搜索。
extjs增删改查
xtJs中常用到的增,删,改,查操作
分类:
extJs2009-12-2814:
361252人阅读评论(3)收藏举报
刚刚参加完公司的项目,第一次使用extjs编写用户界面还是有点头痛,现在小花整理好了,希望为初学者做个参考。
[java]viewplaincopy
1.<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2.
3.
4.
5.
6.
-- CommonJs.jsp 为 ExtJS 引入的路径 -->
7. <%@ include file="../extJs/CommonJs.jsp"%>
8. script type="text/javascript"> -- 9. /** 10. * 作 者: 花 慧 11. * 时 间: 2009年12月22日 12. * 内 容: extJs中常用到的增,删,改,查操作 13. */ 14. 15. //设置每页显示的行数默认为10 16. 17. var QUERY_PAGE_SIZE = 10; 18. 19. /** 20. * SearchQueryForm(): 绘制查询表单 21. */ 22. function searchQueryForm() 23. { 24. //form 使用的时候建议设为局部变量,可以通过Ext.getCmp(“”)去获取form 25. 26. var queryForm = null; 27. queryForm = new Ext.FormPanel({ 28. id: 'queryForm', //指定queryForm的Id 29. renderTo: 'searchPanel', //指向form所在的div层 30. labelWidth: 70, //label标签的width占页面的百分比 31. region: 'north', 32. border: false, //以显示面板的body元素的边界,虚假隐藏起来(默认为true) 33. badyBorder: false, //显示面板的body元素,假以隐藏它(默认为true的内部边界) 34. labelAlign: 'right', //label标签的对齐方式 35. frame: true, //自定义面板的圆形边界,边界宽度1px。 默认为false 36. title: '用户信息查询', //form的标题 37. /** 38. *buttons: 在FormPanel中按钮的集合 39. */ 40. buttons: [{handler: addForm,text: '新增'}, 41. {handler: submitForm,text: '查询'}, 42. {handler: resetForm,text: '重置'}], 43. /** 44. * items: 在FormPanel中不可缺少的部分 45. */ 46. items: [{ 47. /** 48. * layout: extJs容器组件,可以设置它的显示风格 49. * 它的有效值有absolute,accordion,anchor,border,card,fit,form and table 共9种 50. */ 51. layout: 'column', 52. items: [ 53. { 54. columnWidth: .5, 55. layout: 'form', 56. items: { 57. name: 'userId', 58. hiddenName: 'userId', 59. xtype: 'textfield', 60. fieldLabel: '用户编码', 61. maxLength: '50', 62. vtype: 'specialChar', 63. anchor: '80%' 64. } 65. },{ 66. columnWidth: .5, 67. layout: 'form', 68. items: { 69. name: 'userName', 70. hiddenName: 'userName', 71. xtype: 'textfield', 72. fieldLabel: '用户名称', 73. maxLength: '100', 74. vtype: 'specialChar', 75. anchor: '80%' 76. } 77. } 78. ] 79. }] 80. }); 81. } 82. /** 83. * showUserForm(): 绘制添加表单 84. */ 85. function showUserForm() 86. { 87. //将变量定义成局部变量,避免每次都生成一个新对象 88. 89. var userForm = null; 90. userForm = new Ext.FormPanel({ 91. id: 'conditionForm', 92. labelWidth: '80', 93. labelAlign: 'right', 94. border: false, 95. bodyBorder: false, 96. frame: true, 97. items: [ 98. layout: 'column', 99. items: [ 100. { 101. columnWidth: '.8', 102. items: { 103. name: 'userInfo.userId', 104. hiddenName: 'userInfo.userId', //hiddenName动态的绑定数据库中对应的字段 105. xtype: 'textField', //xtype可以分为三类,textField为表单域的控件 106. fieldLabel: '用户编码*',//控件前的文本说明 107. labelSeparator: '', 108. blankText : '填写用户编码', //为空的文本框提示信息 109. allowBlank: false, //不允许为空 110. maxLength: '50', //文本框允许输入的最大的长度,最小的minLength 111. vtype: 'specialChar', 112. anchor: '80%' 113. } 114. },{ 115. columnWidth: '.8', 116. items: { 117. name: 'userInfo.userName', 118. hiddenName: 'userInfo.userName', 119. xtype: 'textField', 120. fieldLabel: '用户姓名*', 121. labelSeparator: '', 122. blankText: '填写用户姓名', 123. allowBlank: false, 124. maxLength: '100', 125. vtype: 'specialChar', 126. anchor: '100%' 127. } 128. },{ 129. columnWidth: '.8', 130. items: { 131. name: 'userInfo.pwd', 132. hiddenName: 'userInfo.pwd', 133. xtype: 'textField', 134. inputType: 'password', 135. fieldLabel: '用户密码*', 136. labelSeparator: '', 137. blankText: '填写用户密码', 138. allowBlank: false, 139. maxLength: '12', 140. minLength: '6', 141. value: '123456', //用户默认的秘密 142. anchor: '100%' 143. } 144. },{ 145. columnWidth: '.8', 146. items: { 147. name: 'rPwd', 148. hiddenName: 'rPwd', 149. xtype: 'textField', 150. inputType: 'password', 151. fieldLabel: '确认密码*', 152. labelSeparator: '', 153. blankText: '二次输入的秘密要相同', 154. allowBlank: false, 155. vtype: 'pwdRange', 156. pwdRange: {begin: 'userInfo.pwd',end: 'rPwd'}, 157. maxLength: '12', 158. anchor: '100%' 159. } 160. }] 161. ] 162. }); 163. } 164. /** 165. * editUserForm(): 绘制修改表单 166. */ 167. function editUserForm(){ 168. //将变量定义成局部变量,避免每次都生成一个新对象 169. 170. var userForm = null; 171. userForm = new Ext.FormPanel({ 172. id: 'editForm', 173. labelWidth: '80', 174. labelAlign: 'right', 175. border: false, 176. bodyBorder: false, 177. frame: true, 178. items: [ 179. layout: 'column', 180. items: [ 181. { 182. columnWidth: '.8', 183. items: { 184. name: 'userInfo.userId', 185. hiddenName: 'userInfo.userId', //hiddenName动态的绑定数据库中对应的字段 186. xtype: 'textField', //xtype可以分为三类,textField为表单域的控件 187. fieldLabel: '用户编码', //控件前的文本说明 188. labelSeparator: ': ', 189. readOnly: true, //文本框只读 190. disabled: true, //文本框灰色,区别与其他的文本框颜色 191. blankText : '填写用户编码', //为空的文本框提示信息 192. allowBlank: false, //不允许为空 193. maxLength: '50', //文本框允许输入的最大的长度,最小的minLength 194. //字母开头,且只能存在字母与数字长度为2到12位 195. 196. regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){1,11}$/, 197. regexText : '用户编码必须以字母开头,长度2-12位! ', 198. anchor: '90%' 199. } 200. },{ 201. columnWidth: '.8', 202. items: { 203. name: 'userInfo.userName', 204. hiddenName: 'userInfo.userN
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- extjs 增删