View Full Version : tabpanel being created as a Ext.panel.Panel

27 Feb 2014, 8:36 AM
Have a weird problem and I'm not sure what I'm doing wrong.

I'm trying to create a viewport with one of the items being a hidden tabpanel with no items. I will later unhide and add items to the tabpanel programmatically.

It looks like that extjs is not creating a tabpanel but creating a Ext.panel.Panel instead. I verified by placing the code outside by itself.


Ext.application({ requires: [],

name: 'TabPanel',

launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'center',
pack: 'center'

items: [{
height: 37,
id: 'shortinfopanel',
html: 'Type your phrase to perform search'
}, {
flex: 1,
hidden: true,
layout: 'fit',
xtype: 'panel',
header: false,
items: [{
xytpe: 'tabpanel',
id: 'resulttabpanel',
tabBar: {
padding: '0 0 0 0'
layout: 'fit',
items: []

var tabpanel = Ext.ComponentQuery.query('#resulttabpanel')[0];


I placed a breakpoint after looking up the tabpanel. the proto properties has the result as "Ext.panel.Panel" and not a tabPanel as I had expected.

Not sure what I am doing wrong. If someone could point me in the right direction, it would be much appreciated.

I am using extjs 4.2.2


4 Mar 2014, 6:40 AM
this "xytpe: 'tabpanel'" shoul be "xtype: 'tabpanel'". It didn't understand that you've declared a tapbanel, so it created a panel by default!

4 Mar 2014, 5:39 PM
Thank you so much. I was looking everywhere to see where the issue was.

This is my first time building a UI with extjs or javascript for the matter. Any tips on how to quickly look through this type of issue? There's nothing that shows up as an error so it was really difficult to pinpoint what the problem was.

4 Mar 2014, 11:32 PM
I think that in this situation you can rely on 2 things. Either your IDE or your intuition. Regarding the IDE I would recommend you to take a look at http://www.sencha.com/blog/the-new-sencha-eclipse-plugin. I personally use Sublime Text, and almost always rely on my intuition :D But this comes with experience. You could have guessed that the problem was in the tabpanel, and then double-check its declaration. Just keep on coding and you'll be fine ;)