JavaScript Client Framework Has A Powerful Data Platform Model

Data and how you handle it is the heart of every application you create, whether it is simple or complex. How you handle your data drives your applications and determines your credibility and success as a business application developer. With such high stakes involved, it is important to recognize data as one of your most valuable development resources and, as such, to handle it with due care and attention inside your applications. Sencha Ext JS is aware of the importance of handling data correctly and has implemented many features to streamline your development and data handling processes. We believe it is one of the js frameworks.

In Sencha ExtJS, the data package loads and saves all of the data in your application. It consists of a multitude of classes that contribute to the way you handle data. In this article, we’ll take a brief tour of Ext JS’s data package and help you better understand its core concepts.

What is a model in the data package of a Sencha application?

A model is the most important part of a data package. Everything else in your application is connected to and revolves around the model. This makes it the heart of the entire data package. Some of the principal parts of Ext.data.Model include fields, proxies, validations, and associations.

A sample ExtJS model is defined in the code snippet below.

Ext.define('MyApp.model.Base', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'id',
        type: 'int'
    }],

    schema: {
        namespace: 'MyApp.model',  // generate auto entityName

        proxy: {     // Ext.util.ObjectTemplate
            type: 'ajax',
            url: '{entityName}.json',
            reader: {
                type: 'json',
                rootProperty: '{entityName:lowercase}'
            }
        }
    }
});

How are proxies used in an end-to-end client-server cycle?

There are two types of proxies in ExtJS — client and server. The client proxy may include memory and local storage to store the data on the client-side, whereas, the server proxy handles the marshaling of data to a remote server, for instance, Ajax, JSONP, and REST.

Generally, these proxies are used by ExtJS models and stores to handle the loading and saving of model data.

How can I create a store in ExtJS?

A store, in ExtJS, is a collection of records of model instances. When defining a store, you need to define its linked model as well. Following is a simple code that allows you to create a store for User model and load its data using the load() function on Store object.

var store = new Ext.data.Store ({
    model: 'MyApp.model.User'
});

store.load({
    callback:function(){
        var first_name = this.first().get('name');
         console.log(first_name);
    }
});

One of the fascinating things about a store is that it allows you to define sorting parameters. Based on the sorting and grouping preferences, the store filters and then returns the data.

How can I establish associations between models?

Models can be linked with each other using associations. In any real-world application, your entities are always linked together. This should be reflected in your model-level structure as well. For instance, your social media application contains a User and Post model. The Post model and its instances have no standalone semantic value. However, if it associates with a User model then it makes real sense.

In ExtJS, model associations for this social media example can be defined as follows:

Ext.define('MyApp.model.User', {
    extend: 'MyApp.model.Base',

    fields: [{
        name: 'name',
        type: 'string'
    }]
});

Ext.define('MyApp.model.Post', {
    extend: 'MyApp.model.Base',

    fields: [{
        name: 'userId',
        reference: 'User', // the entityName for MyApp.model.User
        type: 'int'
    }, {
        name: 'title',
        type: 'string'
    }]
});

To read more about associations and retrieving data with associations, check out the detailed and dedicated section here.

Is there an easy way to validate data inside models?

The ExtJS data package comes with built-in support for validating model data. In modern application development and design practices, validating data should be the responsibility of a model layer rather than the controller or service layer.

Using the following simple method, you can add validation rules to your ExtJS models.

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ...,

    validators: {
        name: [
            'presence',
            { type: 'length', min: 7 },
            { type: 'exclusion', list: ['Bender'] }
        ]
    }
});

To read more about model validations, check out this guide here.

Ready to get started?

As you can see, Sencha has a powerful data platform model that allows you to easily create exciting data-intensive applications. It provides model association, validation, and proxies that make it extremely simple to deal with schema and its related operations. Due to its simple and easy-to-understand data package framework, ExtJS is perfect for creating a seamless user experience in both your simple and complex applications.

Ready to get started with Sencha Ext JS? Head over to Sencha Ext JS and create amazing data inclusive applications with Sencha now.