Success! Looks like we've fixed this one. According to our records the fix was applied for a bug in our system in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default TabPanel won't show content without a height set

    TabPanel won't show content without a height set


    I am using ST2 PR2 and Google Chrome

    I have added a tab panel as a child item of my viewport. the content of the tabs will not show unless there is a fixed height set on the tab panel.

    Code:
      Ext.define('App.view.Viewport', {
        extend: 'Ext.Panel',
        config: {
          fullscreen: true,
          items: [
            {
              dock: 'top',
              xtype: 'toolbar',
              ui: 'light',
              items: [
                {
                  text: 'Login',
                  ui: 'confirm'
                }
              ]
            }, {
              xtype: 'tabpanel',
              tabBarPosition: 'bottom',
              items: [
                {
                  xtype: 'homepanel'
                }, {
                  xtype: 'registerpanel',
                  id: 'registerForm'
                }
              ]
            }
          ]
        }
    });
    this is what i get with no height on the tab panel
    tabpanelnofullscreen.jpg

    if i set a height on the tab panel my content will show.

    Code:
      Ext.define('App.view.Viewport', {
        extend: 'Ext.Panel',
        config: {
          fullscreen: true,
          items: [
            {
              dock: 'top',
              xtype: 'toolbar',
              ui: 'light',
              items: [
                {
                  text: 'Login',
                  ui: 'confirm'
                }
              ]
            }, {
              xtype: 'tabpanel',
              height: 700,
              tabBarPosition: 'bottom',
              items: [
                {
                  xtype: 'homepanel'
                }, {
                  xtype: 'registerpanel',
                  id: 'registerForm'
                }
              ]
            }
          ]
        }
    });
    this is what I get with a height set.
    tabpanelwithheightset.jpg

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    You need to add a layout: 'fit' to your viewport, or else the TabPanel will not stretch to the size of your viewport.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    i tried that earlier, but it loads the tab panel to the right of the viewport panel if I do that.

    Code:
    Ext.define('App.view.Viewport', {    extend: 'Ext.Panel',
        config: {
          fullscreen: true,
          layout: 'fit',
          items: [
            {
              dock: 'top',
              xtype: 'toolbar',
              ui: 'light',
              items: [
                {
                  text: 'Login',
                  ui: 'confirm',
                  action: 'newLogin'
                }
              ]
            }, {
              xtype: 'tabpanel',
              tabBarPosition: 'bottom',
              items: [
                {
                  xtype: 'homepanel'
                }, {
                  xtype: 'registerpanel',
                  id: 'registerForm'
                }
              ]
            }
          ]
        }
    });
    that code results in this
    tabpanelfitlayoutonviewport.jpg

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Sorry, I cannot reproduce this with a similar simple test case:

    Code:
    Ext.application({
        launch: function()  {
            Ext.Viewport.add({
                fullscreen: true,
                layout: 'fit',
                items: [
                    {
                        dock: 'top',
                        xtype: 'toolbar',
                        ui: 'light',
                        items: [
                            {
                                text: 'Login',
                                ui: 'confirm',
                                action: 'newLogin'
                            }
                        ]
                    },
                    {
                        xtype: 'tabpanel',
                        tabBarPosition: 'bottom',
                        items: [
                            {
                                title: 'home',
                                html: 'home'
                            },
                            {
                                title: 'register',
                                items: [
                                    {
                                        xtype: 'fieldset',
                                        items: [
                                            {
                                                xtype: 'textfield',
                                                label: 'Test'
                                            }
                                        ]
                                    }
                                ],
                                id: 'registerForm'
                            }
                        ]
                    }
                ]
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    well the only difference is the way my viewport is created.

    app.js
    Code:
    Ext.application({    name: 'App',
        controllers: ['Users', 'Sessions'],
        stores: ['Users'],
        autoCreateViewport: false,
        init: function() {
          return Ext.create('App.view.Viewport');
        }
    });
    Viewport.js
    Code:
    Ext.define('App.view.Viewport', {    extend: 'Ext.Panel',
        config: {
          fullscreen: true,
          layout: 'fit',
          items: [
            {
              dock: 'top',
              xtype: 'toolbar',
              ui: 'light',
              items: [
                {
                  text: 'Login',
                  ui: 'confirm',
                  action: 'newLogin'
                }
              ]
            }, {
              xtype: 'tabpanel',
              tabBarPosition: 'bottom',
              items: [
                {
                  xtype: 'homepanel'
                }, {
                  xtype: 'registerpanel',
                  id: 'registerForm'
                }
              ]
            }
          ]
        }
    });

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    And just to confirm your "simple" example below
    Code:
    Ext.application({    
        name: 'App',
        launch: function() {
          Ext.Viewport.add({
            fullscreen: true,
            layout: 'fit',
            items: [
              {
                dock: 'top',
                xtype: 'toolbar',
                ui: 'light',
                items: [
                  {
                    text: 'Login',
                    ui: 'confirm',
                    action: 'newLogin'
                  }
                ]
              }, {
                xtype: 'tabpanel',
                tabBarPosition: 'bottom',
                items: [
                  {
                    title: 'home',
                    html: 'home'
                  }, {
                    title: 'register',
                    html: 'register'
                  }
                ]
              }
            ]
          });
        }
    });
    results in this

    simpleexample.jpg

    just to note this is using sencha-touch.css and sencha-touch-all-debug.js

  7. #7
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    I made an example like you posted outside of my rails app, I have included the zip file with the exact files i am testing in it. When I view that in Chrome or on my Andriod phone it looks like this. I am using Ubuntu 11.10 if that helps, but like I said it looks the same on my Android phone. To use my example all you have to do is extract it and add ST2 in a directory named touch inside the extracted example directory.

    example.jpg
    Attached Files

  8. #8
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Are you sure you are running PR2? http://www.sencha.com/products/touch/download/

    I cannot replicate this on my Mac (Chrome + Safari) or on my iOS devices.

    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  9. #9
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    Yes I am using PR2 for sure, just to verify my sanity I downloaded it when I posted my last example . In your screen shot the tab panel content is not shown like my original bug report. Then you said to add layout: 'fit' to the viewport, which adds the tab panel to the right of the viewport panel like in the screenshots I provided.

    I mean do you guys only test in OSX and on IOS? That would explain why there is a million bugs in EXTJS 4 and ST2.

  10. #10
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    83
    Vote Rating
    2
    danCTS is on a distinguished road

      0  

    Default


    FWIW i also tested on Chrome and Ubuntu 11.04 at my office with that example you gave with the same result. If I remove layout: 'fit' from the viewport then the content of the tab panel does not show. If I put layout: 'fit' on the viewport it then puts the tabpanel to the right of the viewport exactly the same size. Certainly seems like a bug to me.

    Screenshot-Example - Google Chrome.jpg

Thread Participants: 2

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