Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Working with Ext JS 4 MVC

Page of 168

The Project Inspector for an Ext 4.1 appExt JS uses the same MVC framework as Sencha Touch 2, with one exception- in Touch a viewport is automatically instantiated at runtime whereas in Ext JS, you need to explicitly instantiate one. This distinction enables you to easily add high-value Ext JS components, such as the DataGrid, into older DOM-based applications that might not have been originally developed with Ext.

Reviewing the Ext JS Data Package Syntax

The Ext JS Data Package is nearly identical to the one in Sencha Touch. The core classes of Models, Proxies, and Stores perform the same across frameworks with the configuration properties and methods being nearly identical. However, as illustrated below, Sencha Touch syntax does differ very slightly from its Ext JS 4 counterpart. Sencha Touch config properties must be defined inside of a config block while Ext JS 4 model configuration properties are not placed within a config object.

From an implementation perspective, however,you should be far less concerned about the number of http requests that you initiate from Ext as desktop performance and bandwidth considerations are much less strict than they are on a mobile device.

Sencha Touch Model Ext JS 4 Model
Ext.define('MyApp.model.Person', {
 extend: 'Ext.data.Model',
 config: {
  fields: ['firstName','lastName'],
  proxy: {
   type: 'jsonp',
   url:  
   'http://www.myhost.com/getdata.php'
  }
 }
}
Ext.define('MyApp.model.Person', {
 extend: 'Ext.data.Model',
 fields: ['firstName','lastName'],
 proxy: {
   type: 'jsonp',
   url: 
    'http://www.myhost.com/getdata.php'
 }
}

Sencha Touch Store Ext JS 4 Store
Ext.define('MyApp.store.Persons', {
 extend: 'Ext.data.Store',
 config: {
  model: 'MyApp.model.Person',
  autoLoad: true
 }
}
Ext.define('MyApp.store.Persons', {
 extend: 'Ext.data.Store',
 model: 'MyApp.model.Person',
 autoLoad: true
}

 

Extending Ext JS Views

As illustrated by the code listings below, extending an Ext JS UI class is very similar to extending a Sencha Touch UI class, with the following exceptions:

  • In Ext JS 4, you can override class properties by placing them outside of the config block.
  • In Sencha Touch, the name of the initialization method is "initialize." In Ext JS, the analogous method is named "initComponent"
  • In Ext JS 4, event listeners are typically attached at the end of the initComponent method while in Sencha Touch they are applied as part of the config.
  • The Ext JS 4 Panel fulfills the same duties as Sencha Touch's Container component.
Sencha Touch View Ext JS View
Ext.define('MyApp.view.MyView', {
 extend: 'Ext.Container', 
 alias: 'widget.mycustomcontainer',
 requires: [
   /* 
    list of components referenced
    in the class 
   */
  ],
 
  config: { 
    /*  all configuration properties */

    /* attach event listeners */

    listeners: [
      {
        fn: 'onEventName',
        event: 'eventname'
      }
    ]
  },
  
  classSpecificMethod1 : function(args) {},
   
  overRideMethod1: function(args) {
    this.callParent(arguments)
  }
  // local event handler
  onEventName: function(args) { },
 
  initialize: function() {

    /* pre-initialization code */

    Ext.apply(this, {
      /* override default configs */
    });
    this.callParent(arguments);
  }
});
Ext.define('MyApp.view.MyView', {
 extend: 'Ext.panel.Panel', 
 alias: 'widget.mycustompanel',
 requires: [
   /* 
    list of components referenced
    in the class 
   */
  ],
 
  config: { 
    /* configuration properties */
  }
  
  /* override class properties */
  
  classSpecificMethod1 : function(args) {},
   
  overRideMethod1: function(args) {
    this.callParent(arguments)
  }
  
  // local event handler
  onEventName: function(args) { },
 
  initComponent: function() {

    /* pre-initialization code */
   
    Ext.apply(this, {
      /*
       override default config 
       properties
      */
    });
    this.callParent(arguments);
   
   /*  attach event listeners */

   this.on('eventname', this.onEventName);
  }
});

 

Reviewing Ext JS 4 Controller Syntax

As you learned in the prior unit, controllers listen for events that are typically broadcast from views and execute a handler function. As illustrated by the following example, the syntax for implementing controllers in Ext 4 differs substantially from Sencha Touch.

Sencha Touch Controller Ext JS 4 Controller
Ext.define('MyApp.controller.Persons',
{
 extend: 'Ext.app.Controller',
 config: {
  models: ['MyApp.model.Person'],
  stores: ['MyApp.store.Persons' ],
  views:  ['MyApp.view.MyView'],
  refs: {
   'myCustomView': 'viewport > 
                             mycustpnl'
  }
  control : {
     'myCustomView' : {
         initialize: 'onPanelInit'
      }
   }
 },
 onPanelInit: function() {
   console.log('Panel initialized!');
   console.log(this.getMyCustomView());
 }
});
Ext.define('MyApp.controller.Persons',{
 extend: 'Ext.app.Controller',
 models: ['MyApp.model.Person'],
 stores: ['MyApp.store.Persons' ],
 views:  ['MyApp.view.MyView'],
 refs: [
  {
   ref: 'myCustomView',
   selector: 'viewport > mycustpnl'
  }
 ]
 init: function() {
   this.control({
     'viewport > mycustpnl' : {
         initialize: this.onPanelInit
      }
   });
 },
 onPanelInit: function() {
  console.log('Panel initialized!');
  console.log(this.getMyCustomView());
 }
});

Note the following differences between Sencha Touch and Ext JS 4:

  • Ext JS 4 controllers do not use a config property to wrap the models, stores, views, and refs properties.
  • The syntax for defining refs in Ext JS 4 is a bit more verbose than in Sencha Touch.
  • Sencha Touch allows you to use either refs or Ext.ComponentQuery expressions in order to attach event listeners to visual components. Ext JS 4 only supports using Ext.ComponentQuery expressions for attaching event listeners.
  • Event listeners in Sencha Touch are attached through the control property. In Ext JS 4, however, you must define a method named init() and invoke a method named this.control() in order to perform the same functionality.
  • Event handler functions in Sencha Touch are specified as strings but in Ext JS 4 they are specified as this.functionName
Page of 168
comments powered by Disqus