IT:AD:Sencha Touch:Concepts:Application

An application is a collection of M, V, C, S and P, plus some metadata such as app icons and launch screen images:

• Applications:

  • Model:
  • View: displaying data, leveraging UI Components
  • Controller: handles user interaction
  • Store: responsible for loading data into yruo app (Lists of Models…)
  • Profile: customise UI for tables or phones

  Usually first thing defined in a sencha touch application:

  Ext.application( { name: 'MyApp', defines app's Namespace (MyApp.view.OrderList, MyApp.model.User, etc.) models: ['User', 'Product', 'nested.Order'], views: ['OrderList', 'OrderDetail', 'Main'], controllers: ['Orders'], Loads and instatiates controllers launch: function() {Ext.create('MyApp.view.Main');} } );

• Notes:
  • Ext.regApplication (according to ref) is depracated in v2

    "Ext.regApplication() is deprecated, please replace it with Ext.application()"

    • Difference between Ext.regApplication and Ext.Application:
      • [Ref] (http://bit.ly/yWxZm4) states

    "Ext.regApplication() will do everything that Ext.setup does along with setting up the application for MVC like jgarcia said. So if you are using MVC, you can pass Ext.regApplication the same config options as you would Ext.setup with the exception of onReady. Ext.regApplication takes care of that with its launch config option."

    ## Application Launch ##

Ext.application is invoked with a map containing basics. Such as name and launch.

Example (warning: Markdown Munging):

Ext.application(
   {
    name: 'MyApp',
    launch: function() {alert('launched');}
   }
);

Ex2: extend launch to instead of create an alert, it creates an Panel:

Example (warning: Markdown Munging):

Ext.application(
   {
    name: 'MyApp',
    launch: function() {
      new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        dockedItems: [{xtype:'toolbar', title:'My First App'}],
        styleHtmlContent: true,
        html: '<h2>Hello World!</h2>I did it!'
      });
    }
  });