PDA

View Full Version : How do you make a floating panel resize with the browser?



jep
9 Sep 2011, 11:18 AM
I have the following example:



Ext.setup({
onReady: function() {

allPnl = new Ext.Panel({
fullscreen:true,
dockedItems:{xtype:'toolbar', dock:'top', items:{text:'click', handler:function () {
mainPnl.setCentered(true);
mainPnl.show('pop');
}}}
});

mainPnl = new Ext.Panel({
floating:true,
modal:true,
layout:'vbox',
scroll:'vertical',
centered:true,
width:520,
height:'60%',
defaults:{
xtype:'button',
height:20,
width:100
},
items:[
{text:'1'},
{text:'2'},
{text:'3'},
{text:'4'},
{text:'5'},
{text:'6'},
{text:'7'},
{text:'8'},
{text:'9'},
{text:'11'},
{text:'12'},
{text:'13'},
{text:'14'}
]
});

Ext.EventManager.onWindowResize(function () {
Ext.Viewport.updateBodySize();
});
}
});


Run this and click the button. When you resize the browser vertically to be larger or smaller, the outer shell of mainPnl resizes (the black border). However, the content does not. I've also tried calling mainPnl.doLayout()/doComponentLayout() to no effect.

Is there some way to actually have this floating panel know to recalculate its child items properly?

Tried this on 1.1.0 and 1.1.1, on Chrome.