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. var myMask;
11. Ext.onReady(function(){
12. myMask= new Ext.LoadMask(Ext.getBody(), {msg:\
13. myMask.show(); 14. }); 15.
16. // 定义数据源为远程代理和JSON数据格式?
17. var ds = new Ext.data.Store({ 18. proxy : new Ext.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 : new Ext.data.JsonReader({
33. // 这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致!!
34. totalProperty : 'totalProperty', 35. root : 'root' 36.
37. }, [{ 38.
39. name : 'id' 40.
41. }, { 42.
43. name : 'name' 44.
45. }, { 46.
47. name : 'sex' 48.
49. }, { 50.
51. name : \52.
53. type : \54.
55. dateFormat : \56.
57. }, { 58.
59. name : 'email' 60.
61. }, 62. { 63.
64. name : 'edit' 65.
66. }] 67. ) 68. 69. }); 70. 71.
72. // 加载首页数据，每页显示10条记录?
73.
74. ds.load({ 75.
76. params : { 77.
78. start : 0, 79.
80. limit : 10 81.
82. } 83.
84. }); 85.
86. // 定义复选框 87.
88. var sm = new Ext.grid.CheckboxSelectionModel(); 89.
90. // 定义列模型 91.
92. var cm = new Ext.grid.ColumnModel([ 93.
94. // new Ext.grid.RowNumberer(),// 添加自动行号? 95.
96. sm,// 添加复选框? 97.
98. { 99.
100. header : '学号', 101.
102. width : 40, 103.
104. dataIndex : 'id' 105. 106. }, { 107.
108. header : '姓名', 109.
110. width : 40, 111.
112. dataIndex : 'name', 113.
114. sortable:true,
115.
116. editor:new Ext.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:new Ext.form.ComboBox({transform:\gerAction:\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:new Ext.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. 158. 159. 160. 161. 162. 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174. 175. 176. 177. 178. 179. 180. 181. 182.
sortable:true,
editor:new Ext.form.TextField()
// 单击启动邮件客户端发送邮件
}, {
header : '操作',
width :25,
dataIndex : 'edit',
renderer : sendEdit } ]);
// 设置所有列字段默认排序
cm.defaultSortable = true;
// 按要求渲染性别的函数?
183.
184. function changeSex(value) { 185.
186. if (value == '男') { 187.
188. return \男\189.
190. } else { 191.
192. return \女\193. 194. } 195. 196. }
extjs 动态表格完整版
