---

• Next »
• Home

Ext JS Data Package:

Ext JS includes data package Ext.data includes classes that deals with saving and retrieving data from the server.

The followings are important classes in Ext JS 6 data package:

1. Model (Ext.data.Model)
2. Store (Ext.data.Store)
3. Proxy (Ext.data.proxy.Proxy)
4. Session (Ext.data.Session)

The following figure illustrates interaction between important classes of data package.

As per the above figure, the model class includes proxy which fetch the single record from the server to display into Ext JS Form view. The same way, Store includes model and proxy to get collection of records from the remote server to display them into Grid view. Please note that proxy can be associated with Model class or Store class.

Model:

Ext.data.Model class defines the shape of data. A model definition includes fields, validations and methods. It is M of MVC and MVVM architecture.

The model class must be created in the Model folder. For example, to define Student model class, create Student.js under app -> model folder in Ext JS 6 as shown below.

The model class must be derived from Ext.data.Model class. The following is a Student model class with different fields.

Ext.define('Student', {
    extend: 'Ext.data.Model',
    idProperty:'Id',
    fields: [
        { name: 'Id', type: 'int' },
        'firstName',
        'lastName'
    ]
});

The above Student model class extends Ext.data.Model. It defines 3 fields- Id, firstName and lastName using "fields" config. Specify type of a field using type property of a field. If you do not specify type then the default type would be string. Ext JS support different field types such as auto, int, string, float, Boolean and date.

The following example demonstrates Student model with validations.

Ext.define('Student', {
    extend: 'Ext.data.Model',
    idProperty:'Id',
    fields: [
        { name: 'Id', type: 'int' },
        'firstName',
        'lastName'
    ],
    validators: {
        firstName: 'presence',
        lastName: { type: 'length', min: 2 }
    }

});

In the above example, we have defined Student model class with Id, firstName and lastName fields. The 'validators' config defines validations for fields.

You can create a record by creating an object of student model and specify field's values. The isValid() method determines whether a record satisfies all the validators or not, as shown below.

var studentRecord = Ext.create('Student',{
    firstName:'',
    lastName: 'J'
});

if (!studentRecord.isValid())
{
    var validation = studentRecord.getValidation();
    console.log('First Name: ' + validation.get('firstName'));
    console.log('Last Name: ' + validation.get('lastName'));
}

ExtJS 5 includes following validators out of the box.

Validator	Description
Email	Validates that the value is a valid email id.
Exclusion	Validates that the value does not exist in a list of values.
Format	Validates that the passed value matches a specific format specified by a regex.
Inclusion	Validates that the value exists in a list of values.
Length	Validates that the length of the value is between a min and max.
Presence	Validates that the passed value is not null or undefined or ''.
Range	Validates that the value is between a min and max.

Custom Field Type:

As mentioned above, Ext JS model can include default field types such as auto, int, string, float, Boolean and date. We can also define a new custom field type with validation which can be used in multiple models.

The custom field type can be defined by inheriting from existing field types. The following example demonstrates creating new field type 'Gender'.

Ext.define('Gender', {
    extend: 'Ext.data.field.String',
    alias: 'data.field.gender',
    validators: {
            type: 'inclusion',
            list: [ 'female', 'male' ]
    }
}); 

Now, the above field type can be used with any model as shown below.

Ext.define('Student', {
    extend: 'Ext.data.Model',
    idProperty:'Id',
    fields: [
        { name: 'Id', type: 'int' },
        'firstName',
        'lastName',
        { name:'gender', type:'gender'} // Uses custom field
    ] 
});
var studentRecord = Ext.create('Student',{
    firstName:'James',
    lastName: 'Bond',
    gender:'TEST'
});

if (!studentRecord.isValid())
{
    var validation = studentRecord.getValidation();

    console.log('Gender: ' + validation.get('gender'));
}

Try it on https://fiddle.sencha.com/#fiddle/s5r

Visit Sencha Docs to know more about Ext.data.Model

---

---

• Next »
• Home