PDA

View Full Version : viewport removeAll do not remove all child component



Traktopel
23 Dec 2009, 12:54 AM
Hi all,

I got a small piece of code which works correctly in 3.0.3 and previous but fails in 3.1.0.

The purpose is to create a viewport for an authentication part. Then when authentication is ok, it destroys the current viewport and create an other one.

Since 3.1.0 when we try to resize the browser, an error occurs :
style = me.dom.style; // me.dom is undefined in setLeftTop function

It seems that when resizing windows, there is still a reference to the previous viewport component (here 'login-viewport-center' component) ... even after doing a removeAll call ...



Ext.onReady(function(){
function show_second_viewport(){
viewport.removeAll(true);
viewport.destroy();

var panel2 = new Ext.Panel({
border: false,
id: 'panel2',
layout: 'form',
frame: true,
labelWidth: 130,
width: 300,
defaults: {
border: false,
frame: true,
labelWidth: 130,
width: 100
},
html: 'test'
});

var viewport2 = new Ext.Viewport({
id: 'viewport2',
layout: 'border',
border: false,
frame: true,
defaults: {
border: false
},
items: [{
id: 'viewport2-center',
region: 'center',
items: [panel2]
}]
});
}

var name = new Ext.form.TextField({
id: 'name-textfield',
fieldLabel: 'Name'
});

var button = new Ext.Button({
text: 'Go',
handler: function(){
show_second_viewport();
}
});

var loginPanel = new Ext.Panel({
border: false,
id: 'login-panel',
layout: 'form',
frame: true,
labelWidth: 130,
width: 300,
defaults: {
border: false,
frame: true,
labelWidth: 130,
width: 100
},
items: [name, button]
});

var viewport = new Ext.Viewport({
id: 'login-viewport',
layout: 'border',
border: false,
frame: true,
defaults: {
border: false
},
items: [{
id: 'login-viewport-center',
region: 'center',
items: [loginPanel]
}]
});

Ext.get('login-panel').center();
});
Thanks.

Animal
23 Dec 2009, 1:05 AM
From the Notes section of BorderLayout's documentation:

quote=TFM]The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.[/quote]

And this:



items: [{
id: 'viewport2-center',
region: 'center',
items: [panel2]
}]


How are you imagining that panel2 will be sized? A random size? The dimensions you are currently thinking about? 400px by 150px? What?

Animal
23 Dec 2009, 1:05 AM
From the Notes section of BorderLayout's documentation:


The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.

And this:



items: [{
id: 'viewport2-center',
region: 'center',
items: [panel2]
}]


How are you imagining that panel2 will be sized? A random size? The dimensions you are currently thinking about? 400px by 150px? What?

Animal
23 Dec 2009, 1:28 AM
Why would you use a border layout with only a center region?

Why not use a fit layout?

Why destroy the whole Viewport?

Why not just remove one Component from a fit layout, and add another one?

Traktopel
23 Dec 2009, 1:46 AM
Why would you use a border layout with only a center region?
Why not use a fit layout?

According to the documentation :

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing.So I thought it was the only way to get a authentication panel well centered.
(It is just a test case to show the problem, in our application we fill all regions in the seconf viewport.)


Why destroy the whole Viewport?
To be able to make another one just after


Why not just remove one Component from a fit layout, and add another one?
I will check this way to do.

Thanks

Traktopel
23 Dec 2009, 2:19 AM
It works ! Thank you very much animal ...

Sorry for having misunderstood what you told me before ... I was standing on the fact that a viewport must have a border layout ... sorry

Thanks !!