1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    39
    Vote Rating
    0
    Answers
    1
    Roman2012 is on a distinguished road

      0  

    Default Answered: List is not showing inside of a TabPanel

    Answered: 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!

  2. 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);

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    39
    Vote Rating
    0
    Answers
    1
    Roman2012 is on a distinguished road

      0  

    Default Thanks!

    Thanks!


    You've solved hours on hours of agony

    Though I didn't get why this happens.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1