extjs - Sencha Touch 2 - Execution sequence

Question

Does anyone know or is aware of an article about the function execution sequence in sencha touch 2 ? I think would help us, beginners, alot to know where to place our code.

So I would like to know things like, what functions are called automatically from controller/model/view and when and in what order and last which are that functions (init, initialize, launch, applyX, updateX - this kind of magic functions).

Will clarify lots of things I believe. Thanks.

Answer 1

Note: In the following startup description I will skip all that is marked as deprecated. I will also make this description as easy as possible.

First will load the Ext.app.Application which will at first resolve and load all dependencies. As soon as all dependencies has been loaded the Application controller will

• instantiate all Ext.data.Stores (constructor() get called)
• instantiate all Ext.app.Controllers (constructor() get called)
• calling the init() method on every Ext.app.Controller instance
• calling the launch() method on the Ext.app.Profile instance (if a Ext.app.Profile is available)
• calling his own launch() method
• calling the launch() method on every Ext.app.Controller instance after checking if the controller inherits from Ext.app.Controller

And that's it.

Beneath the constructor() for every class there are just a bunch of template methods that get supplied by Components (I will not separate by mixins here). Here are the common ones:

• initComponent() > the really important one to configure a component
• onRender()
• afterRender()
• initEvents()
• setOrientation()

And never forget to insert callParent(arguments) if you override a method just to add some functionality!