Sencha Touch 2.1: How to create/destroy tab content to increase performance?

Question

I've got a TabPanel in my ViewPort with 4 tabs; is it possible to keep the tabs itself (the 'buttons' to tap), but remove/create the content/the dom if not visible?

I'm looking for something like tab.removeContent() and tab.createContent(), I guess...

I tried:

activeitemchange: function(component, value, oldValue, eOpts) {
    Ext.Viewport.remove(oldValue, true);
}

which seems to do nothing...

This removes everything:

activeitemchange: function(component, value, oldValue, eOpts) {
    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
}

I got the remove-part working:

oldValue.removeInnerAt(0);

but what's the 'opposite' of that, i.e. how can I set the tab's content?

var myContent = Ext.create('MyApp.view.MyView');
// and now?

Answer 1

Sencha Senior Forum Manager Mitchell Simoens made a extension for this. It can be found on his github page: Optimized tab (git)

The tabs will be removed and cached.

EDIT: In your current situation you're extending Ux.tab.OptimizedTab, which is wrong. The lib only does some changes to some of the methods of Ext.tab.Panel (the lib doesn't extend Ext.tab.Panel either. In the example given by Mitchell you can see he is extending the Ext.tab.Panel and settings the defaultType on optimized-tab.

Ext.define('MyApp.view.Main', {
    extend : 'Ext.tab.Panel',
    xtype  : 'main',

    requires : [
        'Ext.TitleBar',
        'Ext.Video',
        'Ux.tab.OptimizedTab'
    ],

    config: {
        tabBarPosition : 'bottom',
        defaultType    : 'optimized-tab',
        items : {
            ...
        }
    }
}

Note that you changed the lib classname which, in my opinion, is a lack of respect and above all you have given it a wrong name and placed it in the wrong folder. (The name you gave is Crossfit.view.OptimizedTab but it isn't a view at all..)

I would like to give you some compliments on your good architecture of the app,I haven't seen many people who understand Sencha Touch architecture. But you, Mitchell and I are some of them :)

Answer 2

I also had problems using this component originally, the key here you'll notice is that if you have 3 items in your tabpanel, each item must have the xtype 'optimized-tab', and inside them you have your actual items.

For example:

items: [
        {
            xtype: 'optimized-tab',
            title: 'Tab 1',
            iconCls: 'info',
            baseCls: 'myBtn',
            cls: 'myBtn',
            html: 'Tab 1',
            items: [
                {
                    xtype: 'component',
                    baseCls: 'myBtn',
                    cls: 'myBtn',
                    ui: 'light'
                }
            ]
        },

To test that it is actually working, paste this in your console to find the amount of DOM items:

document.getElementsByTagName("*").length

If your first tab is empty you should see around 50 items, if you have a map you should be around 200 etc. If the optimized tab is not working you will probably see around 400 items in your DOM.

If it is working, you may see the optimized tab removing the items prematurely before the animation is complete. So you can modify it slightly to remove items after.

You can also refer to this link for more information: http://www.sencha.com/forum/archive/index.php/t-207907.html?s=24386d2ced82d0625b8199247e0f5c64

:-)