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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar