PDA

View Full Version : Simple tab panel loads in Firefox fine, not in IE7



jeremym
9 Feb 2012, 3:52 PM
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 ...



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!

mitchellsimoens
10 Feb 2012, 4:14 AM
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.

jeremym
10 Feb 2012, 10:07 AM
That resolved the issue, thanks. I didn't realize a border layout requires multiple components to function correctly.