Data Model of extjs4.x

Source: Internet
Author: User

1. Basic overview
Extjs not only has a dazzling UI component but also has a very well-developed data model. It splits the entire data reading process into several independent parts that work together, you can flexibly combine these parts based on different data structures and acquisition methods to achieve flexible data use.
Among them, ext. data. model data entity model is a reflection of the real world entity objects in the application system. It contains a field set and a function for processing data. Its predecessor is extjs 3. X and ext. data. record class,

2. Create and instantiate a model
The model in the extjs4.x data model can be simply understood as the table in dB and the class in Java. Let's take a simple example to learn about it.
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. E-mail: '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 .})();
In the preceding example, we introduce two methods to create a model class: Ext. Define and Ext. regmodel. In the MVC design process, the first one is obviously not the most appropriate, because every time you write to inherit Ext. data. model, where Ext. regmodel returns Ext. data. model object. Www.2cto.com
In addition, we also introduced three methods to create Ext. data. the instance object of the model. The first method is to use the new keyword, and the second method is to use Ext. create method. The third method is to use the unified model management class Ext. modelmanager, Which is Ext. the alias Ext. modelmgr, the effect is the same.
3. Data Verification
Data validation is also a very important and frequently used knowledge point. Let's take a simple example first.
1. (function (){
2. Ext. Data. validations. lengthmessage = 'invalid length ';
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 + '. His/Her range should be [' + min + '~ '+ MAX +'] ';
16. Return false;
17 .}
18 .},
19. agemessage: 'wrong age size'
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 .})();
In the above example, we use two data verification methods. The first is the built-in verification method of extjs, and the other is the custom method. Extjs data verification is implemented through validations. The verification length is officially provided:
1. validations: [{type: 'length', field: 'name', Min: 2}]
However, in most cases, the official data verification method does not meet our daily application, and we need custom data verification. There are two optional methods. The first method is to customize a class, inherit validations, and then extend its functions. The second method is implemented by modifying the native class.
1. Apply (Object object, object config, [object defaults]): Object
● The first parameter refers to the native class to be extended.

● The second parameter refers to the attribute to be extended.
● The third parameter refers to the passed default parameter.
We need to distinguish Ext. apply and ext. applyif, ext. therefore, attributes defined by apply are not overwritten even if they are the same as those of the native class, whereas Ext. applyif will overwrite the native class attributes. How to write the extended attributes? We need to look at the source code of the basic method provided by the native class, just draw a gourd based on the sample.

From: http://www.2cto.com/kf/201206/136071.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.