View Full Version : Tab Panel with Border Layout loses West Region on Second View IE7

17 Jun 2009, 10:35 AM
Hello everyone,

I have a simple 3 tab, tab panel. The middle tab uses a border layout with west & center regions.

The tab panel renders correctly on Firefox & Safari, but when the middle tab is clicked a second time (after moving between tabs) using IE 7 the west region is no longer visible.

I've set the layoutOnTabChange: true and tried to refresh the page using a listener on the tab activate event, without any luck. It seems as though the activate event is not firing on IE7.

I'm very new to extjs and not sure what I should be trying next.

Thanks for your help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title>Error Sample</title>
<link rel="stylesheet" type="text/css"
href="/ext/resources/css/ext-all.css" />
<!-- <link rel="stylesheet" type="text/css" href="/ext/resources/css/xtheme-darkgray.css" /> -->
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>

<style type="text/css">
#lotto_form {
margin-top: 3px;
margin-left: 10px;
Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';

var infoTab = {
title: 'Policies and Information',
id: 'lottoInfo',
layout: 'accordion',
items: [{
title: 'Item1 - Polices and Information',
resetBodyCss: true,
bodyStyle: 'padding: 5px',
//autoLoad: 'http://localhost:3000/hut_lotto/fm_content', //for mac development
autoLoad: '', //for windows testing with vm
collapsed: true
title: 'Item 2 - Policies and Information',
resetBodyCss: true,
//autoLoad: 'http://localhost:3000/hut_lotto/kk_content', //for mac development
autoLoad: '', //for windows testing with vm
bodyStyle: 'padding: 5px',
collapsed: false

var requestTab = {
title: 'Request Dates',
id: 'lottoRequests',
layout: 'border',
items: [{
region: 'west',
title: 'West Region',
html: 'This is the west region',
layout: 'fit'
region: 'center',
title: 'Center Region',
html: 'This is the Center region',
layout: 'fit'
activate : function(panel){
//alert('From Request Tab'); //for testing if listener is firing

var confirmationTab = {
title: 'Confirmation',
id: 'lottoConfirmation',
html: 'This is the confirmation area',
activate : function(panel){
//alert('From Confirmation Tab'); //for testing is listener is firing

var mainLayout = new Ext.TabPanel({
renderTo: 'lotto_form',
layoutOnTabChange: true,
width: 940,
height: 600,
activeTab: 1,
items: [
<div id='lotto_form'></div>

17 Jun 2009, 10:40 AM
Add defaults:{hideMode:'offsets'} to the TabPanel config.

17 Jun 2009, 10:45 AM
Thanks Condor, that worked perfectly!