Sencha touch Panel inside panel not showing up

Question

I have a panel inside a panel as an item, along with other docked items. For some reason it is not showing up. These are stuffs to add to main panel:

    MarketMakerApp.views.businessInfo = new Ext.Panel({
        id: 'businessInfo',
        layout: 'fit',
        html: '<br /><br /><br /><div>{ id } </div>' + '<div>{ title }</div>'
        //html: 'This is the business info view'
    });

     MarketMakerApp.views.businessTabbar = new Ext.TabBar({
        dock: 'bottom',
        ui: 'dark',
        items: [
            {
                text: '1',
                iconCls: 'info',
                hander: function() {
                    MarketMakerApp.views.viewport.setActiveItem('businessInfo', {type: 'slide', direction: 'left' });
                }
            },
            {
                text: '2',
                iconCls: 'star',
                hander: function() {
                    this.add( MarketMakerApp.views.businessInfo);
                    this.setActiveItem(2);
                }
            },
            {
                text: '3',
                iconCls: 'map',
                hander: function() {
                }
            }
        ]
    });

And the main panel is this:

    MarketMakerApp.views.businessContainer = new Ext.Panel({
        id: 'businessContainer',
        layout: 'fit',
        dockedItems: [
            MarketMakerApp.views.businessTypeListToolbar,
            MarketMakerApp.views.businessTabbar
        ],
        items: [ MarketMakerApp.views.businessInfo]
    });

The tabbar and toolbar are showing up fine, but I can't see the businessInfo panel. Any suggestions would be appreciated.

p.s. I struggled with Tabpanel far too long to give up and just using tabbar now.

pinkeerach pinkeerach · Accepted Answer · 2011-10-30T21:09:02

I haven't had any success in creating Panels (or whatever your view is) programmatically like that. Here's some code that does work w/that approach though.

Add an initComponent function to your businessContainer like the following instead of setting the items on the businessContainer panel:

initComponent: function(){
    Ext.apply(this, {
        items: [
            MarketMakerApp.views.businessInfo
        ]
    });
    MarketMakerApp.views.businessContainer.superclass.initComponent.apply(this, arguments);
}

Sencha touch Panel inside panel not showing up

1 Answers