Greatly reduce the size of the DOM

[SimonFlack]

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)

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

[SimonFlack]

I compiled xcode project and tested on my iPhone 4 this morning. It does seem to run faster.

App seems to be running correctly also.

But I will need to do more testing to be 100% certain.

[pepperseb]

Is it different from this great plugin?
https://github.com/mitchellsimoens/Ux.tab.OptimizedTab

[SimonFlack]

Is it different from this great plugin?
https://github.com/mitchellsimoens/Ux.tab.OptimizedTab

Looks like pretty much the same idea. Just work on different events.

[digeridoopoo]

Thanks a lot for this Simon, would it be possible to see a really basic example in a tabpanel setup this way?

I am really interested in reducing the DOM size and have tried Mitchell's optimised tab but I am getting blank panels and I can't work out why. Would be great if someone could post an example to help the community :-)

Thanks

[SimonFlack]

If you are using a tabpanel try Mitch's plugin.

https://github.com/mitchellsimoens/Ux.tab.OptimizedTab