What is the difference between loading the MVC dynamically and loading statically

[blakdronzer]

Hi there,

i was just refering to a pattern of sencha touch 2 implementation example. https://github.com/tomalex0/SenchaTouch_v2_MVC
Here i noticed that the user have had described the existence of all the models / views, etc like the way it was in sencha touch 1.1.
But he have had some unique way in his navigation

 Ext.define('MVC.controller.Viewport', {

    extend : 'Ext.app.Controller',
    refs : [
        {
            ref      : 'main',
            selector : '[xtype="cdaviewport"]'
        }
    ],
    init : function() {
        var me = this,
        controller = this.getController('Login'),
        newview = controller.getNewView();
        
        me.doNavigation(newview);
    },
    doNavigation : function(newView,anim) {
        var me            = this,
            mainView      = this.getMain(),
            mainViewItems = mainView.items,
            viewIndex     = mainViewItems.indexOf(newView),
            currentView   = mainView.getActiveItem();
        if(anim && anim.type){
            Ext.Viewport.getLayout().setAnimation(anim);
        } else {
            Ext.Viewport.getLayout().setAnimation({
                type : 'fade'
            });
        }
        var oldItem = Ext.Viewport.getActiveItem();
        Ext.Viewport.setActiveItem(newView);
        oldItem.destroy();
    }
});

There.. in red....
here is example of retrieving a new view

    getNewView : function(){
        var me = this;
        me.loginview = me.getView('Login').create();
       
        return me.loginview;
    },

I for some reason unfortunately didnt get much chance to execute the code and see stuff working for some reason as i was not able to configure stuff correctly .. but i still got to understand this strange phenomena.
When i used the other pattern of dynamically letting sencha load all the mvc elements based on reference.. the

mainView = this.getMain(),
mainViewItems = mainView.items,
The application fails @this point as getMain sets it to undefined for some reason.

I too am as for now in a soup as how to really create the exact application for sencha touch 2 using its MVC pattern as a pattern i followed was based on other mvc sencha touch 2 example given on the site. There the app runs sommthly and perfect the way it is expected to go through but as we move forward and post a point return to home screen for other action to be performed, which initiates the process of destruction of the current item in the viewport and re-creation of new item (activeitemchange / back button handling), the id's associated to elements just for some reason disappears and cannot control it.

http://www.sencha.com/forum/showthread.php?170424-Button-element-loses-its-id-when-recreated-post-its-destruction&highlight=lost

following have been also registered for a solution which i still await.

The above mentioned example of thomas alex .... runs when we apply the pattern of referring all the js in index.html
What is the real difference between the 2 loading pattern, which is better and prominent way of proceeding with the same?

[mitchellsimoens]

First, the refs aren't the best... this:

    refs : [
        {
            ref      : 'main',
            selector : '[xtype="cdaviewport"]'
        }
    ],

should be

    refs : [
        {
            ref      : 'main',
            selector : 'cdaviewport'
        }
    ],

When you execute getMain, it is using ComponentQuery to see if a currently instantiated component matches the selector 'cdaviewport'. If not then it will return null, if so it will return that instance and cache that instance for further executions of getMain.

To be honest, you shouldn't use the id config unless you are just debugging something. You should use ComponentQuery that can handle xtypes and properties. So if you have a back button like this:

{
    xtype : 'button',
    text : 'Back',
    ui : 'back',
    action : 'back'
}

Then you can use the ComponentQuery selector to resolve that button like this:

'cdaviewport button[action=back]'

cdaviewport is the xtype of the container that holds the button (usually in a toolbar).