ExtJS 4

The models can be associated to create complex data model. Both single values and multi valued association can be defined in Ext Data framework. The association are defined using “associations” configuration in model.

Lets take for example we have Person and Address model. The association is that Person has multiple address (Shipping, billing etc.).

The code snippet below describes the two model as discrete class. we will had association in next snippet.

Ext.define('Training.model.Person', {
    extend:'Ext.data.Model',
    fields:[
        {
            name:'firstname',
            type:'string'
        },
        {
            name:'lastname',
            type:'string'
        },
        {
            name:'dob',
            type:'date',
            dateFormat:'m-d-Y'
        },
        {
            name:'single',
            type:'boolean'
        },
        {
            name:'gender',
            type:'string'
        }
    ]

});

Ext.define('Training.model.Address', {
    extend:'Ext.data.Model',
    fields:[{
        name:'street',
        type:'string'
    },{
        name:'city',
        type:'string'
    }]
});

  

Continuing from previous post. Lets add some validation to the model. Data validation can be specified in models through the validations configuration array. Validation available are

Validating Data

We need to call validate() method on the model object to validate. The model object returns a Ext.data.Errors Object. Method in Ext.data.Errors of use are

Let’s see how to validate and get error object next.

Ext.define('Training.model.Person', {
    extend:'Ext.data.Model',
    fields:[
        {
            name:'firstname',
            type:'string'
        },
        {
            name:'lastname',
            type:'string'
        },
        {
            name:'dob',
            type:'date',
            dateFormat:'m-d-Y'
        },
        {
            name:'single',
            type:'boolean'
        },
        {
            name:'gender',
            type:'string'
        }
    ],
    validations:[
        {
            type:'presence',
            field:'firstname'
        },
        {
            type:'inclusion',
            field:'gender',
            list:['M', 'F']
        }
    ]

});

var init = function () {
    var newPerson = Ext.create('Training.model.Person', {
        lastname:'Doe',
        dob:'10-21-2001',
        single:true,
        gender:'do-not-bother'
    });
    // call the validate() method to check if the model has correct values
    var errors = newPerson.validate();
    console.log("Errors is "+ errors);
    if(!errors.isValid()){
      errors.each(function(error){
          console.log("Field : "+ error.field+" message : "+ error.message);
      })
    }
};

Ext.onReady(init);

As we see in above code, we have defined two validation, one for firstname as presence validation and another for gender as inclusion. The inclusion list is specified in array. We are creating a newPerson object in the init function. Wee are not setting value for “firstname” and for gender we are setting some arbitrary value. The validations fail on call to validate(). The errors object is iterated to display individual error. The console displays the following error.

The demo can be found here

In this post, we will be defining a Model and then we will define model and then validations on that. The class to extend is “Ext.data.Model”.

Ext.define('Training.model.Person', {
    extend:'Ext.data.Model',
    fields:[
        {
            name:'firstname',
            type:'string'
        },
        {
            name:'lastname',
            type:'string'
        },
        {
            name:'dob',
            type:'date',
            dateFormat:'m-d-Y'
        },
        {
            name:'single',
            type:'boolean'
        }
    ]

});

The above model defines 4 fields. As we can see we can define a field of type date. The dateFormat defines the input format which will be parsed when we set the value for firstname. We can create object using Ext.create('Training.model.Person') and supply a config object as shown below. To access individual properties, we use Ext.get('fieldname').

var newPerson = Ext.create('Training.model.Person',{
      firstname:'John',
      lastname:'Doe',
      dob:'10-21-2001',
      single:true
  })             ;

    console.log("First name: "+newPerson.get('firstname'));
    console.log("Last name: "+newPerson.get('lastname'));
    console.log("dob: "+newPerson.get('dob'));
    console.log("single: "+newPerson.get('single'));

The demo can be found here

The three mail components in Data framework are

1. Model
2. Store
3. Proxy

The model class is the new and most important class in Ext.data package. It is the improvement over Record class in Ext 3.x. Now, we can represent real entities using Model classes. Now, proxy can be attached to model class so that they can talk to server to load, update, delete and create models.

The model class following features

• Fields
• functions
• Validations
• Associations.