PDA

View Full Version : Switching views not working correctely (Viewport & Window)



suamikim
20 Mar 2012, 5:06 AM
Hey there,

Working on a small website of mine, i just stumpled upon a problem. To clarify the problem, i created a pretty simple testpage:


var page1, page2;

function showPage1() {
// Destroy page 2 if it exists
if (undefined !== page2) {
page2.destroy();
page2 = undefined;
}

// Create page 1 and show it (just a window with a button on it)
page1 = Ext.create('Ext.window.Window', {
layout: 'fit',
items: [{
xtype: 'button',
text: 'Show page 2',
handler: function() { showPage2(); }
}]
});
page1.show();
}

function showPage2() {
// Destroy page 1 if it exists
if (undefined !== page1) {
page1.destroy();
page1 = undefined;
}

// Create page 2 and show it (Viewport with a panel in the north that holds a button and a large panel in the center)
page2 = Ext.create('Ext.container.Viewport', {
layout:'border',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
region: 'north',
layout: 'hbox',
items: [{
xtype: 'button',
text: 'Show page 1',
handler: function() { showPage1(); }
}]
}, {
region: 'center',
collapsible: true,
title: 'Center',
width: 150
}]
});
}

The html-Page just calls showPage1 after the page-load with Ext.onReady(showPage1).

The problem occurs, when i switch from Page 1 (01) to Page 2 (02), back to Page 1 (03) and once again to Page 2 (04). Page 2 isn't shown correctely now. The page is completely blank with a light-blue background:
01: 32924 02: 32925
03: 32926 04: 32927


It seems, that the viewport isn't aligned correctely in the visible browser-area because when i resize the window my viewport-items show up for a short moment in the lower left corner and disappear immediately:
32928

Is there anything wrong with my code and what can i do to correct the behaviour?

Thanks,

Mik

P.s.: Sorry for the meaningless thread-title. I just didn't came up with one that suits better...

mitchellsimoens
20 Mar 2012, 9:34 AM
This seems to be working fine for me.

suamikim
20 Mar 2012, 11:34 AM
Ok, i just switched from ExtJS 4.0.2a to the current release 4.0.7 and the problem is gone.

Thanks & best regards