Sencha touch 2 - Unable to insert a list inside a panel or TabPanel

Question

I am trying to show a list inside a tab in a TabPanel. When I just show the list, it works fine, but when I put it inside the TabPanel, it doesn't display.

Shown when I use this code in the launch event:

Ext.create('Ext.List', { fullscreen: true, itemTpl: '<div class="contact">{ID} <strong>{Name}</strong></div>', store: cityStore }); 

And when I use this code, it will not be displayed (although tabs are displayed as needed). I also tried to include the Ext.create list inside the elements, all the same result.

  Ext.create('Ext.TabPanel',{ fullscreen: true, tabBarPosition: 'bottom', scrollable: true, items: [ { title: 'Home', iconCls: 'home', html: ['Welcome to my Pizza!'].join(""), style: 'text-align: center;' }, { title: 'Search', iconCls: 'search', items: [ Ext.create('Ext.List', { fullscreen: true, itemTpl: '<div class="contact">{ID} <strong>{Name}</strong></div>', store: cityStore }) ] }, { xtype: 'toolbar', title: 'Pizza', dock: 'top' } ] }).setActiveItem(1); // this is set for debugging only 

What could be wrong? Thanks!

Answer 1

The problem is resolved on the Sencha forums:

You will nest the list in the panel. Try disabling it:

code:

 Ext.create('Ext.tab.Panel',{ fullscreen: true, tabBarPosition: 'bottom', scrollable: true, items: [ { title: 'Home', iconCls: 'home', html: ['Welcome to my Pizza!'].join(""), style: 'text-align: center;' }, { xtype: 'list', title: 'Search', iconCls: 'search', store: cityStore, itemTpl: '<div class="contact">{ID} <strong>{Name}</strong></div>' }, { xtype: 'toolbar', title: 'Pizza', dock: 'top' } ] }).setActiveItem(1);