In the release version of ExtJS4, a new class model (model Class) was added to the data package. This class is somewhat similar to the record in extjs3.x, but the new model is more powerful than the record class, and we'll discuss it together. Features of the Model class:
(a), first of all, we introduce some of the more commonly used properties of the model class, if we want to build a model class, the most important attribute is the (fields) property, this property accepts an array. Used to set the fields contained in the model. The format is defined as follows:
Ext.regmodel ("Student", {
fields:[
{Name: "name", type: "string"}, {name: "Class", type: "string"}]});
(b), as we understand how to define a simple model and define the properties required by the model. Let's take a look here. The model class provides us with some of the better features.
1. First, let's take a look at the functions in the Fields property, for example: we now define a model class as above, and then the data source returns the Class (Class) attribute. The format is (1, 2, 3), and if we present such data, it will be very unfriendly. So, we're going to make a transition to the data before we render it. It is used to convert data that is unfriendly to good data. The Convert property in fields. The specific code is as follows (note the Red font section):
Ext.regmodel ("Student", {
fields:[
{name: ' name ', type: ' String '}, {name: ' Class ', type: ' String ', Convert:function (val) { if (val== "1") {return "one Shift"}; if (val== "2") {return "Class two"}; if (val== "3") {return "three shifts"}; }}] });
through the above settings, we have a corresponding conversion of the data, presented to the customer is no longer (1, 2, 3), so that our presentation becomes more friendly.
2. In addition, after we define the good one model class, we can use this model class. In the simplest way, we are directly new to the object of the model class and then load our data information into the object, somewhat similar to the use of the Record object in ext3.x. The code is as follows:
var student=new student ({NAme: "Jerry",
Class: "2"
});
The above code we define an object of this class according to the model class of student, but often in our application, like this is very rare, after all, our data is not necessarily this static data, sometimes we need to load our data from the background, and then give our model class. This requires our model class to have the ability to request the backend, which is also the second feature provided in models, which provides a property proxy (proxy). There are several more important attributes (type, URL, reader) in this proxy, and the Type property value is a string form to indicate. The agent of a type, specific we can look at the API to understand what type, URL is the request background URL, reader, that is, we want to use what kind of reader, to parse our data, specifically, we can look at. Below is a simple example:
Ext.regmodel ("Student", {
fields:[
{name: ' name ', type: ' String '}, {name: ' Class ', type: ' String ', Convert:function (val) {if (val== "1") {return "one Shift"}; if (val== "2") {return "Class two"}; if (val== "3") {return "three shifts"};}} ]，proxy:{ type: "Rest", URL: "data/1.aspx", Reader: "JSON" }});
Student.load (001,{
Success:function (student) {//Handle Load Completion logic}});
Data format returned by 1.aspx:
{id:001,name: "Zhangsan", Class: "2"}
Through the above settings, our model can interact with the background, and request the background to return the data we want, this is not the record class before.
3. In our application, we may define more than one model. However, they may be independent and have no relationship, but there may be some connection in the data that is returned in the background in our application, and we want to have some connection between the model so that we can deal with it more simply. Let's look at the data below.
{ID: "009", Name: "Jerry", subjects:[{ID: "001", Name: "中文版"},
{ID: "002", Name: "Mathematics"}]}
In the above data, there is a certain connection between the subject and the student. So, we are also thinking that when parsing the data, let them maintain this connection so that we can better parse the data. This allows us to use two properties such as Belongsto and Hasmany in model. First of all, to parse such data, we need to define our model class. As follows:
Ext.regmodel ("Subject", {
fields:[{Name: "id", type: "string"}, {name: "name", type: "string"}],belongsto: "Stdudent"});
Ext.regmodel ("Student", {Fields:[{Name: "id", type: "string"}, {name: "name", type: "String"}
],
proxy:{Type: "Rest", url: "Data/1.aspx", Reader: "JSON"},h Asmany:[{model: "Subject", Name: "Subjects"}]
});
note the use of "Hasmany" and "Belongsto".
After we have defined the model, we can load and parse our data.
Student.load ("009", {
Success:function (student) {
Alert (Student.get ("id"));
Alert (Student.subjects (). GetCount ());//We can access the student's subject directly} }) });
4. In addition, the validation function of the field column is also provided in the model of ExtJS4. We want to verify that the field only needs to set the validations property of the model class, the code is as follows:
Ext.regmodel ("Student", {Fields:[{Name: "id", type: "string"}, {name: "name", type: "String"}
],
proxy:{Type: "Rest", url: "Data/1.aspx", Reader: "JSON"},hAsmany:[{model: "Subject", Name: "Subjects"}],
validations:[ { type: "Presence", field: "id"},
{type: " length", field:" Name ", Min:3} ]
});
var student=new student ({ID: "001", Name: "Z"});
var stuvalidate=student.validate ();//Get Validation class
Stuvalidate.isvalid ();//return validation result true or False
Stuvalidate.each (function (Error) {
Alert (error.field+ "" +error.message);//Traversal Verification information});
