ExtJs学习笔记(搜集整理)

2011-04-29 来源：互联网 作者：佚名 (共0 条评论)

Extjs4,创建Ext组件有了新的方式，就是Ext.create

Extjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4中创建一个window。

编者注（修正于2011-7-8）：代码中所有Ext.Window应该是Ext.window.Window，如果按Ext.Window的话，在某些浏览器中显示不出Window窗口，切记。。。。

代码如下：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

8. 9. 58. 59. 60. 61. 62.

ExtJS4学习笔记(二)---HBox的使用

2011-05-05 来源：本站原创 作者：佚名 (共0 条评论)

要使用HBox布局方式，首先的熟悉下一下几个主要属性:align、flex、pack，具体代码如下

要使用HBox布局方式，首先的熟悉下一下几个主要属性：

一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。 1、top（默认）：排列于容器顶端。 2、middle：垂直居中排列于容器中。 3、stretch：垂直排列且拉伸义填补容器高度

4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。

二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。

三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。 1、start（默认）：组件在容器左边 2、center：组件在容器中间 3、end：组件在容器的右边 实例代码： 一、HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

8. 9. 10. 11. 12. 13. 14. 15. 16.

17.

hbox.js代码：

1. Ext.onReady(function(){

2. var d1 = Ext.create('Ext.Panel',{

3. title:'HBox 顶对齐，且组件在容器的左边', 4. frame:true, 5. width:600, 6. height:100, 7. items:[{ 8. anchor:'100%', 9. layout: { 10. type:'hbox', 11. padding:'10', 12. pack:'start', 13. align:'top' 14. },

15. defaults:{margins:'0 5 0 0'}, 16. items:[{

17. xtype:'button', 18. text: 'Button 1' 19. },{

20. xtype:'button', 21. text: 'Button 2' 22. },{

23. xtype:'button', 24. text: 'Button 3' 25. },{

26. xtype:'button', 27. text: 'Button 4' 28. }] 29. }] 30. }) 31.

32. d1.render('d1'); 33. 34.

35. var d2 = Ext.create('Ext.Panel',{

36. title:'HBox 垂直对齐，且组件在容器的右边', 37. frame:true, 38. width:600, 39. height:100, 40. items:[{ 41. anchor:'100%', 42. layout: { 43. type:'hbox', 44. padding:'10', 45. align:'middle', 46. pack:'end'

47. },

48. defaults:{margins:'0 5 0 0'}, 49. items:[{

50. xtype:'button', 51. text: 'Button 1' 52. },{

53. xtype:'button', 54. text: 'Button 2' 55. },{

56. xtype:'button', 57. text: 'Button 3' 58. },{

59. xtype:'button', 60. text: 'Button 4' 61. }] 62. }] 63. }) 64.

65. d2.render('d2'); 66.

67. var d3 = Ext.create('Ext.Panel',{

68. title:'HBox 垂直水平居中，并且所有控件高度为最高控件的高度', 69. frame:true, 70. width:600, 71. height:100, 72. items:[{

73. anchor:'100%', 74. 75. layout: { 76. type: 'hbox', 77. padding:'5', 78. align:'stretchmax', 79. pack:'center' 80. },

81. defaults:{margins:'0 5 0 0'}, 82. items:[{

83. xtype:'button', 84. text: 'Small Size' 85. },{

86. xtype:'button', 87. scale: 'medium', 88. text: 'Medium Size' 89. },{

90. xtype:'button',

91. scale: 'large', 92. text: 'Large Size' 93. }] 94. }] 95. }) 96.

97. d3.render('d3'); 98. 99. 100. 101. })

最后是效果图：

另外多种的布局方式，大家自己尝试就OK了。

ExtJS4学习笔记(三)---VBox的使

2011-05-06 来源：本站原创 作者：佚名 (共0 条评论)

要使用VBox布局方式，首先的熟悉下一下几个主要属性

要使用VBox布局方式，首先的熟悉下一下几个主要属性：

一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。 1、left（默认）：排列于容器左侧。 2、center ：控件在容器水平居中。

3、stretch：控件横向拉伸至容器大小

4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。

二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。

三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。 1、start（默认）：组件在容器上边 2、center：组件在容器中间 3、end：组件在容器的下边

HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

8. 9. 10. 18. 19. 20. 21. 22.

vbox.js：

1. Ext.onReady(function() { 2. var currentName;

3. var replace = function(config, name) { 4. var btns = Ext.getCmp('btns');

5. if (name && name != currentName) { 6. currentName = name; 7. btns.remove(0);

8. btns.add(Ext.apply(config)); 9. } 10. }; 11.

12. var viewport = Ext.create('Ext.Viewport', { 13. layout:'border', 14.

15. items: [{ 16. id:'btns', 17. region:'west', 18. baseCls:'x-plain', 19. split:true, 20. width:150, 21. minWidth: 100, 22. maxWidth: 250, 23. layout:'fit', 24. margins: '5 0 5 5', 25. items: {

26. baseCls: 'x-plain',

27. html: '

点击右边的按钮查看效果

30. region:'center', 31. margins: '5 5 5 0', 32. layout: 'anchor', 33. items:[{

34. anchor: '100%', 35. baseCls:'x-plain', 36. layout: { 37. type:'hbox', 38. padding: 10 39. },

40. defaults:{

41. margins:'0 5 0 0', 42. pressed: false, 43. toggleGroup:'btns', 44. allowDepress: false 45. }, 46. items: [{

47. xtype:'button',

48.

49. text: 'Spaced / Align: left', 50. handler: function(){ 51. replace({ 52. layout: { 53. type:'vbox', 54. padding:'5', 55. align:'left' 56. },

57. defaults:{margins:'0 0 5 0'}, 58. items:[{

59. xtype:'button', 60. text: 'Button 1' 61. },{

62. xtype:'tbspacer', 63. flex:1 64. },{

65. xtype:'button', 66. text: 'Button 2' 67. },{

68. xtype:'button', 69. text: 'Button 3' 70. },{

71. xtype:'button', 72. text: 'Button 4', 73. margins:'0' 74. }] 75. }, 'spaced'); 76. } 77. },{

78. xtype:'button',

79. text: 'Multi-Spaced / Align: left', 80. handler: function(){ 81. replace({ 82. layout: { 83. type:'vbox', 84. padding:'5', 85. align:'left' 86. },

87. defaults:{margins:'0 0 5 0'}, 88. items:[{

89. xtype:'button', 90. text: 'Button 1' 91. },{

92. xtype:'tbspacer', 93. flex:1 94. },{

95. xtype:'button', 96. text: 'Button 2' 97. },{

98. xtype:'tbspacer', 99. flex:1 100. },{

101. xtype:'button', 102. text: 'Button 3' 103. },{

104. xtype:'tbspacer', 105. flex:1 106. },{

107. xtype:'button', 108. text: 'Button 4', 109. margins:'0' 110. }]

111. }, 'multi spaced - align left'); 112. } 113. },{

114. xtype:'button', 115. text: 'Align: left', 116. handler: function(){ 117. replace({ 118. layout: { 119. type:'vbox', 120. padding:'5', 121. align:'left' 122. },

123. defaults:{margins:'0 0 5 0'}, 124. items:[{

125. xtype:'button', 126. text: 'Button 1' 127. },{

128. xtype:'button', 129. text: 'Button 2' 130. },{

131. xtype:'button', 132. text: 'Button 3' 133. },{

134. xtype:'button', 135. text: 'Button 4'

136. }]

137. }, 'align left'); 138. } 139. },{

140. xtype:'button', 141. text: 'Align: center', 142. handler: function(){ 143. replace({ 144. layout: { 145. type:'vbox', 146. padding:'5', 147. align:'center' 148. },

149. defaults:{margins:'0 0 5 0'}, 150. items:[{

151. xtype:'button', 152. text: 'Button 1' 153. },{

154. xtype:'button', 155. text: 'Button 2' 156. },{

157. xtype:'button', 158. text: 'Button 3' 159. },{

160. xtype:'button', 161. text: 'Button 4' 162. }]

163. }, 'align center'); 164. } 165. },{

166. xtype:'button', 167. text: 'Align: stretch', 168. handler: function(){ 169. replace({ 170. layout: { 171. type:'vbox', 172. padding:'5', 173. align:'stretch' 174. },

175. defaults:{margins:'0 0 5 0'}, 176. items:[{

177. xtype:'button', 178. text: 'Button 1' 179. },{

180. xtype:'button', 181. text: 'Button 2' 182. },{

183. xtype:'button', 184. text: 'Button 3' 185. },{

186. xtype:'button', 187. text: 'Button 4' 188. }]

189. }, 'align stretch'); 190. } 191. },{

192. xtype:'button',

193. text: 'Align: stretchmax', 194. handler: function(){ 195. replace({ 196. layout: { 197. type:'vbox', 198. padding:'5', 199. align:'stretchmax' 200. },

201. defaults:{margins:'0 0 5 0'}, 202. items:[{

203. xtype:'button', 204. text: 'Jamie' 205. },{

206. xtype:'button', 207. text: 'Aaron' 208. },{

209. xtype:'button', 210. text: 'Tommy' 211. },{

212. xtype:'button', 213. text: 'Ed ' 214. }]

215. }, 'align stretchmax'); 216. } 217. }] 218. },{

219. anchor: '100%', 220. baseCls:'x-plain', 221. layout: { 222. type:'hbox', 223. padding: '0 10 10'

224. },

225. defaults:{

226. margins:'0 5 0 0', 227. pressed: false, 228. toggleGroup:'btns', 229. allowDepress: false 230. }, 231. items: [{

232. xtype:'button',

233. text: 'Flex: Even / Align: center', 234. handler: function(){ 235. replace({ 236. layout: { 237. type:'vbox', 238. padding:'5', 239. align:'center' 240. },

241. defaults:{margins:'0 0 5 0'}, 242. items:[{

243. xtype:'button', 244. text: 'Button 1', 245. flex:1 246. },{

247. xtype:'button', 248. text: 'Button 2', 249. flex:1 250. },{

251. xtype:'button', 252. text: 'Button 3', 253. flex:1 254. },{

255. xtype:'button', 256. text: 'Button 4', 257. flex:1, 258. margins:'0' 259. }]

260. }, 'align flex even'); 261. } 262. },{

263. xtype:'button',

264. text: 'Flex: Ratio / Align: center', 265. handler: function(){ 266. replace({ 267. layout: {

268. type:'vbox', 269. padding:'5', 270. align:'center' 271. },

272. defaults:{margins:'0 0 5 0'}, 273. items:[{

274. xtype:'button', 275. text: 'Button 1', 276. flex:1 277. },{

278. xtype:'button', 279. text: 'Button 2', 280. flex:1 281. },{

282. xtype:'button', 283. text: 'Button 3', 284. flex:1 285. },{

286. xtype:'button', 287. text: 'Button 4', 288. flex:3, 289. margins:'0' 290. }]

291. }, 'align flex ratio'); 292. } 293. },{

294. xtype:'button', 295. text: 'Flex + Stretch', 296. handler: function(){ 297. replace({ 298. layout: { 299. type:'vbox', 300. padding:'5', 301. align:'stretch' 302. },

303. defaults:{margins:'0 0 5 0'}, 304. items:[{

305. xtype:'button', 306. text: 'Button 1', 307. flex:1 308. },{

309. xtype:'button', 310. text: 'Button 2', 311. flex:1

312. },{

313. xtype:'button', 314. text: 'Button 3', 315. flex:1 316. },{

317. xtype:'button', 318. text: 'Button 4', 319. flex:3, 320. margins:'0' 321. }]

322. }, 'align flex + stretch'); 323. } 324. },{

325. xtype:'button',

326. text: 'Pack: start / Align: center', 327. handler: function(){ 328. replace({ 329. layout: { 330. type:'vbox', 331. padding:'5', 332. pack:'start', 333. align:'center' 334. },

335. defaults:{margins:'0 0 5 0'}, 336. items:[{

337. xtype:'button', 338. text: 'Button 1' 339. },{

340. xtype:'button', 341. text: 'Button 2' 342. },{

343. xtype:'button', 344. text: 'Button 3' 345. },{

346. xtype:'button', 347. text: 'Button 4' 348. }]

349. }, 'align pack start + align center'); 350. } 351. },{

352. xtype:'button',

353. text: 'Pack: center / Align: center', 354. handler: function(){ 355. replace({

356. layout: { 357. type:'vbox', 358. padding:'5', 359. pack:'center', 360. align:'center' 361. },

362. defaults:{margins:'0 0 5 0'}, 363. items:[{

364. xtype:'button', 365. text: 'Button 1' 366. },{

367. xtype:'button', 368. text: 'Button 2' 369. },{

370. xtype:'button', 371. text: 'Button 3' 372. },{

373. xtype:'button', 374. text: 'Button 4', 375. margins:'0' 376. }]

377. }, 'align pack center + align center'); 378. } 379. },{

380. xtype:'button',

381. text: 'Pack: end / Align: center', 382. handler: function(){ 383. replace({ 384. layout: { 385. type:'vbox', 386. padding:'5', 387. pack:'end', 388. align:'center' 389. },

390. defaults:{margins:'0 0 5 0'}, 391. items:[{

392. xtype:'button', 393. text: 'Button 1' 394. },{

395. xtype:'button', 396. text: 'Button 2' 397. },{

398. xtype:'button', 399. text: 'Button 3'

400. },{

401. xtype:'button', 402. text: 'Button 4', 403. margins:'0' 404. }]

405. }, 'align pack end + align center'); 406. } 407. }] 408. }] 409. }] 410. }); 411. });

ExtJS4学习笔记(四)---Grid的使用

2011-05-12 来源：本站原创 作者：佚名 (共0 条评论)

Extjs4 Grid创建还是比较容易的，难记、难理解的地方，也就是数据的获取。下面，就创建一个最简单的Grid组件，后面，我们会逐渐丰富这个Grid的功能。

Extjs4 Grid创建还是比较容易的，难记、难理解的地方，也就是数据的获取。下面，就创建一个最简单的Grid组件，后面，我们会逐渐丰富这个Grid的功能。

HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

8. 9. 10. 11. 12.

13.

15.

grid.js：

1. Ext.require([ 2. 'Ext.grid.*', 3. 'Ext.data.*' 4. ]);

5. Ext.onReady(function(){ 6. Ext.define('MyData',{

7. extend: 'Ext.data.Model', 8. fields: [

9. //第一个字段需要指定mapping，其他字段，可以省略掉。 10. {name:'UserName',mapping:'UserName'}, 11. 'Sex', 12. 'Age', 13. 'XueHao', 14. 'BanJi' 15. ] 16. }); 17.

18. //创建数据源

19. var store = Ext.create('Ext.data.Store', { 20. model: 'MyData', 21. proxy: {

22. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 23. type: 'ajax', 24. url: 'mydata.json', 25.

26. reader: {

27. type: 'json', 28. root: 'items',

29. //totalProperty : 'total' 30. } 31. },

32. autoLoad: true 33. }); 34.

35. //创建Grid

36. var grid = Ext.create('Ext.grid.Panel',{ 37. store: store, 38. columns: [

39. {text: \"姓名\", width: 120, dataIndex: 'UserName', sortable: true},

40. {text: \"性别\", flex: 1, dataIndex: 'Sex', sortable: false}, 41. {text: \"年龄\", width: 100, dataIndex: 'Age', sortable: true}, 42. {text: \"学号\", width: 100, dataIndex: 'XueHao', sortable: true}, 43. {text: \"班级\", width: 100, dataIndex: 'BanJi', sortable: true} 44. ],

45. height:400, 46. width:480, 47. x:20, 48. y:40,

49. title: 'ExtJS4 Grid示例', 50. renderTo: 'demo', 51. viewConfig: { 52. stripeRows: true 53. } 54. }) 55. })

mydata.json：当然，你也可以使用任意服务端程序返回json数据（asp?.net?java还是php，看你的爱好了）

1. {

2. \"items\": [ 3. {

4. \"UserName\": \"李彦宏\", 5. \"Sex\": \"男\", 6. \"Age\":25, 7. \"XueHao\":00001, 8. \"BanJi\":\"一班\" 9. }, 10. {

11. \"UserName\": \"马云\", 12. \"Sex\": \"男\", 13. \"Age\":31, 14. \"XueHao\":00002, 15. \"BanJi\":\"二班\" 16. }, 17. {

18. \"UserName\": \"张朝阳\", 19. \"Sex\": \"男\", 20. \"Age\":30, 21. \"XueHao\":00003, 22. \"BanJi\":\"一班\" 23. },

24. {

25. \"UserName\": \"朱俊\", 26. \"Sex\": \"男\", 27. \"Age\":28, 28. \"XueHao\":00004, 29. \"BanJi\":\"一班\" 30. }, 31. {

32. \"UserName\": \"丁磊\", 33. \"Sex\": \"男\", 34. \"Age\":29, 35. \"XueHao\":00005, 36. \"BanJi\":\"二班\" 37. }, 38. {

39. \"UserName\": \"李国军\", 40. \"Sex\": \"男\", 41. \"Age\":30, 42. \"XueHao\":00006, 43. \"BanJi\":\"二班\" 44. }, 45. {

46. \"UserName\": \"王志宝\", 47. \"Sex\": \"男\", 48. \"Age\":25, 49. \"XueHao\":00007, 50. \"BanJi\":\"一班\" 51. } 52. ] 53. }

Extjs4 Grid组件的数据需要几点注意。

第一，就是数据类型，我们可以指定数据类型，比如：

1. var store = Ext.create('Ext.data.ArrayStore', { 2. fields: [

3. {name: 'company'},

4. {name: 'price', type: 'float'}, 5. {name: 'change', type: 'float'}, 6. {name: 'pctChange', type: 'float'},

7. {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 8. ],

9. data: myData

10. });

数据类型分为以下几种： 1、auto（默认） 2、string 3、int 4、float 5、boolean 6、date

第二：Ext.data.Model，示例中，只指定了一个mapping，那么第一个mapping是必须要指定的，从第二个开始，我们就不需要再去指定mapping了，Extjs很聪明，他会根据数据来判断需要的mapping。

ExtJS4学习笔记(五)---Grid分页

2011-05-18 来源：mhzg 作者：佚名 (共0 条评论)

Grid组件，当数据量很大的时候，就需要分页显示，本文介绍如何实现Extjs4 Grid的分页功能

Grid组件，当数据量很大的时候，就需要分页显示，本文介绍如何实现Extjs4 Grid的分页功能。

先看THML代码:

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

8. 9. 10. 11. 12.

13.

15.

这里引用的JS文件，都是相对于Extjs4整个目录的。如果已经将JS和CSS文件剥离并分目录放置了，那么一定要注意修改bootstrap.js。

JS代码：

1. Ext.require([ 2. 'Ext.grid.*', 3. 'Ext.toolbar.Paging', 4. 'Ext.data.*' 5. ]); 6.

7. Ext.onReady(function(){ 8. Ext.define('MyData',{

9. extend: 'Ext.data.Model', 10. fields: [

11. 'title','author',

12. //第一个字段需要指定mapping，其他字段，可以省略掉。 13. {name:'hits',type: 'int'}, 14. 'addtime' 15. ] 16. }); 17.

18. //创建数据源

19. var store = Ext.create('Ext.data.Store', { 20. //分页大小 21. pageSize: 50, 22. model: 'MyData', 23. //是否在服务端排序 24. remoteSort: true, 25. proxy: {

26. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 27. type: 'ajax', 28. url: 'mydata.asp', 29.

30. reader: {

31. root: 'items',

32. totalProperty : 'total' 33. },

34. simpleSortMode: true 35. },

36. sorters: [{ 37. //排序字段。

38. property: 'hits', 39. //排序类型，默认为 ASC 40. direction: 'DESC' 41. }] 42. }); 43.

44. //创建Grid

45. var grid = Ext.create('Ext.grid.Panel',{ 46. store: store, 47. columns: [

48. {text: \"标题\", width: 120, dataIndex: 'title', sortable: true}, 49. {text: \"作者\", flex: 200, dataIndex: 'author', sortable: false}, 50. {text: \"点击数\", width: 100, dataIndex: 'hits', sortable: true}, 51. {text: \"添加时间\", width: 100, dataIndex: 'addtime', sortable: true} 52. ],

53. height:400, 54. width:520, 55. x:20, 56. y:40,

57. title: 'ExtJS4 Grid 分页示例', 58. disableSelection: true, 59. loadMask: true, 60. renderTo: 'demo', 61. viewConfig: { 62. id: 'gv',

63. trackOver: false, 64. stripeRows: false 65. }, 66.

67. bbar: Ext.create('Ext.PagingToolbar', { 68. store: store, 69. displayInfo: true,

70. displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 71. emptyMsg: \"没有数据\" 72. }) 73. })

74. store.loadPage(1); 75. })

关于数据，任何服务端都可以，只要返回相应的数据就可以了。这里简单使用ASP代码做了一些测试用的数据，但是这些测试代码包含了参数接收、基本判断以及分页方法。具体情况具体实施，这些代码只作为抛砖引玉的作用。

ASP代码：

1. <%

2. Response.ContentType = \"text/html\" 3. Response.Charset = \"UTF-8\" 4. %> 5. <%

6. '返回JSON数据,自定义一些测试数据。。

7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。

8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将

之加入SQL的ORDER BY里即可。 9. start = Request(\"start\") 10. limit = Request(\"limit\") 11. If start = \"\" Then 12. start = 0 13. End If

14. If limit = \"\" Then 15. limit = 50 16. End If

17. sorts = Replace(Trim(Request.Form(\"sort\")),\"'\",\"\") 18. dir = Replace(Trim(Request.Form(\"dir\")),\"'\",\"\") 19.

20. Dim counts:counts=300

21. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。 22.

23. Dim Ls:Ls = Cint(start) + Cint(limit) 24. If Ls >= counts Then 25. Ls = counts 26. End If 27.

28. Echo(\"{\")

29. Echo(\"\"\"total\"\":\") 30. Echo(\"\"\"\"&counts&\"\"\) 31. Echo(\"\"\"items\"\":[\") 32. For i = start+1 To Ls 33. Echo(\"{\")

34. Echo(\"\"\"title\"\":\"\"newstitle\"&i&\"\"\"\") 35. Echo(\)

36. Echo(\"\"\"author\"\":\"\"author\"&i&\"\"\"\") 37. Echo(\)

38. Echo(\"\"\"hits\"\":\"\"\"&i&\"\"\"\") 39. Echo(\)

40. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 41. Echo(\) 42. If i44. End If 45. Next 46. Echo(\"]}\")

47. Function Echo(str) 48. Response.Write(str) 49. End Function 50. %>

最后，来张效果图：

ExtJS4学习笔记(六)---多表头Grid

2011-05-19 来源：mhzg 作者：佚名 (共0 条评论)

做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。

做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。

之前有一篇文章，讲的是如何实现Grid的分页功能（地址是：

www.mhzg.net/a/20115/201151811170246.html），本文在此基础上做出修改，达到多表头Grid+分页功能。

先看下效果图：

实现代码如下： HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

8. 9. 10. 11. 12.

13.

14. 15.

group-header.js：

1. Ext.require([ 2. 'Ext.grid.*', 3. 'Ext.toolbar.Paging', 4. 'Ext.util.*', 5. 'Ext.data.*' 6. ]); 7.

8. Ext.onReady(function(){ 9. Ext.define('MyData',{

10. extend: 'Ext.data.Model', 11. fields: [

12. 'title','author',

13. //第一个字段需要指定mapping，其他字段，可以省略掉。 14. {name:'hits',type: 'int'}, 15. 'addtime' 16. ] 17. }); 18.

19. //创建数据源

20. var store = Ext.create('Ext.data.Store', { 21. //分页大小 22. pageSize: 50, 23. model: 'MyData', 24. //是否在服务端排序 25. remoteSort: true, 26. proxy: {

27. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 28. type: 'ajax', 29. url: 'mydata.asp', 30.

31. reader: {

32. root: 'items',

33. totalProperty : 'total' 34. },

35. simpleSortMode: true 36. },

37. sorters: [{ 38. //排序字段。

39. property: 'hits', 40. //排序类型，默认为 ASC 41. direction: 'DESC' 42. }] 43. }); 44.

45. //创建Grid

46. var grid = Ext.create('Ext.grid.Panel',{ 47. store: store, 48. columnLines: true, 49. columns: [{

50. text:\"基本信息\", 51. columns:[

52. {text: \"标题\", width: 120, dataIndex: 'title', sortable: true}, 53. {text: \"作者\", width: 200, dataIndex: 'author', sortable: false}, 54. {text: \"点击数\", width: 100, dataIndex: 'hits', sortable: true}] 55. },

56. {text: \"添加时间\", width: 100, dataIndex: 'addtime', sortable: true} 57. ],

58. height:400, 59. width:520, 60. x:20, 61. y:40,

62. title: 'ExtJS4 多表头Grid带分页示例', 63. disableSelection: true, 64. loadMask: true, 65. renderTo: 'demo', 66. viewConfig: { 67. id: 'gv',

68. trackOver: false, 69. stripeRows: false 70. }, 71.

72. bbar: Ext.create('Ext.PagingToolbar', { 73. store: store, 74. displayInfo: true,

75. displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 76. emptyMsg: \"没有数据\" 77. }) 78. })

79. store.loadPage(1); 80. })

JS代码要注意的地方：

1、记得载入'Ext.util.*',

2、二级表头必须指定宽度，如果不指定的话，会提示错误。如图所示，红框里的项，必须要指定宽度。

服务端代码，这里使用ASP编写，具体解释请参考前一篇文章。

1. <%

2. Response.ContentType = \"text/html\" 3. Response.Charset = \"UTF-8\" 4. %> 5. <%

6. '返回JSON数据,自定义一些测试数据。。

7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。

8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将

之加入SQL的ORDER BY里即可。 9. start = Request(\"start\") 10. limit = Request(\"limit\") 11. If start = \"\" Then 12. start = 0 13. End If

14. If limit = \"\" Then 15. limit = 50 16. End If

17. sorts = Replace(Trim(Request.Form(\"sort\")),\"'\",\"\") 18. dir = Replace(Trim(Request.Form(\"dir\")),\"'\",\"\") 19.

20. Dim counts:counts=300

21. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。 22.

23. Dim Ls:Ls = Cint(start) + Cint(limit) 24. If Ls >= counts Then 25. Ls = counts 26. End If 27.

28. Echo(\"{\")

29. Echo(\"\"\"total\"\":\") 30. Echo(\"\"\"\"&counts&\"\"\)

31. Echo(\"\"\"items\"\":[\") 32. For i = start+1 To Ls 33. Echo(\"{\")

34. Echo(\"\"\"title\"\":\"\"newstitle\"&i&\"\"\"\") 35. Echo(\)

36. Echo(\"\"\"author\"\":\"\"author\"&i&\"\"\"\") 37. Echo(\)

38. Echo(\"\"\"hits\"\":\"\"\"&i&\"\"\"\") 39. Echo(\)

40. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 41. Echo(\) 42. If i47. Function Echo(str) 48. Response.Write(str) 49. End Function 50. %>

ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid）

2011-05-21 来源：mhzg 作者：佚名 (共1 条评论)

项目开发中，Grid组件少不了搜索功能，在Extjs4中，搜索组件以插件的形式出现，而且实现也非常简单，搜索组件位于examples/ux/form目录下，JS文件是SearchField.js。

项目开发中，Grid组件少不了搜索功能，在Extjs4中，搜索组件以插件的形式出现，而且实现也非常简单，搜索组件位于examples/ux/form目录下，JS文件是SearchField.js。

Grid加载搜索功能，要注意的是：

1、开启延迟加载，即Ext.Loader.setConfig({enabled: true});

2、设置插件的目录：Ext.Loader.setPath('Ext.ux', '../../examples/ux'); ，需要注意，插件所在目录一定要正确，否则加载失败，就实现不了所要功能了。

效果图：

初始加载

输入查询条件后

HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

54.

55. 56. 57. 58. 59.

60.

SearchGrid.js：

1. Ext.Loader.setConfig({enabled: true});

2. Ext.Loader.setPath('Ext.ux', '../../examples/ux'); 3. Ext.require([ 4. 'Ext.grid.*', 5. 'Ext.toolbar.Paging', 6. 'Ext.util.*', 7. 'Ext.data.*',

8. 'Ext.ux.form.SearchField' 9. ]); 10.

11. Ext.onReady(function(){ 12. Ext.define('MyData',{

13. extend: 'Ext.data.Model', 14. fields: [

15. 'title','author',

16. //第一个字段需要指定mapping，其他字段，可以省略掉。

17. {name:'hits',type: 'int'}, 18. 'addtime' 19. ] 20. }); 21.

22. //创建数据源

23. var store = Ext.create('Ext.data.Store', { 24. //分页大小 25. pageSize: 50, 26. model: 'MyData', 27. //是否在服务端排序 28. remoteSort: true, 29. proxy: {

30. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 31. type: 'ajax',

32. url: 'searchgrid.asp', 33.

34. reader: {

35. root: 'items',

36. totalProperty : 'total' 37. },

38. simpleSortMode: true 39. },

40. sorters: [{ 41. //排序字段。 42. property: 'hits', 43. //排序类型，默认为 ASC 44. direction: 'DESC' 45. }] 46. }); 47.

48. //创建Grid

49. var grid = Ext.create('Ext.grid.Panel',{ 50. store: store, 51. columnLines: true, 52. columns: [

53. {text: \"标题\", width: 120, dataIndex: 'title', sortable: true}, 54. {text: \"作者\", width: 140, dataIndex: 'author', sortable: false}, 55. {text: \"点击数\", width: 100, dataIndex: 'hits', sortable: true}, 56. {text: \"添加时间\", width: 150, dataIndex: 'addtime', sortable: true} 57. ],

58. height:400, 59. width:520, 60. x:20,

61. y:40,

62. title: 'ExtJS4 SearchGrid-Grid 搜索', 63. disableSelection: true, 64. loadMask: true, 65. renderTo: 'demo', 66. viewConfig: { 67. id: 'gv',

68. trackOver: false, 69. stripeRows: false 70. },

71. dockedItems: [{ 72. dock: 'top', 73. xtype: 'toolbar', 74. items: { 75. width: 300,

76. fieldLabel: '搜索', 77. labelWidth: 50, 78. xtype: 'searchfield', 79. store: store 80. } 81. }, {

82. dock: 'bottom',

83. xtype: 'pagingtoolbar', 84. store: store, 85. pageSize: 25, 86. displayInfo: true,

87. displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 88. emptyMsg: '没有数据' 89. }] 90. 91. })

92. store.loadPage(1); 93. })

代码完成了Grid组件异步加载信息、分页和搜索功能，可以满足一般使用情况了。 服务端代码，由于使用测试数据，这里只使用了最简单的方法来实现搜索效果，实际操作中，需要将查询条件置于SQL语句中，达到搜索效果。

SearchGrid.asp：

1. <%

2. Response.ContentType = \"text/html\" 3. Response.Charset = \"UTF-8\" 4. %>

5. <%

6. '返回JSON数据,自定义一些测试数据。。

7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。

8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将

之加入SQL的ORDER BY里即可。 9. start = Request(\"start\") 10. limit = Request(\"limit\") 11. '查询时获取的参数。 12. query = Request(\"query\") 13. If start = \"\" Then 14. start = 0 15. End If

16. If limit = \"\" Then 17. limit = 50 18. End If

19. sorts = Replace(Trim(Request.Form(\"sort\")),\"'\",\"\") 20. dir = Replace(Trim(Request.Form(\"dir\")),\"'\",\"\") 21.

22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。 23. If query = \"newstitle\" Then 24. Echo(\"{\")

25. Echo(\"\"\"total\"\":\") 26. Echo(\"\"\"1\")

27. Echo(\"\"\) 28. Echo(\"{\")

29. Echo(\"\"\"title\"\":\"\"newstitle\"\"\") 30. Echo(\)

31. Echo(\"\"\"author\"\":\"\"author\"\"\") 32. Echo(\)

33. Echo(\"\"\"hits\"\":\"\"100\"\"\") 34. Echo(\)

35. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 36. Echo(\) 37. Echo(\"]}\") 38. Else

39. Dim counts:counts=300

40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。 41.

42. Dim Ls:Ls = Cint(start) + Cint(limit) 43. If Ls >= counts Then 44. Ls = counts 45. End If 46.

47. Echo(\"{\")

48. Echo(\"\"\"total\"\":\") 49. Echo(\"\"\"\"&counts&\"\"\) 50. Echo(\"\"\"items\"\":[\") 51. For i = start+1 To Ls 52. Echo(\"{\")

53. Echo(\"\"\"title\"\":\"\"newstitle\"&i&\"\"\"\") 54. Echo(\)

55. Echo(\"\"\"author\"\":\"\"author\"&i&\"\"\"\") 56. Echo(\)

57. Echo(\"\"\"hits\"\":\"\"\"&i&\"\"\"\") 58. Echo(\)

59. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 60. Echo(\) 61. If i66. Echo(\"]}\") 67. End If

68. Function Echo(str) 69. Response.Write(str) 70. End Function 71. %>

至此，带搜索功能的Grid就全部完成了。

ExtJS4学习笔记(八)---Grid多选/全选

2011-05-31 来源：mhzg 作者：佚名 (共2 条评论)

Extjs的Grid中，大量数据需要删除操作的时候，总不能一条一条去删除，本文介绍如何在Extjs4 Grid中加入全选功能。

上一篇文章，在Grid中加入了搜索功能（链接地址是：

www.mhzg.net/a/20115/20115219110248.html），但大量数据需要删除操作的时候，总不能一条一条去删除吧，本文介绍如何在Extjs4 Grid中加入全选功能。

先来张效果图：

点击显示所选后：

注意点：

1、需要在JS文件中动态加载“'Ext.selection.CheckboxModel'” 2、服务端要返回数据的id值。

3、Ext.data.Model中，要有id的信息，就是因为JS代码中忘记了写id，导致调试了很久都无法获取id值，从头检查代码的时候才发现错误。

正文： html代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2.

3.

4. 5.

6. 7.

56.

57. 58. 59. 60. 61.

62.

selectgrid.js：

1. Ext.Loader.setConfig({enabled: true});

2. Ext.Loader.setPath('Ext.ux', '../../examples/ux'); 3. Ext.require([ 4. 'Ext.grid.*', 5. 'Ext.toolbar.Paging', 6. 'Ext.util.*', 7. 'Ext.data.*',

8. 'Ext.ux.form.SearchField', 9. 'Ext.selection.CheckboxModel' 10. ]); 11.

12. Ext.onReady(function(){ 13. Ext.define('MyData',{

14. extend: 'Ext.data.Model', 15. fields: [

16. 'id','title','author', 17. {name:'hits',type: 'int'},

18. 'addtime' 19. ] 20. }); 21.

22. //创建数据源

23. var store = Ext.create('Ext.data.Store', { 24. //分页大小 25. pageSize: 50, 26. model: 'MyData', 27. //是否在服务端排序 28. remoteSort: true, 29. proxy: {

30. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 31. type: 'ajax',

32. url: 'selectgrid.asp', 33.

34. reader: {

35. root: 'items',

36. totalProperty : 'total' 37. },

38. simpleSortMode: true 39. },

40. sorters: [{ 41. //排序字段。 42. property: 'hits', 43. //排序类型，默认为 ASC 44. direction: 'DESC' 45. }] 46. }); 47.

48. //创建多选

49. var selModel = Ext.create('Ext.selection.CheckboxModel'); 50. //创建Grid

51. var grid = Ext.create('Ext.grid.Panel',{ 52. store: store, 53. selModel: selModel, 54. columnLines: true, 55. columns: [

56. {text: \"标题\", width: 120, dataIndex: 'title', sortable: true}, 57. {text: \"作者\", width: 140, dataIndex: 'author', sortable: false}, 58. {text: \"点击数\", width: 100, dataIndex: 'hits', sortable: true}, 59. {text: \"添加时间\", width: 150, dataIndex: 'addtime', sortable: true} 60. ],

61. height:400,

62. width:520, 63. x:20, 64. y:40,

65. title: 'ExtJS4 SearchGrid-Grid 搜索', 66.

67. disableSelection: false,//值为TRUE，表示禁止选择行 68. frame: true, 69. loadMask: true, 70. renderTo: 'demo', 71. viewConfig: { 72. id: 'gv',

73. trackOver: false, 74. stripeRows: false 75. },

76. dockedItems: [{ 77. dock: 'top', 78. xtype: 'toolbar', 79. items: [{

80. itemId: 'Button', 81. text:'显示所选',

82. tooltip:'Add a new row', 83. iconCls:'add', 84. handler:function(){

85. var record = grid.getSelectionModel().getSelection(); 86. if(record.length == 0){ 87. Ext.MessageBox.show({ 88. title:\"提示\",

89. msg:\"请先选择您要操作的行!\" 90. //icon: Ext.MessageBox.INFO 91. }) 92. return; 93. }else{

94. var ids = \"\";

95. for(var i = 0; i < record.length; i++){ 96. ids += record[i].get(\"id\") 97. if(i101. Ext.MessageBox.show({ 102. title:\"所选ID列表\", 103. msg:ids

104. //icon: Ext.MessageBox.INFO 105. })

106. } 107. } 108. },'-',{ 109. width: 300,

110. fieldLabel: '搜索', 111. labelWidth: 50, 112. xtype: 'searchfield', 113. store: store 114. }] 115. }, {

116. dock: 'bottom',

117. xtype: 'pagingtoolbar', 118. store: store, 119. pageSize: 25, 120. displayInfo: true,

121. displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 122. emptyMsg: '没有数据' 123. }] 124. 125. })

126. store.loadPage(1); 127.})

服务端selectgrid.asp：

1. <%

2. Response.ContentType = \"text/html\" 3. Response.Charset = \"UTF-8\" 4. %> 5. <%

6. '返回JSON数据,自定义一些测试数据。。

7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。

8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将

之加入SQL的ORDER BY里即可。 9. start = Request(\"start\") 10. limit = Request(\"limit\") 11. '查询时获取的参数。 12. query = Request(\"query\") 13. If start = \"\" Then 14. start = 0 15. End If

16. If limit = \"\" Then

17. limit = 50 18. End If

19. sorts = Replace(Trim(Request.Form(\"sort\")),\"'\",\"\") 20. dir = Replace(Trim(Request.Form(\"dir\")),\"'\",\"\") 21.

22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。 23. If query = \"newstitle\" Then 24. Echo(\"{\")

25. Echo(\"\"\"total\"\":\") 26. Echo(\"\"\"1\")

27. Echo(\"\"\) 28. Echo(\"{\")

29. Echo(\"\"\"title\"\":\"\"newstitle\"\"\") 30. Echo(\)

31. Echo(\"\"\"author\"\":\"\"author\"\"\") 32. Echo(\)

33. Echo(\"\"\"hits\"\":\"\"100\"\"\") 34. Echo(\)

35. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 36. Echo(\) 37. Echo(\"]}\") 38. Else

39. Dim counts:counts=300

40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。 41.

42. Dim Ls:Ls = Cint(start) + Cint(limit) 43. If Ls >= counts Then 44. Ls = counts 45. End If 46.

47. Echo(\"{\")

48. Echo(\"\"\"total\"\":\") 49. Echo(\"\"\"\"&counts&\"\"\) 50. Echo(\"\"\"items\"\":[\") 51. For i = start+1 To Ls 52. Echo(\"{\")

53. Echo(\"\"\"id\"\":\"\"\"&i&\"\"\"\") 54. Echo(\)

55. Echo(\"\"\"title\"\":\"\"newstitle\"&i&\"\"\"\") 56. Echo(\)

57. Echo(\"\"\"author\"\":\"\"author\"&i&\"\"\"\") 58. Echo(\)

59. Echo(\"\"\"hits\"\":\"\"\"&i&\"\"\"\") 60. Echo(\)

61. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 62. Echo(\) 63. If i68. Echo(\"]}\") 69. End If

70. Function Echo(str) 71. Response.Write(str) 72. End Function 73. %>

ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)

2011-06-09 来源：mhzg 作者：佚名 (共4 条评论)

我们可能需要动态修改Grid中的数据，也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图

上一篇文章，在Grid中加入了多选/全选功能（链接地址是：

http://www.mhzg.net/a/20115/20115311100255.html），实际运用中，我们可能需要动态修改Grid中的数据，也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图。看图说话，更有说服力哦。

HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7. />

8.

57.

58. 59.

60. 61. 62.

63.

editgrid.js：

1. Ext.Loader.setConfig({enabled: true});

2. Ext.Loader.setPath('Ext.ux', '../../examples/ux'); 3. Ext.require([ 4. 'Ext.grid.*', 5. 'Ext.toolbar.Paging', 6. 'Ext.util.*', 7. 'Ext.data.*', 8. 'Ext.state.*', 9. 'Ext.form.*',

10. 'Ext.ux.form.SearchField', 11. 'Ext.selection.CellModel', 12. 'Ext.ux.CheckColumn',

13. 'Ext.selection.CheckboxModel' 14. ]); 15.

16. Ext.onReady(function(){ 17. var isEdit = false; 18.

19. function formatDate(value){

20. return value ? Ext.Date.dateFormat(value, 'Y-m-d') : ''; 21. } 22.

23. Ext.define('MyData',{

24. extend: 'Ext.data.Model', 25. fields: [ 26. {name:'id'},

27. {name:'title',type:'string'}, 28. {name:'author'},

29. {name:'hits',type: 'int'},

30. {name:'addtime',type:'date',dataFormat:'Y-m-d'}, 31. {name:'checked',type:'bool'} 32. ] 33. }); 34.

35. //创建数据源

36. var store = Ext.create('Ext.data.Store', { 37. //分页大小 38. pageSize: 50, 39. model: 'MyData', 40. //是否在服务端排序 41. remoteSort: true, 42. autoDestroy: true, 43. proxy: {

44. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 45. type: 'ajax', 46. url: 'editgrid.asp', 47.

48. reader: {

49. root: 'items',

50. totalProperty : 'total' 51. },

52. simpleSortMode: true 53. },

54. sorters: [{ 55. //排序字段。 56. property: 'hits', 57. //排序类型，默认为 ASC 58. direction: 'DESC' 59. }] 60. });

61. //下拉框数据,测试数据。

62. var cbstore = Ext.create('Ext.data.Store', { 63. fields: ['id', 'name'], 64. data : [

65. {\"id\":\"1\",\"name\":\"佚名\"}, 66. {\"id\":\"2\",\"name\":\"管理员\"}, 67. {\"id\":\"3\",\"name\":\"编辑\"}, 68. {\"id\":\"4\",\"name\":\"总编辑\"}, 69. {\"id\":\"5\",\"name\":\"测试员\"} 70. ] 71. }); 72. 73.

74. //创建多选

75. var selModel = Ext.create('Ext.selection.CheckboxModel'); 76. var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { 77. clicksToEdit: 1 78. });

79. //创建Grid

80. var grid = Ext.create('Ext.grid.Panel',{ 81. store: store, 82. selModel: selModel, 83. columnLines: true, 84. columns: [{ 85. id:\"title\", 86. header: \"标题\", 87. width: 110,

88. dataIndex: 'title', 89. sortable: true, 90. field: {

91. allowBlank: false 92. } 93. },{

94. header: \"作者\", 95. width: 120,

96. dataIndex: 'author', 97. id:'gc',

98. sortable: false, 99. field: {

100. xtype: 'combobox', 101. id:'authors', 102. typeAhead: true, 103. triggerAction: 'all', 104. queryMode: 'local', 105. selectOnTab: true, 106. store: cbstore, 107. lazyRender: true, 108. displayField:'name', 109. valueField:'id',

110. listClass: 'x-combo-list-small', 111. listeners:{

112. select : function(combo, record,index){ 113. isEdit = true; 114. } 115. } 116. 117. },

118. renderer:rendererData 119. },{

120. header: \"点击数\", 121. width: 80,

122. dataIndex: 'hits',

123. sortable: true, 124. field: {

125. xtype: 'numberfield', 126. allowBlank: false, 127. minValue: 0, 128. maxValue: 100000 129. } 130. },{

131. header: \"添加时间\", 132. width: 100,

133. dataIndex: 'addtime', 134. sortable: true, 135. renderer: formatDate, 136. field: {

137. xtype: 'datefield', 138. format: 'y-m-d', 139. minValue: '01/01/06' 140. } 141. },{

142. xtype: 'checkcolumn', 143. header:'审核', 144. dataIndex:'checked', 145. width:55 146. }], 147. height:400, 148. width:520, 149. x:20, 150. y:40,

151. title: 'ExtJS4 EditGrid(可编辑的Grid)', 152.

153. disableSelection: false,//值为TRUE，表示禁止选择 154. frame: true,

155. selType: 'cellmodel', 156. loadMask: true, 157. renderTo: 'demo', 158. viewConfig: { 159. id: 'gv',

160. trackOver: false, 161. stripeRows: false 162. },

163. dockedItems: [{ 164. dock: 'top', 165. xtype: 'toolbar', 166. items: [{

167. itemId: 'Button', 168. text:'显示所选',

169. tooltip:'Add a new row', 170. iconCls:'add', 171. handler:function(){

172. var record = grid.getSelectionModel().getSelection(); 173. if(record.length == 0){ 174. Ext.MessageBox.show({ 175. title:\"提示\",

176. msg:\"请先选择您要操作的行!\", 177. icon: Ext.MessageBox.INFO, 178. buttons: Ext.Msg.OK 179. }) 180. return; 181. }else{

182. var ids = \"\";

183. for(var i = 0; i < record.length; i++){ 184. ids += record[i].get(\"id\") 185. if(i189. Ext.MessageBox.show({ 190. title:\"所选ID列表\", 191. msg:ids

192. //icon: Ext.MessageBox.INFO 193. }) 194. } 195. } 196. },'-',{ 197. width: 300,

198. fieldLabel: '搜索', 199. labelWidth: 50, 200. xtype: 'searchfield', 201. store: store 202. }] 203. }, {

204. dock: 'bottom',

205. xtype: 'pagingtoolbar', 206. store: store, 207. pageSize: 25, 208. displayInfo: true,

209. displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 210. emptyMsg: '没有数据'

211. }],

212. plugins: [cellEditing] 213. 214. })

215. store.loadPage(1);

216. grid.on('edit', onEdit, this); 217.

218. function onEdit(){

219. var record = grid.getSelectionModel().getSelection()[0];

220. //这里进行异步操作，关于Extjs的异步操作这里不做演示，仅列出所有值。 221. var title = record.get('title');

222. var author = record.get('author');//注意，这里得到的是id值，而不是name值,

如果没有修改作者，那么得到的值是默认显示的字符串，这个需要在服务端进行判断并处理。 223. var clk = record.get('hits');

224. var addtime = Ext.Date.dateFormat(record.get('addtime'), 'Y-m-d'); 225. var checked = record.get('checked'); 226. Ext.MessageBox.show({ 227. title:\"修改的数据为\",

228. msg:title+\"\\r\\n\"+author+\"\\r\\n\"+clk+\"\\r\\n\"+addtime+\"\\r\\n\"+checked, 229. icon: Ext.MessageBox.INFO, 230. buttons: Ext.Msg.OK 231. }) 232. } 233.

234. function rendererData(value,metadata,record){ 235. if(isEdit){

236. var index = cbstore.find(Ext.getCmp('authors').valueField,value); 237. var record = cbstore.getAt(index); 238. return record.data.name; 239. }else{

240. return value; 241. } 242. 243. } 244.})

editgrid.asp：时间关系，只简单做了些测试数据。

1. <%

2. Response.ContentType = \"text/html\" 3. Response.Charset = \"UTF-8\" 4. %>

5. <%

6. '返回JSON数据,自定义一些测试数据。。

7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。

8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将

之加入SQL的ORDER BY里即可。 9. start = Request(\"start\") 10. limit = Request(\"limit\") 11. '查询时获取的参数。 12. query = Request(\"query\") 13. If start = \"\" Then 14. start = 0 15. End If

16. If limit = \"\" Then 17. limit = 50 18. End If

19. sorts = Replace(Trim(Request.Form(\"sort\")),\"'\",\"\") 20. dir = Replace(Trim(Request.Form(\"dir\")),\"'\",\"\") 21.

22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。 23. If query = \"newstitle\" Then 24. Echo(\"{\")

25. Echo(\"\"\"total\"\":\") 26. Echo(\"\"\"1\")

27. Echo(\"\"\) 28. Echo(\"{\")

29. Echo(\"\"\"title\"\":\"\"newstitle\"\"\") 30. Echo(\)

31. Echo(\"\"\"author\"\":\"\"author\"\"\") 32. Echo(\)

33. Echo(\"\"\"hits\"\":\"\"100\"\"\") 34. Echo(\)

35. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 36. Echo(\) 37. Echo(\"]}\") 38. Else

39. Dim counts:counts=20

40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。 41.

42. Dim Ls:Ls = Cint(start) + Cint(limit) 43. If Ls >= counts Then 44. Ls = counts 45. End If 46.

47. Echo(\"{\")

48. Echo(\"\"\"total\"\":\") 49. Echo(\"\"\"\"&counts&\"\"\) 50. Echo(\"\"\"items\"\":[\") 51. For i = start+1 To Ls 52. Echo(\"{\")

53. Echo(\"\"\"id\"\":\"\"\"&i&\"\"\"\") 54. Echo(\)

55. Echo(\"\"\"title\"\":\"\"newstitle\"&i&\"\"\"\") 56. Echo(\)

57. Echo(\"\"\"author\"\":\"\"author\"&i&\"\"\"\") 58. Echo(\)

59. Echo(\"\"\"hits\"\":\"\"\"&i&\"\"\"\") 60. Echo(\)

61. Echo(\"\"\"addtime\"\":\"\"\"&Now()&\"\"\"\") 62. Echo(\)

63. If i Mod 4 = 0 Then

64. Echo(\"\"\"checked\"\":\"\"true\"\"\") 65. Else

66. Echo(\"\"\"checked\"\":\"\"false\"\"\") 67. End If 68. Echo(\) 69. If i74. Echo(\"]}\") 75. End If

76. Function Echo(str) 77. Response.Write(str) 78. End Function 79. %>

由于4.x有了重大更新，所以很多在3.x中的东西在4.x里并不好使，直接导致了本文迟迟没有发表，原因就出在了更新下拉框后，Grid中显示的是ID号而不是name值。一番查看API及研究，终于发现问题所在，3.x中renderer combobox在4.x并不好用，最后重新读了一遍自己写的代码，才有所顿悟。希望文章能起到一个抛砖引玉的作用，大家一起进步。

ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

2011-07-26 来源：mhzg 作者：mhzg (共3 条评论)

我们将验证码组件，命名为CheckCode。此组件继承自Ext.form.field.Text......

上几篇文章，主要学习了Extjs4 Grid的使用方法，从本篇开始，我们开始其他组件的学习，使用。在登录、注册甚至是发表文章或帖子的时候，都会用到验证码这个东西，那么在EXTJS中，可以使用验证码功能么？答案是肯定的，在EXTJS4之前，也有很多验证码的实现，在Extjs4中，验证码到底如何实现呢？

暂时，我们将验证码组件，命名为CheckCode。此组件继承自Ext.form.field.Text，在实现之前，我们需要写两个样式，分别用来控制验证码的输入框和验证码图片的大小。

CSS样式为：

1. #CheckCode{ float:left;}

2. .x-form-code{width:73px;height:20px;vertical-align:middle;cursor:pointer; float:left

; margin-left:7px;}

记住这两个样式的定义，后面，我们会用到它。 验证码的JS代码：

1. Ext.define('SMS.view.CheckCode',{ 2. extend: 'Ext.form.field.Text', 3. alias: 'widget.checkcode', 4. inputTyle:'codefield', 5. codeUrl:Ext.BLANK_IMAGE_URL, 6. isLoader:true,

7. onRender:function(ct,position){ 8. this.callParent(arguments);

9. this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL}); 10. this.codeEl.addCls('x-form-code');

11. this.codeEl.on('click', this.loadCodeImg, this); 12.

13. if (this.isLoader) this.loadCodeImg(); 14. },

15. alignErrorIcon: function() {

16. this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]); 17. }, 18.

19. loadCodeImg: function() {

20. this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() }); 21. } 22.

23. })

以上代码中，定义了一个“类”，名字是：SMS.view.CheckCode，其实这个名字，相当于extjs 3.x之中的命名空间，以前也提到过。它继承自Ext.form.field.Text，在它的onRender中，我们写了一些代码。其中this.callParent(arguments); 代替了

xxxx.superclass.onRender.call(this, ct, position);在Ext.form.field.Text的基础上，使用createChild方法，创建了一个图片，并为其添加了一个名为x-form-code，而后，给其创建了一个click事件，这个事件实现的功能是，当我们点击验证码图片时，换另外一张图片，也就是常说的：“看不清？换一张功能。”，最后，如果isLoader为True时，调用loadCodeImg方法。至此，验证码功能全部完成了。下面，我们看看如何使用。

新建Login.js文件，定义“类”SMS.view.Login，其全部代码为：

1. Ext.define('SMS.view.Login',{ 2. extend:'Ext.window.Window', 3. alias: 'widget.loginForm',

4. requires: ['Ext.form.*','SMS.view.CheckCode'], 5. initComponent:function(){

6. var checkcode = Ext.create('SMS.view.CheckCode',{ 7. cls : 'key',

8. fieldLabel : '验证码', 9. name : 'CheckCode', 10. id : 'CheckCode', 11. allowBlank : false, 12. isLoader:true,

13. blankText : '验证码不能为空', 14. codeUrl: '/include/checkCode.asp', 15. width : 160 16. })

17. var form = Ext.widget('form',{ 18. border: false, 19. bodyPadding: 10, 20. fieldDefaults: { 21. labelAlign: 'left', 22. labelWidth: 55,

23. labelStyle: 'font-weight:bold' 24. },

25. defaults: {

26. margins: '0 0 10 0' 27. }, 28. items:[{

29. xtype: 'textfield', 30. fieldLabel: '用户名',

31. blankText : '用户名不能为空', 32. allowBlank: false, 33. width:240 34. },{

35. xtype: 'textfield',

36. fieldLabel: '密   码', 37. allowBlank: false,

38. blankText : '密码不能为空', 39. width:240,

40. inputType : 'password' 41. },checkcode], 42. buttons:[{ 43. text:'登录', 44. handler:function(){ 45. 46. } 47. },{

48. text:'取消', 49. handler:function(){ 50. 51. } 52. }] 53. })

54. Ext.apply(this,{ 55. height: 160, 56. width: 280, 57. title: '用户登陆', 58. closeAction: 'hide', 59. closable : false, 60. iconCls: 'login', 61. layout: 'fit', 62. modal : true, 63. plain : true, 64. resizable: false, 65. items:form 66. });

67. this.callParent(arguments); 68. } 69. });

然后在主页面的代码中调用此LoginWindow。

1. requires:['SMS.view.Login']

2. var win;

3. win = Ext.create('SMS.view.Login').show();

最后效果图：

ExtJS4学习笔记(十一)---TabPanel

2011-08-16 来源：mhzg 作者：mhzg (共2 条评论)

创建一个tabPanel有两种方法：一：Ext.createWidget('tabpanel',{...})。二：Ext.create('Ext.tab.Panel',{...})

创建一个tabPanel有两种方法：

一：Ext.createWidget('tabpanel',{...}) 二：Ext.create('Ext.tab.Panel',{...}) 本文分别介绍这两种创建方法。 HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4.

5. 6.

7. 8. 9. 10.

11. 12.

13.

tabs.js：

1. Ext.require('Ext.tab.*'); 2. Ext.onReady(function(){ 3. //第一种方式创建

4. var tabs = Ext.createWidget('tabpanel', { 5. renderTo: 'tab', 6. width: 450, 7. activeTab: 0,

8. margin:'50 10 50 80', 9. defaults :{ 10. bodyPadding: 10 11. }, 12. items: [{

13. //contentEl:'script',//将指定容器中的内容加载到tabPanel的内容区 14. title: 'Tabs-1', 15. closable: true, 16. html:'Tabs-1内容。' 17. },{

18. title: 'Tabs-2', 19. closable: false, 20. html:'Tabs-2内容' 21. }] 22. }); 23.

24. //第二种方式创建

25. var tabs2 = Ext.create('Ext.tab.Panel',{ 26. renderTo: document.body, 27. activeTab: 0, 28. width: 600, 29. height: 250, 30. plain: true, 31. margin:'0 10 0 80', 32. defaults :{

33. autoScroll: true, 34. bodyPadding: 10 35. },

36. items: [{

37. title: 'Tabs-1', 38. html: \"这里显示内容\" 39. },{

40. title: '异步加载内容', 41. loader: {

42. url: 'ajax.htm', 43. contentType: 'html', 44. loadMask: true 45. },

46. listeners: {

47. activate: function(tab) { 48. tab.loader.load(); 49. } 50. } 51. },{

52. title: '异步加载内容1', 53. loader: {

54. url: 'ajax1.htm', 55. contentType: 'html', 56. autoLoad: true,

57. params: 'foo=123&bar=abc' 58. } 59. },{

60. title: '点击触发事件', 61. listeners: {

62. activate: function(tab){ 63. alert(tab.title); 64. } 65. },

66. html: \"点击Tab之后，触发事件，监听事件：activate。activate可传递两

个参数。1、Ext.Component this。2、Object options \" 67. },{

68. title: 'Tabs不可能', 69. disabled: true 70. } 71. ] 72. }) 73. });

第二个tabPanel中有两个html文件，分别是ajax.htm和ajax1.htm，这两个文件代码就不写了，里面就是敲了一些字，而这些字就是tabPanel内容区的那些文字，不过需要注意的一点就是，在异步获取其他文件中的内容时，这些文件返回的编码格式应该是UTF-8...

ExtJS4学习笔记(十二)---选项卡(tabs)

2011-08-25 来源：mhzg 作者：mhzg (共0 条评论)

tab选项卡，是Extjs中常用的组件，tab一般依附于tabpanel，很多时候我也认为tab就是tabpanel,但在官方api中，确实有Ext.tab.Panel和Ext.tab.Tab之分，具体属性、事件、方法，请参考API，tab选项卡可以单独渲染，使用方法是：xtype: 'tab'，本文介绍tab的基本

tab选项卡，是Extjs中常用的组件，tab一般依附于tabpanel，很多时候我也认为tab就是tabpanel,但在官方api中，确实有Ext.tab.Panel和Ext.tab.Tab之分，具体属性、事件、方法，请参考API，tab选项卡可以单独渲染，使用方法是：xtype: 'tab'，本文介绍tab的基本用法。

HTML代码：除了加载基本库以外，定义了一些CSS样式，这些CSS基本没用，就是我看着所有组件靠着BODY太不舒服了。。

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4.

5. 6.

7. 8. 9. 10. 14. 15. 16.

17.

tabs1.js：

1. Ext.require('Ext.tab.*'); 2. Ext.onReady(function(){ 3. var currentItem;

4. var tabs = Ext.createWidget('tabpanel', { 5. renderTo: 'tab', 6. resizeTabs: true, 7. enableTabScroll: true, 8. margin:'10', 9. width: 600, 10. height: 250, 11. defaults: {

12. autoScroll:true, 13. bodyPadding: 10 14. }, 15. items: [{

16. title: '选项卡', 17. html: '选项卡内容', 18. closable: true 19. }] 20. 21. }); 22.

23. var index = 0; 24.

25. function addTab (closable) { 26. ++index; 27. tabs.add({

28. title: '新选项卡- ' + index,

29. html: '新选项卡内容 ' + index + '

', 30. closable: !!closable 31. }).show(); 32. } 33.

34. Ext.createWidget('button', { 35. renderTo: 'add',

36. text: '创建可关闭选项卡', 37. handler: function () { 38. addTab(true); 39. } 40. }); 41.

42. Ext.createWidget('button', { 43. renderTo: 'add',

44. text: '创建不可关闭选项卡', 45. handler: function () { 46. addTab(false); 47. },

48. style: 'margin-left: 8px;' 49. }); 50. });

ExtJS4学习笔记(十三)---上传文件(upload)

2011-08-30 来源：mhzg 作者：mhzg (共0 条评论)

本文介绍Extjs4文件上传示例，Extjs4中，主要使用up('form').getForm().submit()方法来实现文件的上传，在submit方法中，指定其type属性

本文介绍Extjs4文件上传示例，Extjs4中，主要使用up('form').getForm().submit()方法来实现文件的上传，在submit方法中，指定其type属性,这点很重要，如果不指定，那么在上传完成后的处理中，除非服务端不返回数据，否则客户端就会报错。实例代码如下：

upload.html：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4.

5. 6.

7. 8. 9. 10. 11. 12.

13.

upload.js：

1. Ext.onReady(function(){

2. Ext.create('Ext.form.Panel', { 3. title: '文件上传示例--MHZG.NET', 4. width: 400, 5. bodyPadding: 10, 6. margin:'50 10 50 80', 7. frame: true, 8. renderTo: 'upload', 9. items: [{

10. xtype: 'filefield', 11. name: 'fileName', 12. fieldLabel: '上传', 13. labelWidth: 50, 14. msgTarget: 'side', 15. allowBlank: false, 16. anchor: '100%', 17. buttonText: '选择文件' 18. }], 19.

20. buttons: [{ 21. text: '上传',

22. handler: function() {

23. var form = this.up('form').getForm(); 24. if(form.isValid()){ 25. form.submit({

26. url: 'upload.asp', 27. type:'ajax',

28. waitMsg: '正在保存文件...', 29. success: function(fp, o) {

30. // Ext.Msg.alert('提示信息', '文件成功上传,文件名字为：

'+o.result.file);

31. Ext.Msg.show({ 32. title:'提示信息',

33. msg:'文件上传成功
上传文件名为：'+o.result.file, 34. minWidth:200, 35. modal:true, 36. buttons:Ext.Msg.OK 37. })

38. form.findField('fileName').setRawValue(''); 39. } 40. });

41. } 42. } 43. }] 44. }); 45. });

服务端文件upload.asp的内容就不写了，由于在文件中用到了各种无组件上传代码，所以比较杂乱，注意一点就可以，在任何类型的服务端处理文件中，在处理完上传之后，给客户端返回一段JSON，客户端就可以通知客户上传完成。服务端处理完上传之后返回的JSON字符串为如下类型：{success:true,file:\"\"\"&fileName&\"\"\，JSON字符串可以任意组合，这里的fileName为上传后文件地址+文件名（/UploadFile/2011830.gif），以便于客户端进行其他操作。

最后，在代码中用到了form.findField('fileName').setRawValue('');，这句是清空file选择框，因为用form.reset();根本无法清除file选择框中的内容，无奈之下用了这个办法，如果大家有更好的办法，欢迎留言指正。。

ExtJS4学习笔记(十四)--- ComponentQuery

2011-10-20 来源：mhzg 作者：mhzg (共1 条评论)

对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类，这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。

对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类，这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。在extjs3.x中，查找组件的方式有很多，例如：（ID组件ID）、(ref组件引用)、（items.get(0)组件的层级）。在extjs4.0中，则多了ComponentQuery。利用这个类，将更加方便的查找组件。下面，则是将extjs3和extjs4各种查找组件的方式做下对比。

Extjs3.x：

ID：这就是所熟知的Ext.getCmp(“组件ID”)，虽然说这种方式查找组件最直接，也最容易，但是如果随着程序体积变大，组件越来越多，那么可能会发生组件ID相同的事情发生，这样一来，就可能发生显示的问题和获取对象不正常。

ref：在EXTJS3中，所有的组件都会有一个ref属性，也就是reference的意思。这种方式是通过对组件的引用而得到组件对象。例如：ref:’mypanel’，但是这种方式的局限性在于，他只能查找不同层级之间的组件。也就是说A[a,b,c] C[d,e,f]，这样的方式，使用ref非常方便，但如果是B[c,c,d]这样的方式，就会出现问题，因为在某一层级上，出项了两个相同的组件。

items.get(0)：这种方式是通过首先获得组件中元素的一个数组，然后通过数组获得想要的组件对象，这种方式，我们一般不会用到，因为，他非常不灵活，如果我们的元素层级发生改变的话，我们将不能获取我们想要的组件，维护起来也非常困难。所以，这种方式，是用的最少的一种方式。

在Extjs4.0中，我们依然可以沿用Extjs3.x中查找组件的方式，但是在Extjs4.0中，我们可以利用ComponentQuery，方便找到对应组件。

1、 通过组件ID获取组件：\"#组件ID”，如果通过这种方式，那么一定要记住在组件ID前添加#号。

2、 得到某一组件下所有的指定类型的组件：\"panel>button”，这种方式是查找所有panel组件下的所有button组件。

3、 通过xtype：\"treepanel”或\".treepanel

4、如果想获取所有button并且action为save的button，则可以使用

\"button[action=save] \"，又或者获取所有panel，并且autoscroll属性为true的panel，则可以使用\"panel[autoScroll=true]\"

还有两种方式，是查找某一组件的子组件或上级组件，例如： 1、查找window下的form：win.down(“form”)

2、查找button的父组件window:button.up(“window”);

最明显的例子就是我们在extjs4.0使用MVC模式进行开发的时候，经常会在control控制中大量使用'viewport > panel'，’edit button[action=save]’这类查找，当我们点击button进行数据保存的时候，我们会使用

1. var win = button.up('window'), 2. form = win.down('form'), 3. record = form.getRecord(),

这类型的查找进行数据更新。

最后，在extjs4.0 MVC模式中，经常会碰到

1. refs:[

2. {ref: 'menu',selector: 'tablepanel'}, 3. {ref: 'feedList', selector: 'feedlist'}, 4. {

5. ref: 'feedWindow', 6. selector: 'feedwindow', 7. autoCreate: true, 8. xtype: 'feedwindow' 9. }

10. ]

这样的书写方式。有很多人问我这是什么意思，查API也找不到。网络上也找不到，其实看extjs3.x中查找组件的方式，就会明白了。Refs是一个查找并匹配组件的集合，集合里面则指定了需要的操作，即查找一个组件，而找到的这个组件所匹配组件就是selector指定的，用上面代码一条{ref: 'menu',selector: 'tablepanel'}来稍做解释，即查找menu组件（其实是一颗树），点击树节点，结果将在'tablepanel'中显示。这样解释可能比较含糊，那么就用官方例子做个解释吧。{ref: 'feedData', selector: 'feedlist dataview'}。这条的含义是查找'feedData'，将'feedData'显示在'feedlist的子组件dataview'上。

总结下，就是在ExtJS4中所有的组件都有一个query方法，这个方法就是ComponentQuery的实现。当然，如果还是不明白的话，就可以使用：

Ext.ComponentQuery.query(\"tabpanel\"); Ext.ComponentQuery.query(\"#mytree\")

等等。实在extjs4.0实际使用过程中，如果要调用或查找组件，exjts会自动调用ComponentQuery的query方法来查找对应组件。

例子：

1. init:function(){ 2. this.control({

3. 'smsmenu': {//这里不必写全部的代码Ext.ComponentQuery.query(„); 4. itemmousedown: this.loadMenu 5. } 6. }) 7. }

这就是本节所学到的内容，如果文中有错误或有更好的方法，欢迎留言交流。我们一起学习，共同进步！！

ExtJS4学习笔记(十五)---Ext.data.Model

2011-10-24 来源：互联网 作者：佚名 (共1 条评论)

extjs4.0中，在data类中新增加了一个Model（模型类），这个类有点类似于extjs3.x中的record。Model类功能非常强大，尤其在extjs4.0 MVC开发中，非常实用。

extjs4.0中，在data类中新增加了一个Model（模型类），这个类有点类似于extjs3.x中的record。Model类功能非常强大，尤其在extjs4.0 MVC开发中，非常实用。

如何定义Model类：

1. Ext.regModel(\"Student\",{ 2.

3. fields:[ 4.

5. {name:\"name\",type:\"string\"}, 6. {name:\"class\",type:\"string\"} 7. ] 8. });

Model类中最重要的属性就是Fields，这个属性接受一个数组，用来设置显示数据中所包含的字段，\"Student\"设置了该类的名字。

Model类的功能：

1. Ext.regModel(\"Student\",{ 2. fields:[

3. {name:\"name\",type:\"string\"},

4. {name:\"class\",type:\"string\",convert:function(val){ 5. if(val==\"1\"){return 6. \"一班\"}; 7. if(val==\"2\"){return 8. \"二班\"}; 9. if(val==\"3\"){return 10. \"三班\"}； 11. }} 12. ] 13. });

首先我们来看一下fields属性中的功能，例如：我们现在定义了一个如上的Model类，然后，数据源返回班级（class）这个属性时。格式为（1、2、3），如果我们把这样的数据呈现出来，那么将显示的很不友好。所以，我们要在呈现之前，对数据做一个转换。把原本不友好的数据，转换成有好的数据，这就用到了。fields中的convert属性。

1. var student=new Student({ 2. name:\"test\", 3. 4.

5. class:\"3\" 6. 7.

8. });

2、定义好一个Model类之后，我们就可以使用这个Model类。最简单的方式，我们是直接new一个Model类的对象，然后将我们的数据信息加载到对象中，有点类似于Ext3.X中的record的对象的使用。

上述代码我们根据Student的模型类，定义了一个该类的对象，但在实际应用程序中，像这样的情况很少，毕竟我们的数据不一定都是这种一成不变的数据，有时候我们需要从后台加载我们的数据，然后给于我们的model类。这就需要我们的模型类有能够请求后台的能力，这也是Model中提供的第二个功能，Model中提供一个属性proxy（代理）。这个proxy中有几个比较重要的属性（type、url、reader），type属性值是一个字符串形式，用来表明。该代理的一种类型，具体的可以查看API中了解有哪些类型，url也就是请求后台的url。reader，也就是我们要用什么样的阅读器，来解析我们的数据：

1. Ext.regModel(\"Student\",{ 2. 3.

4. fields:[ 5. 6.

7. {name:\"name\",type:\"string\"},

8. {name:\"class\",type:\"string\",convert:function(val){ 9. if(val==\"1\"){return \"一班\"}; 10. if(val==\"2\"){return \"二班\"}; 11. if(val==\"3\"){return \"三班\"}； 12. }} 13. ]， 14. proxy:{ 15. type:\"rest\",

16. url:\"server/service.aspx\", 17. reader:\"json\" 18. } 19. }); 20. 21.

22. Student.load(001,{ 23. 24.

25. success:function(student){ 26. //处理加载完成的逻辑 27. } 28. });

service.aspx返回的数据格式：

{id:001,name:\"zhangsan\

经过上述的设置，我们的Model就可以与后台交互，并要求后台返回我们想要的数据了，这个也是之前record类所办不到的。

3、在我们的应用程序中，可能我们定义的Model不止一个。但是，他们之间可能都是独立的，没有任何的关系，但是，在我们的应用程序中可能在后台返回的数据中存在一定的联系，而且我们又想让这些Model之间存在一定的联系，这样我们在处理起来，会比较简单一些。大家看下边的一段数据。

1. {

2. id:\"009\", 3. name:\"Jerry\", 4. subjects:[

5. {id:\"001\",name:\"English\"}, 6. 7.

8. {id:\"002\",name:\"Mathematics\"} 9. ] 10. }

在上述的数据中，科目和学生之间是有一定的联系的。所以，我们也在想，解析数据的时候，让他们保持这种联系，以便于我们更好的解析数据。这样我们就用到了Model中的belongsTo和hasMany这样两个属性。首先要解析这样的数据，我们需要定义好我们的Model类。如下:

1. Ext.regModel(\"subject\",{ 2. 3.

4. fields:[

5. {name:\"id\",type:\"string\"}, 6. {name:\"name\",type:\"string\"} 7. ],

8. belongsTo:\"Stdudent\" 9. }); 10. 11.

12. 13.

14. Ext.regModel(\"Student\",{ 15. fields:[

16. {name:\"id\",type:\"string\"}, 17. {name:\"name\",type:\"string\"} 18. 19. 20. ], 21. 22. 23. proxy:{ 24. type:\"rest\",

25. url:\"servicee/servicee.aspx\", 26. reader:\"json\" 27. },

28. hasMany:[{model:\"subject\",name:\"subjects\"}] 29. 30. 31. });

在我们定义好Model后，下面我们就可以加载并解析我们的数据了。

1. Student.load(\"009\",{ 2. 3.

4. success:function(student){ 5. 6.

7. alert(student.get(\"id\")); 8. 9.

10. alert(student.subjects().getCount());//我们可以直接访问该学生的科目 11. } 12. }) 13. });

4、在ExtJS4的Model中还提供了对字段列的验证功能。我们想验证字段只需要设置Model类的validations属性即可，代码如下：

1. Ext.regModel(\"Student\",{ 2. fields:[

3. {name:\"id\",type:\"string\"}, 4. {name:\"name\",type:\"string\"} 5. 6. 7. ], 8. 9. 10. proxy:{ 11. type:\"rest\", 12. url:\"data/1.aspx\", 13. reader:\"json\" 14. },

15. hasMany:[{model:\"subject\",name:\"subjects\"}]， 16. 17.

18. validations:[

19. {type:\"presence\",field:\"id\"}, 20. 21.

22. {type:\"length\",field:\"name\",min:3} 23. ] 24. 25. 26. }); 27. 28.

29. var student=new Student({id:\"001\",name:\"z\"}); 30. 31.

32. var stuvalidate=student.validate();//得到验证类 33. 34.

35. stuvalidate.isValid();//返回验证结果true或false 36. 37.

38. stuvalidate.each(function(error){ 39. 40.

41. alert(error.field+\" \"+error.message);//遍历验证的信息 42. });

原文链接：http://blog.sina.com.cn/s/blog_7778950d0100xgel.html

ExtJS4学习笔记(十六)---Combobox三级联动

2011-10-28 来源：mhzg 作者：mhzg (共0 条评论)

很多网友在问，Extjs4.0 ComboBox如何实现，好在之前用3.x实现过一个三级联动，如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是，3.x中的model:'local'在Extjs4.0中用queryMode: 'local'来表示，而且在3.x中Load数据时用reload，但是在extjs4.0中要

很多网友在问，Extjs4.0 ComboBox如何实现，好在之前用3.x实现过一个三级联动，如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是，3.x中的model:'local'在Extjs4.0中用queryMode: 'local'来表示，而且在3.x中Load数据时用reload，但是在extjs4.0中要使用load来获取数据。如下图：

代码部分 先看HTML代码：

1. /xhtml1/DTD/xhtml1-transitional.dtd\"> 2. 3.

4. 5.

6. 7.

8. 9. 10. 11. 12. 13.

14.

简单的很，就是加载了基本的CSS文件和JS文件，并且加载自定义的combobox.js文件。

combobox.js：

1. Ext.require('Ext.*'); 2. Ext.onReady(function(){ 3. //定义ComboBox模型 4. Ext.define('State', {

5. extend: 'Ext.data.Model', 6. fields: [

7. {type: 'int', name: 'id'}, 8. {type: 'string', name: 'cname'} 9. ] 10. }); 11.

12. //加载省数据源

13. var store = Ext.create('Ext.data.Store', { 14. model: 'State', 15. proxy: {

16. type: 'ajax',

17. url: 'city.asp?act=sheng&n='+new Date().getTime()+'' 18. },

19. autoLoad: true, 20. remoteSort:true 21. });

22. //加载市数据源

23. var store1 = Ext.create('Ext.data.Store', { 24. model: 'State', 25. proxy: {

26. type: 'ajax',

27. url: 'city.asp?act=shi&n='+new Date().getTime()+'' 28. },

29. autoLoad: false, 30. remoteSort:true 31. });

32. //加载区数据源

33. var store2 = Ext.create('Ext.data.Store', { 34. model: 'State', 35. proxy: {

36. type: 'ajax',

37. url: 'city.asp?act=qu&n='+new Date().getTime()+''

38. },

39. autoLoad: false, 40. remoteSort:true 41. }); 42. 43. 44.

45. Ext.create(\"Ext.panel.Panel\",{ 46. renderTo: document.body, 47. width:290, 48. height:220,

49. title:\"城市三级联动\", 50. plain: true, 51. margin:'30 10 0 80',

52. bodyStyle: \"padding: 45px 15px 15px 15px;\", 53. defaults :{

54. autoScroll: true, 55. bodyPadding: 10 56. }, 57. items:[{

58. xtype:\"combo\", 59. name:'sheng', 60. id : 'sheng', 61. fieldLabel:'选择省', 62. displayField:'cname', 63. valueField:'id', 64. store:store,

65. triggerAction:'all', 66. queryMode: 'local', 67. selectOnFocus:true, 68. forceSelection: true, 69. allowBlank:false, 70. editable: true, 71. emptyText:'请选择省', 72. blankText : '请选择省', 73. listeners:{

74. select:function(combo, record,index){ 75. try{

76. //userAdd = record.data.name; 77. var parent=Ext.getCmp('shi'); 78. var parent1 = Ext.getCmp(\"qu\"); 79. parent.clearValue(); 80. parent1.clearValue();

81. parent.store.load({params:{param:this.value}});

82. }

83. catch(ex){

84. Ext.MessageBox.alert(\"错误\",\"数据加载失败。\"); 85. } 86. } 87. } 88. }, 89. {

90. xtype:\"combo\", 91. name:'shi', 92. id : 'shi',

93. fieldLabel:'选择市', 94. displayField:'cname', 95. valueField:'id', 96. store:store1, 97. triggerAction:'all', 98. queryMode: 'local', 99. selectOnFocus:true, 100. forceSelection: true, 101. allowBlank:false, 102. editable: true, 103. emptyText:'请选择市', 104. blankText : '请选择市', 105. listeners:{

106. select:function(combo, record,index){ 107. try{

108. //userAdd = record.data.name; 109. var parent = Ext.getCmp(\"qu\"); 110. parent.clearValue();

111. parent.store.load({params:{param:this.value}}); 112. }

113. catch(ex){

114. Ext.MessageBox.alert(\"错误\",\"数据加载失败。\"); 115. } 116. } 117. } 118. }, 119. {

120. xtype:\"combo\", 121. name:'qu', 122. id : 'qu',

123. fieldLabel:'选择区', 124. displayField:'cname', 125. valueField:'id',

126. store:store2, 127. triggerAction:'all', 128. queryMode: 'local', 129. selectOnFocus:true, 130. forceSelection: true, 131. allowBlank:false, 132. editable: true, 133. emptyText:'请选择区', 134. blankText : '请选择区', 135. } 136. ] 137. }) 138.});

上述代码中，如果在ComboBox直接定义store数据源，会出现这样一种情况，那就是当选择完第一个省，点击第二个市的时候，会闪一下，再点击，才会出现市的数据。那么要解决这样的情况，那么必须先要定义好省、市、区的数据源。那么再点击的时候，就不会出现上述情况了。

代码中，使用store为省的数据，设置其autoLoad为true，那么页面第一次加载的时候，就会自动加载省的数据，然后给省和市添加了监听select，作用在于当点击省的时候，要清空市和区的数据，并根据当前选定的值去加载对应的数据到市的数据源中。当然store1和store2原理是一样的。

最后，服务端要根据传的值进行数据检索及返回正确数据，这里没有从数据库中查询数据，而只是简单的写了一些测试代码，相信extjs代码没有任何的问题了，那么服务端返回数据，就不是一件很重要的事情了。

City.asp：

1. <%@LANGUAGE=\"VBSCRIPT\" CODEPAGE=\"65001\"%> 2. <%

3. Response.ContentType = \"text/html\" 4. Response.Charset = \"UTF-8\" 5. %> 6. <%

7. Dim act:act = Request(\"act\") 8. Dim param : param = Request(\"param\") 9. If act = \"sheng\" Then 10. Response.Write(\"[\")

11. Response.Write(\"{\"\"cname\"\":\"\"北京市\"\) 12. Response.Write(\"{\"\"cname\"\":\"\"内蒙古自治区\"\) 13. Response.Write(\"]\") 14. End If

15. If act = \"shi\" Then

16. If param = \"110000\" Then 17. Response.Write(\"[\")

18. Response.Write(\"{\"\"cname\"\":\"\"市辖区\"\) 19. Response.Write(\"{\"\"cname\"\":\"\"市辖县\"\) 20. Response.Write(\"]\") 21. ElseIf param = \"150000\" Then 22. Response.Write(\"[\")

23. Response.Write(\"{\"\"cname\"\":\"\"呼和浩特市\"\) 24. Response.Write(\"{\"\"cname\"\":\"\"包头市\"\) 25. Response.Write(\"]\") 26. End If 27. End If

28. If act = \"qu\" Then

29. If param = \"110100\" Then 30. Response.Write(\"[\")

31. Response.Write(\"{\"\"cname\"\":\"\"朝阳区\"\) 32. Response.Write(\"{\"\"cname\"\":\"\"昌平区\"\) 33. Response.Write(\"]\") 34. ElseIf param = \"110200\" Then 35. Response.Write(\"[\")

36. Response.Write(\"{\"\"cname\"\":\"\"密云县\"\) 37. Response.Write(\"{\"\"cname\"\":\"\"房山县\"\) 38. Response.Write(\"]\") 39. ElseIf param = \"150100\" Then 40. Response.Write(\"[\")

41. Response.Write(\"{\"\"cname\"\":\"\"回民区\"\) 42. Response.Write(\"{\"\"cname\"\":\"\"新城区\"\) 43. Response.Write(\"]\") 44. ElseIf param = \"150200\" Then 45. Response.Write(\"[\")

46. Response.Write(\"{\"\"cname\"\":\"\"青山区\"\) 47. Response.Write(\"{\"\"cname\"\":\"\"东河区\"\) 48. Response.Write(\"]\") 49. End If 50. End If 51. %>

如果大家有更好的实现方法，请留言指正或加我的QQ群一起分享。QQ群号码：165912867