How to add an item to a TabPanel in a Panel with Sencha Touch 1?

Question

I have the following code, which generates a basic layout for my app:

tabpanel = new Ext.TabPanel({
    fullscreen: false,
    ui        : 'dark',
    sortable  : false,
    tabBarDock: 'bottom',
    cardSwitchAnimation: 'flip',
    items: [{
            title: 'Tab 1',
            html : '1',
            cls  : 'card1',
            icon : 'tab1'
    }]
});

lists.views.Viewport = Ext.extend(Ext.Panel,{
    fullscreen: true,
    layout: 'fit',
    dockedItems: [{
        xtype: 'toolbar',
        dock: "top",
        title: 'title'
    }],
    items: [tabpanel],
    initComponent: function() {
        this.tabpanel.add(new lists.views.ItemLists());
        lists.views.Viewport.superclass.initComponent.apply(this, arguments);
    },
});

This doesn't work, probably due to the fact that the TabPanel that is inside the Viewport Panel cannot be pointed to like this. I've searched through the sencha documentation but I can't find how to add the

new lists.views.ItemLists()

to the tabpanel, which in turn is inside the

lists.views.Viewport

Also, there will be other stuff I want to declare before my viewport (or even after it) that I want to add to specific other panels I might add later. What is the best way to achieve this?

Any ideas on how to do this? Thanks!

Answer 1

If you take the this. off the reference to the tabpanel in the Viewport's initComponent method then it should work because the tabpanel variable is global.

Alternatively, you can access the Viewport's items via the items property, for example,

initComponent: function(){
    this.items.get(0).add(new lists.views.ItemLists());

    lists.views.Viewport.superclass.initComponent.apply(this, arguments);
}

Hope this helps

Stuart