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

[digeridoopoo]

I've attached a tabpanel based on your smart container but I'm not sure if it is actually doing anything. Would this be the correct way of doing it or does it only work best for card containers?

Here's the link:

http://wtrns.fr/fUgdVl-b1bUBXMp

I think I've managed to get Mitchell's tabpanel working with an xtype now after adding a height parameter. It was there but hidden!

:-)

[SimonFlack]

"The interesting thing is if I inspect the DOM it is there, but hidden."

Hmm.. I had heaps of troubles with this when making my code too. Heights set to 0px.

Have you checked your layout configs? Not missing any?

Mitch will probably see this post and help you out soon. If not send me a message.

"Anyway, I've attached a tabpanel based on your smart container but I'm not sure if it is actually doing anything."

I will check it out asap. To check if its working use Chromes Developer Tools or Safaris Web Inspector. The tabs that are hidden should be empty.