extJS tabs not displaying in portal layout

Question

I have been trying to build a window with tabs in the portal layout similar to this http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html. The window, top bar, footer, label, combo box and chart everthing is appearing fine but when i place tabs in the window, they dont get displayed. Below is my code

 //portal.js that is calling
Ext.define('Ext.app.Portal', {

extend: 'Ext.container.Viewport',

uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.RegHosts', 'Ext.app.ChartPortlet', 'Ext.app.RougeHosts'],

getTools: function(){
    return [{
        xtype: 'tool',
        type: 'gear',
        handler: function(e, target, panelHeader, tool){
            var portlet = panelHeader.ownerCt;
            portlet.setLoading('Working...');
            Ext.defer(function() {
                portlet.setLoading(false);
            }, 2000);
        }
    }];
},

initComponent: function(){
    var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';

    Ext.apply(this, {
        id: 'app-viewport',
        layout: {
            type: 'border',
            padding: '0 5 5 5' // pad the layout from the window edges
        },

        items: [{
            id: 'app-header-complete',
            xtype: 'box',
            region: 'north',
            height: 40,
            html: ''
        },{
            xtype: 'container',
            region: 'center',
            layout: 'border',
            items: [{
                id: 'app-portal',
                xtype: 'portalpanel',
                region: 'center',
                items: [{
                    id: 'col-1',
                    items: [{
                        id: 'regehosts',

                        title: 'Registered Hosts',
                        tools: this.getTools(),
                        items: Ext.create('Ext.app.RegeHosts'),
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    }]
                },{
                    id: 'col-2',
                    items: [{
                        id: 'rouge',
                        title: 'Rouge Hosts',
                        tools: this.getTools(),
                        items: Ext.create('Ext.app.Rouge'),
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    }]
                },
                {
                    id: 'col-3',
                    items: [{
                        id: 'devices',
                        title: 'Devices',
                        tools: this.getTools(),
                        items: Ext.create('Ext.app.Devices'),
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    }]
                }
                ]
            }]
        }]
    });
    this.callParent(arguments);
},

onPortletClose: function(portlet) {
    this.showMsg('"' + portlet.title + '" was removed');
},

showMsg: function(msg) {
    var el = Ext.get('app-msg'),
        msgId = Ext.id();

    this.msgId = msgId;
    el.update(msg).show();

    Ext.defer(this.clearMsg, 3000, this, [msgId]);
},

clearMsg: function(msgId) {
    if (msgId === this.msgId) {
        Ext.get('app-msg').hide();
    }
}
});













  // function contents that is called

 requires:["*"],



    ,initComponent:function()
     {Ext.apply(this,{layout: {
        type: 'fit'
     }
     ,width:550,height:420,items:
    [

     {xtype:"label",fieldLabel: text, name:'txt',text:text,    
       id:'devicesLabel',style:'width:300px;'},

 {
xtype:'tabpanel',
width: 400,
    height: 400,

    items: [{
    title: 'Foo'
    }, {
    title: 'Bar',
    tabConfig: {
        title: 'Custom Title',
        tooltip: 'A button tooltip'
    }
    }]

}



   ]


  });this.callParent(arguments)}});

If you want people to help you, you could at least take the time to format your code so it's readable. — Evan Trimboli
@EvanTrimboli sorry for the trouble.I apologize. But i have done that now. — dev
Also note your code still isn't formatted at all, it's impossible to read without having to correct it & put it an editor. — Evan Trimboli
hmm it's hard to read your code but fit layout should have one item. You have label and tabpanel that's two — Vytautas

Evan Trimboli Evan Trimboli · Accepted Answer · 2012-03-22T09:51:25

I'd suggest you read the docs for fit layout, the reason it doesn't work is in the first line: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit

You need to use some other kind of layout, for example to make them appear side by side, use hbox. For on top of each other, use vbox. There's several other layouts, you can see examples of them in the layout browser example.

extJS tabs not displaying in portal layout

1 Answers