Hello World with ExtJS MVC

In my last post we had seen first example with Ext JS, but now think a real senario of big application in which you have so many components, and there will be use multiple time as well. If we code in one page as we did in our last example in complex/big application, it is very hard to manage code. So ExtJS is providing MVC architecture for developing your application. Here I am giving a very small example in MVC with introduction. Before I go with the example I am trying to give some introduction about some ExtJS classes which are very necessary and important and frequently used while developing with ExtJS.

→ Ext.data.Model

    The model describes some objects which will use in your application. If you are familiar with Java, then you should know about Bean/Pojo classes. This object is very similar to it, but in ExtJS..! So basically this object contains an array of fields.

→ Ext.data.Store

   The store is client side storage (of records/data) of the model. We just have to provide a url for getting data to store using proxies as given in below example.

→ Ext.app.Controller

   Controllers are the handlers/functions of events which will fire dynamically in your application. There are basically listeners of ExtJS components. For example click method of button, mouseover method of hyperlink.

   Now I am giving here snaps of my code.

→ DemoController.js

Ext.define('MyApp.controller.DemoController', {
 extend:'Ext.app.Controller',
 init:function() {
  /**
   * We will handle all events of components in init method of controller.
   * */ 
  this.control({
   /**
    * you can see usage control method over here.
    * http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.app.Controller-method-control.
    **/ 
   'DemoGrid':{
    'itemclick':function(grid, record, item, index, e, eOpts){
     alert('You clicked row with index : '+index);
    }
   }
  });
 }
});

→ DemoModel.js

Ext.define('MyApp.model.DemoModel', {
 extend : 'Ext.data.Model',
 /**
  * Here there will be fields array. 
  **/
 fields : [{
  name : 'name', //this property will indicate your data field property   
  mapping : 'name' //this property will indicate dataIdex in grid.
 },{
  name : 'rollNo',
  mapping : 'rollNo'
 }]
});

→ DemoStore.js

Ext.define('MyApp.store.DemoStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.DemoModel',
    //it will load your store on start up automatically.
 autoLoad : true,
    proxy: {
        type: 'ajax',
        //url of your data. this may be from your server in your real application.
  url : 'data/demoData.json',
        reader: {
         //type of data..ExtJS also support xml format.
            type: 'json',
            root: 'data'
        }
    }
});

→ DemoGrid.js

Ext.define('MyApp.view.DemoGrid',{
 extend:'Ext.grid.Panel',
 alias:'widget.DemoGrid',
 initComponent:function()
 {
  this.store='MyApp.store.DemoStore';
  this.title='Hello World with ExtJS MVC';  
  this.border=true;
  this.width=200;
  this.height=100;
  this.columns=[{
   text:'Name',
   dataIndex:'name',//this property will map with your model which used in store.
   flex:1
  },{
   text:'Roll No',
   dataIndex:'rollNo',
   flex:1
  }];
  this.callParent(arguments);
 }
});

→ Viewport.js

Ext.define('MyApp.view.Viewport', {
 extend : 'Ext.container.Viewport',
 requires : ['MyApp.view.DemoGrid'],
 initComponent:function(){
      
   this.items = [{
    xtype:'DemoGrid'
   }];
   
      this.callParent(arguments);
 }
});

→ init.js

Ext.application({
 name:'MyApp',
 appFolder:'com',
 autoCreateViewport : true,
 modals:['MyApp.model.DemoModel'],
 stores:['MyApp.store.DemoStore'],
 controllers:['DemoController'], 
 launch : function(){
  alert('Your first application launched with ExtJS MVC..!'); 
        }
});

→ Folder Strcture

→ Download demo → Snaps

Hello world with ExtJS

If you didn't download ExtJS library still, please read this. I am trying to give here a very small example in Ext JS. In this example there is one simple form with three fields. I am giving some important explanation about basic and necessary functions or objects of Ext JS.

→ Ext.onReady
   
    This is the same function like document.onload event in simple HTML. It will call once your html page is loaded. So if we are not following any MVC architecture while developing application using Ext JS, we have to write everything in this function, otherwise it may happen that in which div/body you are trying to render your Ext JS component, it's not rendered on the page.

→ Ext.create

    Whenever you will create a new object (already defined) of any Ext JS component, we will use this function. This function takes two parameters. 1. Full name of the component which you are trying to create as per given by sencha. 2. Parameters or configurations object.

    So now I am giving you my code snap as given below. I hope this will useful for Ext beginner..!!

→ Download demo, Live example

→ Snaps