extjs 动态表格完整版.doc

extjs 动态表格完整版 EXTjsonSQLSQL ServerJSP前台页的源码 test2.js Java代码 1. 2. 3. Ext.onReady(function() 4. 5. Ext.QuickTips.init();/浮动信息提示 6. 7. Ext.BLANK_IMAGE_URL=resources/images/default/s.gif;/替换图片文件地址为本地 8. 9. /*刚打开页面等待中，需要屏蔽*/ 10. varmyMask; 11. Ext.onReady(function() 12. myMask=newExt.LoadMask(Ext.getBody(),msg:loading.); 13. myMask.show(); 14. ); 15. 16. /定义数据源为远程代理和JSON数据格式 17. vards=newExt.data.Store( 18. proxy:newExt.data.HttpProxy( 19. /这个url,是后台返回的数据,这个url可以是Struts的Action,也可以是servlet,这里为了方便就是一个jsp文件 20. url:./ext.do?method=date, 21. failure:function() 22. Ext.Msg.alert(数据加载失败！请检查); 23. , 24. success:function() 25. myMask.hide(); 26. 27. 28. ), 29. 30. 31. 32. reader:newExt.data.JsonReader( 33. /这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致! 34. totalProperty:totalProperty, 35. root:root36. 37. , 38. 39. name:id40. 41. , 42. 43. name:name44. 45. , 46. 47. name:sex48. 49. , 50. 51. name:birthday, 52. 53. type:date, 54. 55. dateFormat:Y-n-j56. 57. , 58. 59. name:email60. 61. , 62. 63. 64. name:edit65. 66. 67. ) 68. 69. ); 70. 71. 72. /加载首页数据，每页显示10条记录 73. 74. ds.load( 75. 76. params: 77. 78. start:0, 79. 80. limit:1081. 82. 83. 84. ); 85. 86. /定义复选框 87. 88. varsm=newExt.grid.CheckboxSelectionModel(); 89. 90. /定义列模型 91. 92. varcm=newExt.grid.ColumnModel( 93. 94. /newExt.grid.RowNumberer(),/添加自动行号 95. 96. sm,/添加复选框 97. 98. 99. 100. header:学号, 101. 102. width:40, 103. 104. dataIndex:id105. 106. , 107. 108. header:姓名, 109. 110. width:40, 111. 112. dataIndex:name, 113. 114. sortable:true, 115. 116. editor:newExt.form.TextField() 117. , 118. 119. header:性别, 120. 121. width:40, 122. 123. dataIndex:sex, 124. 125. renderer:changeSex, 126. 127. sortable:true, 128. 129. editor:newExt.form.ComboBox(transform:sexList,triggerAction:all,lazyRender:true) 130. 131. /红男绿女 132. 133. , 134. 135. header:出生日期, 136. 137. dataIndex:birthday, 138. 139. renderer:Ext.util.Format.dateRenderer(Y年m月d日), 140. 141. sortable:true, 142. 143. editor:newExt.form.DateField(format:Y年m月d日) 144. 145. /格式化日期 146. 147. , 148. 149. header:电子邮件, 150. 151. width:120, 152. 153. dataIndex:email, 154. 155. renderer:sendEmail, 156. 157. sortable:true, 158. 159. editor:newExt.form.TextField() 160. 161. /单击启动邮件客户端发送邮件 162. 163. , 164. 165. 166. 167. header:操作, 168. 169. width:25, 170. 171. dataIndex:edit, 172. 173. renderer:sendEdit 174. 175. 176. ); 177. 178. /设置所有列字段默认排序 179. 180. cm.defaultSortable=true; 181. 182. /按要求渲染性别的函数 183. 184. functionchangeSex(value) 185. 186. if(value=男) 187. 188. return男; 189. 190. else 191. 192. return女; 193. 194. 195. 196. 197. 198. /按要求渲染email的函数 199. 200. functionsendEmail(value) 201. 202. return+value+; 203. 204. 205. 206. /按要求渲染edit的函数 207. 208. functionsendEdit(value) 209. 210. return+value+; 211. 212. 213. 214. /定义一个表格面板 215. 216. vargrid=newExt.grid.EditorGridPanel( 217. 218. id:student-grid,/设置标识ID，方便以后引用！ 219. title:学员信息管理,/标题 220. /显示数据的地方,注意这里的renderTo要和html文件中的div要一致! 221. renderTo:myGrid,/显示表格的地方显示表格的地方 222. 223. sm:sm,/复选框 224. 225. cm:cm,/列模型 226. 227. ds:ds,/数据源 228. 229. stripeRows:true,/加上行条纹 230. 231. loadMask:true,/加载数据时遮蔽表格 232. 233. border:true,/加上边框 234. 235. frame:true,/显示天蓝色圆角框 236. 237. autoHeight:true,/自动设置高度，这个配置很重要 238. 239. width:700, 240. 241. x:1,/设置初始位置横坐标 242. 243. y:1,/设置初始位置纵坐标 244. 245. /enableDragDrop:true,/容许行的拖曳 246. 247. collapsible:true,/面板可以折叠 248. 249. /titleCollapse:true,/单击表头任何地方都可以折叠 250. 251. floating:true,/设置浮动，能否拖动成功就靠它了,注意设置浮动后它就置顶了 252. 253. /实现拖曳效果，参考官方文档 254. draggable: 255. 256. insertProxy:false, 257. 258. onDrag:function(e) 259. 260. varpel=xy.getEl(); 261. 262. this.x=pel.getLeft(true); 263. 264. this.y=pel.getTop(true); 265. 266. vars=this.panel.getEl().shadow;/拖曳中消除原位置的阴影 267. 268. if(s) 269. 270. s.realign(this.x,this.y,pel.getWidth(), 271. 272. pel.getHeight(); 273. 274. 275. 276. , 277. 278. endDrag:function(e)/拖曳结束后保存位置效果 279. 280. this.panel.setPosition(this.x,this.y); 281. 282. 283. 284. , 285. 286. /UI视图配置 287. 288. viewConfig: 289. 290. forceFit:true291. 292. /强制适应分布宽度 293. 294. , 295. 296. /表格顶部动作或按钮工具栏 297. 298. tbar:newExt.Toolbar( 299. 300. items: 301. 302. id:btnAdd, 303. 304. text:添加, 305. 306. handler:function() 307. 308. Ext.MessageBox.alert(添加, 309. 310. 做添加的操作); 311. 312. 313. 314. ,newExt.Toolbar.SplitButton(), 315. 316. id:btnEdit, 317. 318. text:编辑, 319. 320. handler:function() 321. 322. Ext.MessageBox.alert(编辑, 323. 324. 做编辑的操作); 325. 326. 327. 328. ,-, 329. 330. id:btnDel, 331. 332. text:删除, 333. 334. handler:function() 335. 336. Ext.MessageBox.alert(删除, 337. 338. 做删除的操作); 339. 340. 341. 342. 343. 344. ), 345. 346. /表格底部分页工具栏 347. 348. bbar:newExt.PagingToolbar( 349. 350. pageSize:6, 351. 352. store:ds, 353. 354. displayInfo:true, 355. 356. displayMsg:显示第0条到1条记录，一共2条, 357. 358. emptyMsg:没有记录359. 360. ) 361. 362. ); 363. 364. 365. /表格编辑事件 366. grid.on(afteredit,afterEdit,this); 367. 368. functionafterEdit(obj) 369. varr=obj.record; 370. varid=r.get(id); 371. varname=r.get(name); 372. varsex=r.get(sex); 373. varbornDate=r.get(birthday); 374. varemail=r.get(email); 375. /varc=this.record2obj(r); 376. /Ext.MessageBox.alert(show,【id:+id+】【name:+name+】【sex:+sex+】【bornDate:+bornDate+】【email:+email+】); 377. /字符转日期格式 378. vardate=Ext.util.Format.date(bornDate,Y-m-d); 379. /alert(date); 380. /调用异步方法 381. rollRequest(id,name,sex,date,email); 382. 383. ; 384. 385. /异步调用方法 386. functionrollRequest(id,name,sex,bornDate,email) 387. /alert(id); 388. Ext.Ajax.request( 389. url:./ext.do?method=update, 390. success:function(response,config) 391. /alert(config.url+-+config.method); 392. /成功后的刷新事件 393. ds.load( 394. params: 395. start:0, 396. limit:10397. ); 398. /Ext.MessageBox.alert(result,response.responseText);/返回值 399. /显示修改成功 400. document.getElementById(loading).style.display=block; 401. /透明度 402. Ext.get(loading).setOpacity(1); 403. Ext.get(loading).setOpacity(0.0,duration:2,callback:function() 404. ); 405. , 406. failure:function() 407. Ext.MessageBox.alert(result,失败); 408. , 409. method:post, 410. /传入后台的参数 411. params:id:id,name:name,sex:sex,bornDate:bornDate,email:email 412. 413. ); 414. 415. 416. 417. /给表格单元格加单击事件 418. grid.addListener(cellclick,cellclick); 419. functioncellclick(grid,rowIndex,columnIndex,e) 420. /如果是编辑列允许操作 421. if(columnIndex=6) 422. varrecord=grid.getStore().getAt(rowIndex);/GettheRecord 423. varfieldName=grid.getColumnModel().getDataIndex(columnIndex);/Getfieldname 424. vardata=record.get(fieldName); 425. /Ext.MessageBox.alert(show,当前选中的数据是：+data+-+record.id); 426. /字符转日期格式 427. varbornDate=Ext.util.Format.date(record.get(birthday),Y-m-d); 428. /调用子窗口 429. showDialog(record.get(id),record.get(name),record.get(sex),bornDate,record.get(email); 430. 431. 432. 433. ); 434. 435. 436. /子窗口 437. functionshowDialog(id,name,sex,birthday,email) 438. /alert(id+-+name+sex+-+birthday+-+email); 439. varresult=id+,+name+,+sex+,+birthday+,+email; 440. vardoc=window.showModalDialog(dialog.jsp?result=+result,ddd, 441. font-size:20px;dialogWidth:400px;dialogHeight:400px;scrollbars=no;status=no); 442. 443. if(doc=ok) 444. window.location.reload(); 445. 446. 447. 448. 449. 450. 451. Ext.onReady(function() Ext.QuickTips.init();/ 浮动信息提示 Ext.BLANK_IMAGE_URL = resources/images/default/s.gif;/ 替换图片文件地址为本地 /*刚打开页面等待中，需要屏蔽*/ var myMask; Ext.onReady(function() myMask= new Ext.LoadMask(Ext.getBody(), msg:loading.); myMask.show(); ); / 定义数据源为远程代理和JSON数据格式 var ds = new Ext.data.Store( proxy : new Ext.data.HttpProxy( / 这个url,是后台返回的数据,这个url可以是Struts的Action,也可以是servlet,这里为了方便就是一个jsp文件 url : ./ext.do?method=date, failure : function() Ext.Msg.alert(数据加载失败！请检查); , success:function() myMask.hide(); ), reader : new Ext.data.JsonReader( / 这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致! totalProperty : totalProperty, root : root , name : id , name : name , name : sex , name : birthday, type : date, dateFormat : Y-n-j , name : email , name : edit ) ); / 加载首页数据，每页显示10条记录 ds.load( params : start : 0, limit : 10 ); / 定义复选框 var sm = new Ext.grid.CheckboxSelectionModel(); / 定义列模型 var cm = new Ext.grid.ColumnModel( / new Ext.grid.RowNumberer(),/ 添加自动行号 sm,/ 添加复选框 header : 学号, width : 40, dataIndex : id , header : 姓名, width : 40, dataIndex : name, sortable:true, editor:new Ext.form.TextField() , header : 性别, width : 40, dataIndex : sex, renderer : changeSex, sortable:true, editor:new Ext.form.ComboBox(transform:sexList,triggerAction:all,lazyRender:true) / 红男绿女 , header : 出生日期, dataIndex : birthday, renderer : Ext.util.Format.dateRenderer(Y年m月d日), sortable:true, editor:new Ext.form.DateField(format:Y年m月d日) / 格式化日期 , header : 电子邮件, width : 120, dataIndex : email, renderer : sendEmail, sortable:true, editor:new Ext.form.TextField() / 单击启动邮件客户端发送邮件 , header : 操作, width :25, dataIndex : edit, renderer : sendEdit ); / 设置所有列字段默认排序 cm.defaultSortable = true; / 按要求渲染性别的函数 function changeSex(value) if (value = 男) return 男; else return 女; /按要求渲染email的函数 function sendEmail(value) return + value + ; /按要求渲染edit的函数 function sendEdit(value) return + value + ; / 定义一个表格面板 var grid = new Ext.grid.EditorGridPanel( id : student-grid,/ 设置标识ID，方便以后引用！ title : 学员信息管理,/ 标题 / 显示数据的地方,注意这里的renderTo要和html文件中的div要一致! renderTo : myGrid,/ 显示表格的地方显示表格的地方 sm : sm,/ 复选框 cm : cm,/ 列模型 ds : ds,/ 数据源 stripeRows : true,/ 加上行条纹 loadMask : true,/ 加载数据时遮蔽表格 border : true,/ 加上边框 frame : true,/ 显示天蓝色圆角框 autoHeight : true,/ 自动设置高度，这个配置很重要 width : 700, x : 1,/ 设置初始位置横坐标 y : 1,/ 设置初始位置纵坐标 / enableDragDrop : true,/容许行的拖曳 collapsible : true, / 面板可以折叠 / titleCollapse : true,/ 单击表头任何地方都可以折叠 floating : true,/ 设置浮动，能否拖动成功就靠它了,注意设置浮动后它就置顶了 / 实现拖曳效果，参考官方文档 draggable : insertProxy : false, onDrag : function(e) var pel = xy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); var s = this.panel.getEl().shadow;/ 拖曳中消除原位置的阴影 if (s) s.realign(this.x, this.y, pel.getWidth(), pel.getHeight(); , endDrag : function(e) / 拖曳结束后保存位置效果 this.panel.setPosition(this.x, this.y); , / UI视图配置 viewConfig : forceFit : true /强制适应分布宽度 , / 表格顶部动作或按钮工具栏 tbar : new Ext.Toolbar( items : id : btnAdd, text : 添加, handler : function() Ext.MessageBox.alert(添加, 做添加的操作); , new Ext.Toolbar.SplitButton(), id : btnEdit, text : 编辑, handler : function() Ext.MessageBox.alert(编辑, 做编辑的操作); , -, id : btnDel, text : 删除, handler : function() Ext.MessageBox.alert(删除, 做删除的操作); ), / 表格底部分页工具栏 bbar : new Ext.PagingToolbar( pageSize : 6, store : ds, displayInfo : true, displayMsg : 显示第 0 条到 1 条记录，一共 2 条, emptyMsg : 没有记录 ) ); /表格编辑事件 grid.on(afteredit,afterEdit,this); function afterEdit(obj) var r=obj.record; var id=r.get(id); var name=r.get(name); var sex=r.get(sex); var bornDate=r.get(birthday); var email=r.get(email); / var c=this.record2obj(r); / Ext.MessageBox.alert(show,【id:+id+】【name:+name+】【sex:+sex+】【bornDate:+bornDate+】【email:+email+】); /字符转日期格式 var date=Ext.util.Format.date(bornDate,Y-m-d); /alert(date); /调用异步方法 rollRequest(id,name,sex,date,email); ;/异步调用方法function rollRequest(id,name,sex,bornDate,email) /alert(id); Ext.Ajax.request(url:./ext.do?method=update,success:function(response,config)/alert(config.url+-+config.method); /成功后的刷新事件ds.load( params : start : 0, limit : 10 );/Ext.MessageBox.alert(result,response.responseText); /返回值/显示修改成功 document.getElementById(loading).style.display=block; /透明度 Ext.get(loading).setOpacity(1); Ext.get(loading).setOpacity(0.0,duration:2,callback:function() ); , failure:function() Ext.MessageBox.alert(result,失败); , method:post, /传入后台的参数 params:id:id,name:name,sex:sex,bornDate:bornDate,email:email );/给表格单元格加单击事件grid.addListener(cellclick, cellclick);function cellclick(grid, rowInde