Layout Example with ExtJS MVC

Here I am giving very simple but one step complex example compared to my last post hello world example. By reading/understanding this example you can learn real usage of layouts in ExtJS. I am trying to go one by one step for learning ExtJS. Please feel free to give any suggestions if you want to learn about ExtJS.

➟ About the Example

     I am giving brief explanation here about this example. Through this example, I want to provide some layout explanation (H-Box, V-Box, Border etc.) which are very popular and will frequently use in your Web Development. Along with this I also want to provide how to make server/remote call from ExtJS to fetch data. I used here Java-Servlet for fetching data but you can use do server/web-service call for this. I am listing some files in a simple grid which is coming from a server (here apache-tomcat). So here I am trying to integrate Java-EE with ExtJS UI.

➟ Pre-requirements

    To run this example successfully you need to manage these requirements.

     ➤ ExtJS library
  
         You can see about it here.

    ➤ Apache-tomcat
 
        You can see about it here.

    ➤ JSON Library for Java
 
        You can see about it here.

➟ Download demo ➟ Snaps

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