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 ExtJS is aware of the importance of handling data correctly and has implemented many features to streamline your development and data handling processes. 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 ExtJS’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: […]
