extjs 動(dòng)態(tài)表格完整版.doc

extjs 動(dòng)態(tài)表格完整版 EXTjsonSQLSQL ServerJSP前臺(tái)頁的源碼 test2.js Java代碼 1. 2. 3. Ext.onReady(function() 4. 5. Ext.QuickTips.init();/浮動(dòng)信息提示 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. /定義數(shù)據(jù)源為遠(yuǎn)程代理和JSON數(shù)據(jù)格式 17. vards=newExt.data.Store( 18. proxy:newExt.data.HttpProxy( 19. /這個(gè)url,是后臺(tái)返回的數(shù)據(jù),這個(gè)url可以是Struts的Action,也可以是servlet,這里為了方便就是一個(gè)jsp文件 20. url:./ext.do?method=date, 21. failure:function() 22. Ext.Msg.alert(數(shù)據(jù)加載失?。≌?qǐng)檢查); 23. , 24. success:function() 25. myMask.hide(); 26. 27. 28. ), 29. 30. 31. 32. reader:newExt.data.JsonReader( 33. /這個(gè)totalProperty和root屬性,要和后臺(tái)的文件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. /加載首頁數(shù)據(jù)，每頁顯示10條記錄 73. 74. ds.load( 75. 76. params: 77. 78. start:0, 79. 80. limit:1081. 82. 83. 84. ); 85. 86. /定義復(fù)選框 87. 88. varsm=newExt.grid.CheckboxSelectionModel(); 89. 90. /定義列模型 91. 92. varcm=newExt.grid.ColumnModel( 93. 94. /newExt.grid.RowNumberer(),/添加自動(dòng)行號(hào) 95. 96. sm,/添加復(fù)選框 97. 98. 99. 100. header:學(xué)號(hào), 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. /單擊啟動(dòng)郵件客戶端發(fā)送郵件 162. 163. , 164. 165. 166. 167. header:操作, 168. 169. width:25, 170. 171. dataIndex:edit, 172. 173. renderer:sendEdit 174. 175. 176. ); 177. 178. /設(shè)置所有列字段默認(rèn)排序 179. 180. cm.defaultSortable=true; 181. 182. /按要求渲染性別的函數(shù) 183. 184. functionchangeSex(value) 185. 186. if(value=男) 187. 188. return男; 189. 190. else 191. 192. return女; 193. 194. 195. 196. 197. 198. /按要求渲染email的函數(shù) 199. 200. functionsendEmail(value) 201. 202. return+value+; 203. 204. 205. 206. /按要求渲染edit的函數(shù) 207. 208. functionsendEdit(value) 209. 210. return+value+; 211. 212. 213. 214. /定義一個(gè)表格面板 215. 216. vargrid=newExt.grid.EditorGridPanel( 217. 218. id:student-grid,/設(shè)置標(biāo)識(shí)ID，方便以后引用！ 219. title:學(xué)員信息管理,/標(biāo)題 220. /顯示數(shù)據(jù)的地方,注意這里的renderTo要和html文件中的div要一致! 221. renderTo:myGrid,/顯示表格的地方顯示表格的地方 222. 223. sm:sm,/復(fù)選框 224. 225. cm:cm,/列模型 226. 227. ds:ds,/數(shù)據(jù)源 228. 229. stripeRows:true,/加上行條紋 230. 231. loadMask:true,/加載數(shù)據(jù)時(shí)遮蔽表格 232. 233. border:true,/加上邊框 234. 235. frame:true,/顯示天藍(lán)色圓角框 236. 237. autoHeight:true,/自動(dòng)設(shè)置高度，這個(gè)配置很重要 238. 239. width:700, 240. 241. x:1,/設(shè)置初始位置橫坐標(biāo) 242. 243. y:1,/設(shè)置初始位置縱坐標(biāo) 244. 245. /enableDragDrop:true,/容許行的拖曳 246. 247. collapsible:true,/面板可以折疊 248. 249. /titleCollapse:true,/單擊表頭任何地方都可以折疊 250. 251. floating:true,/設(shè)置浮動(dòng)，能否拖動(dòng)成功就靠它了,注意設(shè)置浮動(dòng)后它就置頂了 252. 253. /實(shí)現(xiàn)拖曳效果，參考官方文檔 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)/拖曳結(jié)束后保存位置效果 279. 280. this.panel.setPosition(this.x,this.y); 281. 282. 283. 284. , 285. 286. /UI視圖配置 287. 288. viewConfig: 289. 290. forceFit:true291. 292. /強(qiáng)制適應(yīng)分布寬度 293. 294. , 295. 296. /表格頂部動(dòng)作或按鈕工具欄 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. /字符轉(zhuǎn)日期格式 378. vardate=Ext.util.Format.date(bornDate,Y-m-d); 379. /alert(date); 380. /調(diào)用異步方法 381. rollRequest(id,name,sex,date,email); 382. 383. ; 384. 385. /異步調(diào)用方法 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. /傳入后臺(tái)的參數(shù) 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,當(dāng)前選中的數(shù)據(jù)是：+data+-+record.id); 426. /字符轉(zhuǎn)日期格式 427. varbornDate=Ext.util.Format.date(record.get(birthday),Y-m-d); 428. /調(diào)用子窗口 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();/ 浮動(dòng)信息提示 Ext.BLANK_IMAGE_URL = resources/images/default/s.gif;/ 替換圖片文件地址為本地 /*剛打開頁面等待中，需要屏蔽*/ var myMask; Ext.onReady(function() myMask= new Ext.LoadMask(Ext.getBody(), msg:loading.); myMask.show(); ); / 定義數(shù)據(jù)源為遠(yuǎn)程代理和JSON數(shù)據(jù)格式 var ds = new Ext.data.Store( proxy : new Ext.data.HttpProxy( / 這個(gè)url,是后臺(tái)返回的數(shù)據(jù),這個(gè)url可以是Struts的Action,也可以是servlet,這里為了方便就是一個(gè)jsp文件 url : ./ext.do?method=date, failure : function() Ext.Msg.alert(數(shù)據(jù)加載失??！請(qǐng)檢查); , success:function() myMask.hide(); ), reader : new Ext.data.JsonReader( / 這個(gè)totalProperty和root屬性,要和后臺(tái)的文件resJson.jsp中的保持一致! totalProperty : totalProperty, root : root , name : id , name : name , name : sex , name : birthday, type : date, dateFormat : Y-n-j , name : email , name : edit ) ); / 加載首頁數(shù)據(jù)，每頁顯示10條記錄 ds.load( params : start : 0, limit : 10 ); / 定義復(fù)選框 var sm = new Ext.grid.CheckboxSelectionModel(); / 定義列模型 var cm = new Ext.grid.ColumnModel( / new Ext.grid.RowNumberer(),/ 添加自動(dòng)行號(hào) sm,/ 添加復(fù)選框 header : 學(xué)號(hào), 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() / 單擊啟動(dòng)郵件客戶端發(fā)送郵件 , header : 操作, width :25, dataIndex : edit, renderer : sendEdit ); / 設(shè)置所有列字段默認(rèn)排序 cm.defaultSortable = true; / 按要求渲染性別的函數(shù) function changeSex(value) if (value = 男) return 男; else return 女; /按要求渲染email的函數(shù) function sendEmail(value) return + value + ; /按要求渲染edit的函數(shù) function sendEdit(value) return + value + ; / 定義一個(gè)表格面板 var grid = new Ext.grid.EditorGridPanel( id : student-grid,/ 設(shè)置標(biāo)識(shí)ID，方便以后引用！ title : 學(xué)員信息管理,/ 標(biāo)題 / 顯示數(shù)據(jù)的地方,注意這里的renderTo要和html文件中的div要一致! renderTo : myGrid,/ 顯示表格的地方顯示表格的地方 sm : sm,/ 復(fù)選框 cm : cm,/ 列模型 ds : ds,/ 數(shù)據(jù)源 stripeRows : true,/ 加上行條紋 loadMask : true,/ 加載數(shù)據(jù)時(shí)遮蔽表格 border : true,/ 加上邊框 frame : true,/ 顯示天藍(lán)色圓角框 autoHeight : true,/ 自動(dòng)設(shè)置高度，這個(gè)配置很重要 width : 700, x : 1,/ 設(shè)置初始位置橫坐標(biāo) y : 1,/ 設(shè)置初始位置縱坐標(biāo) / enableDragDrop : true,/容許行的拖曳 collapsible : true, / 面板可以折疊 / titleCollapse : true,/ 單擊表頭任何地方都可以折疊 floating : true,/ 設(shè)置浮動(dòng)，能否拖動(dòng)成功就靠它了,注意設(shè)置浮動(dòng)后它就置頂了 / 實(shí)現(xiàn)拖曳效果，參考官方文檔 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) / 拖曳結(jié)束后保存位置效果 this.panel.setPosition(this.x, this.y); , / UI視圖配置 viewConfig : forceFit : true /強(qiáng)制適應(yīng)分布寬度 , / 表格頂部動(dòng)作或按鈕工具欄 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+】); /字符轉(zhuǎn)日期格式 var date=Ext.util.Format.date(bornDate,Y-m-d); /alert(date); /調(diào)用異步方法 rollRequest(id,name,sex,date,email); ;/異步調(diào)用方法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, /傳入后臺(tái)的參數(shù) params:id:id,name:name,sex:sex,bornDate:bornDate,email:email );/給表格單元格加單擊事件grid.addListener(cellclick, cellclick);function cellclick(grid, rowInde