1. 基本概述
ExtJS不僅有令人眩目的UI組件還有非常完善的數據模型,它將整個數據讀取過程分解為幾個相互配合的獨立部分,可以根據數據結構的不同和獲取方式的不同,對這些部分進行靈活的組合,最終達到靈活使用數據的目的。
其中,Ext.data.Model數據實體模型是真實世界中實體對象在應用系統中的反映,它包含字段集和處理數據的函數,它的前身是ExtJS 3.x以及以前版本中的Ext.data.Record類,如圖:
2. 創建、實例化Model
ExtJS4.x數據模型中的Model其實可以簡單的理解為DB中的Table、Java中的Class等,我們通過一個簡單的例子來瞭解下。
1. (function() {
2. Ext.onReady(function() {
3. Ext.define('person', {
4. extend: 'Ext.data.Model',
5. fields: [{
6. name: 'name',
7. type: 'auto'
8. }, {
9. name: 'age',
10. type: 'int'
11. }, {
12. name: 'email',
13. type: 'auto'
14. }]
15. });
16.
17. Ext.regModel('user', {
18. fields: [{
19. name: 'name',
20. type: 'auto'
21. }, {
22. name: 'age',
23. type: 'int'
24. }, {
25. name: 'email',
26. type: 'auto'
27. }]
28. });
29.
30. var p = new person({
31. name: 'Elvin.Cracker',
32. age.com'
34. });: 24,
33. email: 'elvin.cracker@gmail
35. // alert(p.get('name'));
36.
37. var p1 = Ext.create('person', {
38. name: 'Elvin.Cracker',
39. age: 24,
40. email: 'elvin.cracker@gmail.com'
41. });
42. // alert(p1.get('age'));
43.
44. // var p = Ext.ModelManager.create({
45. var p2 = Ext.ModelMgr.create({
46. name: 'Elvin.Cracker',
47. age: 24,
48. email: 'elvin.cracker@gmail.com'
49. }, 'person');
50. // alert(p2.get('email'));
51.
52. alert(person.getName());
53. });
54. })();
在上面的例子中,我們介紹瞭兩種方式創建Model類,一種是使用Ext.define的方式,另外一種是Ext.regModel的方式。在MVC的設計過程當中第一種顯然不是最合適的,因為每次都要寫繼承Ext.data.Model,其中Ext.regModel的返回值其實就是Ext.data.Model對象。www.aiwalls.com
除此之外,我們也介紹瞭三種方式創建Ext.data.Model的實例對象,第一種方式通過new關鍵字創建,第二種方式使用Ext.create方式創建,第三種使用Model的統一管理類Ext.ModelManager來創建,這個使用的是Ext.ModelManager的別名Ext.ModelMgr,效果是一樣的。
3. 數據驗證
數據驗證(Validation)也是非常重要、而且使用頻繁的一個知識點,我們還是先通過一個簡單的例子瞭解下。
1. (function() {
2. Ext.data.validations.lengthMessage = '錯誤的長度';
3. Ext.onReady(function() {
4. Ext.apply(Ext.data.validations, {
5. age: function(config, value) {
6. if (value === undefined || value === null) {
7. return false;
8. }
9.
10. var min = config.min;
11. var max = config.max;
12. if (min <= value && value <= max) {
13. return true;
14. } else {
15. this.ageMessage = this.ageMessage + ', 他(她)的范圍應該在[' + min + '~' + max + ']';
16. return false;
17. }
18. },
19. ageMessage: '錯誤的年齡大小'
20. });
21.
22. Ext.define('person', {
23. extend: 'Ext.data.Model',
24. fields: [{
25. name: 'name',
26. type: 'auto'
27. }, {
28. name: 'age',
29. type: 'int'
30. }, {
31. name: 'email',
32. type: 'auto'
33. }],
34. validations: [
35. {type: 'length', field: 'name', min: 2, max: 6},
36. {type: 'age', field: 'age', min: 0, max: 150}
37. ]
38. });
39.
40. var p = Ext.create('person', {
41. name: 'Elvin.Cracker',
42. age: -24,
43. email: 'elvin.cracker@gmail.com'
44. });
45.
46. var errors = p.validate();
47. var message = [];
48. errors.each(function(v) {
49. message.push(v.field + ' ' + v.message);
50. });
51. alert(message.join('\n'));
52. });
53. })();
在上面的例子中,我們使用瞭兩種數據驗證的方式,第一種為ExtJS自帶的驗證方式,另外一種為我們自定義的方式。ExtJS數據驗證是通過validations實現的,其中驗證長度官方提供瞭使用方法:
1. validations: [{type: 'length', field: 'name', min: 2}]
但是在大多數情況下,官方提供的數據驗證的方式並不能滿足我們的日常應用,我們就需要自定義數據驗證。我們可選的方式大概有兩種,第一種我們可以自定義一個類,然後繼承validations,再擴展其功能,第二種我們通過改造原生類的方式進行實現。
1. apply( Object object, Object config, [Object defaults] ) : Object
● 第一個參數是指所要擴展的原生類
● 第二個參數是指要擴展的屬性
● 第三個參數是指傳遞的默認參數
其中,我們要區分Ext.apply和Ext.applyIf,Ext.apply所以定的屬性即使和原生類有相同的,也不會覆蓋,而Ext.applyIf則會覆蓋原生類屬性。擴展屬性的方法如何寫呢?我們之需要看下原生類提供的基本方法的源代碼,依樣畫葫蘆即可。