1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    39
    Answers
    1
    Vote Rating
    0
    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
    36,791
    Answers
    3465
    Vote Rating
    833
    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
    Answers
    1
    Vote Rating
    0
    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
    36,791
    Answers
    3465
    Vote Rating
    833
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi