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

Defining your Application in App.js

Page of 168

Sencha Touch applications typically start with a call to the Ext.application() method, located in the app.js file, which is used to define the following:

  • Global settings for your application
  • Your application name, which becomes your app's root namespace
  • References to all Controllers, Profiles, and the top-level view used by the application (covered later in this unit).
  • References to all classes that need to be loaded prior to application launch.
  • A launch function which executes automatically after all classes, models, stores, views, and controllers have been loaded. Typically it destroys the interstitial animation and instantiates the initial view for the application.
  • onUpdated – an event handler that executes when the microloader detects that your application has been updated and it needs to download, cache, and apply application updates.

iOS-specific Properties that you can configure in Ext.application() include the following:

Property Description
startupImage Object. Startup screen to be used for different form factors when the app is launched from a Home Screen icon.
icon String/Object. Specifies a set of URLs to application icons to be used for different device form factors.
isIconPrecomposed Boolean. Set to true to not have a glossy effect added to the icon by the OS.
statusBarStyle String. Sets the status bar style for fullscreen iPhone OS web apps. Valid options are default, black, or black-translucent. Defaults to black.

Note that iOS will automatically add drop shadows, rounded corners, and gloss to your icons. Develop your icons with 90 degree corners, no gloss, and without alpha transparency. The images should be in PNG format.

The following example illustrates a typical invocation of Ext.application() in the app.js file:

Ext.application({
	name: 'HelloWorld',

   // make sure the MessageBox class gets loaded
 	requires: ['Ext.MessageBox'],

	startupImage: {
     '320x460': 'resources/startup/320x460.jpg',
     '640x920': 'resources/startup/640x920.png',
     '640x1096': 'resources/startup/640x1096.png',
     '768x1004': 'resources/startup/768x1004.png',
     '748x1024': 'resources/startup/748x1024.png',
     '1536x2008': 'resources/startup/1536x2008.png',
     '1496x2048': 'resources/startup/1496x2048.png'
    },

	icon: {
     57: 'resources/icons/Icon.png',
     72: 'resources/icons/Icon~ipad.png',
     114: 'resources/icons/Icon@2x.png',
     144: 'resources/icons/Icon~ipad@2x.png'
   },

	/* 
      load custom classes 
       Best practice: only load controllers. Let the 
       controllers load all other classes.
    */
	stores: ['Users'],
	controllers: ['Users'],
	views: ['Main'],

   	launch: function(){
   // Destroy the #appLoadingIndicator element
	  Ext.fly('appLoadingIndicator').destroy();
	
	  // load the initial view
	  Ext.Viewport.add(
 	   Ext.create('HelloWorld.view.Main')
	  );
   }

   onUpdated: function() {
     Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been 
         updated. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});
Page of 168
comments powered by Disqus