1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    96
    Vote Rating
    3
    jeremym is on a distinguished road

      0  

    Default Simple tab panel loads in Firefox fine, not in IE7

    Simple tab panel loads in Firefox fine, not in IE7


    I've got a very simple viewport that I created to use in a shared development environment where we're ramping up on extjs... For the moment it's just a toolbar and a tab panel. Using extjs 4.0.7 this renders as expected (3 tabs, with the inlined html), works fine in both IE7 and Firefox. When I updated to the 4.1.0-beta2 it stopped working in IE7, now I only get the toolbar and nothing of the tab panel. Firefox still renders it just fine. My app.js is basically empty other than the autoCreateViewport:true ...

    Code:
    Ext.define('lwdiag.view.Viewport', {
        extend: 'Ext.container.Viewport',
    
        layout: 'fit',
    
        requires: ['Ext.tab.*'],
    
        initComponent: function() {
        this.items = {
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                height: 20,
                items: [{
                    xtype: 'component',
                    html: 'navigation toolbar'
                }]
            }
            ],
            layout: {
                type: 'border'
            },
            items: [{
                width: 600,
                xtype: 'tabpanel',
                activeTab: 0,
                region: 'center',
                items: [{
                    xtype: 'panel',
                    title: 'Content Panel 0',
                    html: '<center>Panel Content</center>'
                },
                {
                    xtype: 'panel',
                    title: 'Content Panel 1',
                    html: 'For testing purposes replace this entry with "xtype:<yourviewalias>" and remove the html entry'
                },
                {
                    xtype: 'panel',
                    title: 'Content Panel 2',
                    html: 'For testing purposes replace this entry with "xtype:<yourviewalias>" and remove the html entry'
                }]
            }]
        }
    
        this.callParent();
        }
    
    });
    Did something change in 4.1 related to default height maybe? There are no errors in firebug or in IE...

    Thanks!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,651
    Vote Rating
    899
    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


    BorderLayout got a lot of work but in this code you don't need border layout. If you are only going to have one item then use fit.
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    96
    Vote Rating
    3
    jeremym is on a distinguished road

      0  

    Default


    That resolved the issue, thanks. I didn't realize a border layout requires multiple components to function correctly.

Thread Participants: 1