List is not showing inside of a TabPanel

Hi,

I'm trying to show a list inside of a tab in TabPanel. When I just show the list - it works fine, but when I put it inside of a TabPanel it is not shown.

It is shown when I use this code in the launch event:

Code:

---

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

---

And when I use this code, it won't show (though the tabs are shown as need). I've also tried including the Ext.create list inside the items, still same result.

Code:

---

        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: [list] // this is Ext.create('Ext.List', { ... as shown before
                },
                {
                    xtype: 'toolbar',
                    title: 'Pizza',
                    dock: 'top'
                }
            ]
        }).setActiveItem(1); // this is set for debugging only

---

What could be wrong? Thanks!

You are nesting the list within a panel. Try to unnest 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);

---

You've solved hours on hours of agony :)

Though I didn't get why this happens.

The issue is that the list needs a layout so the size is something more than zero. So with your code when you had it nested within a panel, that panel was using the default 'auto' layout which won't give your list a height therefor you couldn't see it. It was rendered, just with zero height. Tab panel uses card layout which makes each of it's items take up 100% of it's height and width and that is why you can now see it.