Hey Guys

Its late (02:15) here and I am playing around with a big Sencha Touch 2 app (Huge DOM) and I have come up with a concept that greatly reduced the size of my DOM.

The contents of my "main" deck now only contain stuff that the user is looking at. Everything seems to be working as usual. Like I said "its late".

Try it out and see what you think. I am going to sleep now. ;-)

I will test performance on my iPhone in the morning. (App is packaged in Cordova/PhoneGap)

Code:
Ext.define('godtur.view.SmartContainer',{
    extend: 'Ext.Container',
    xtype: 'smartcontainer',
    config: {
        layout: 'fit',
        listeners: {
            show: function(cmp){
                if(!cmp.items.items[0] && cmp.v){
                    cmp.add(cmp.v);
                    cmp.v.show();
                }else{
                    cmp.items.items[0].show();
                }
            },
            hide: function(cmp){
                var v = cmp.items.items[0];
                if(v){
                    cmp.v = v;
                    cmp.v.hide();
                    cmp.removeAll(false,false);
                }
            }
        }
    }
});


Ext.define("godtur.view.Main", {
    extend: 'Ext.Container',
    xtype: 'main',
    config: {
        id: 'mainDeck',
        layout: {
            type: 'card',
            animation: {type: 'fade'}
        },
        items: [{
            //xtype: 'home'
            xtype: 'smartcontainer',
            items: [{xtype: 'home'}]
        },{
            //xtype: 'info'
            xtype: 'smartcontainer',
            items: [{xtype: 'info'}]
        },{
            //xtype: 'mapcontrols'
            xtype: 'smartcontainer',
            items: [{xtype: 'mapcontrols'}]
        },{
            //xtype: 'mypagedeck'
            xtype: 'smartcontainer',
            items: [{xtype: 'mypagedeck'}]
        },{
            //xtype: 'searchdeck'
            xtype: 'smartcontainer',
            items: [{xtype: 'searchdeck'}]
        }]
    }
});
DOM.jpg