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

Creating Your Launch Function

Page of 168

The app.js and its associated launch() function operates similarly to the behaviors that you observed in Sencha Touch. The best practice is to keep the Ext.application configuration as simple as possible, which means making your controllers responsible for loading model, store, and view classes. The load/execution order is as follows:

  1. app.js is loaded
  2. All controllers are loaded and their init() methods are called in the order in which they're listed in the Ext.application configuration.
  3. If the autoCreateViewport property is set to true, your views/Viewport.js file is loaded into memory and an instance is automatically instantiated.
  4. The launch method is executed.

Therefore, in the following example, the 'Main' controller is loaded, which would cascade-load any models, views, stores, or required classes specified within it. Then the 'Main' controller's init() method would be executed. The views/Viewport.js file is loaded next, and an instance of that class is automatically instantiated. Finally, the launch() method is executed, adding a series of windows to a container with an itemId named 'centerpanel'.

Ext.application({
    
    autoCreateViewport: true,
    name: 'MyApp',
    controllers: [
        'Main'
    ],

    launch: function() {
        Ext.ComponentQuery.query('#centerpanel')[0].add(
        { xtype: 'contentwindow', x:5, y:20  },
        { xtype: 'contentwindow', x: 500, y: 20},
        { xtype: 'contentwindow', y:500, y: 300}
        )
    }

});
Page of 168
comments powered by Disqus