PDA

View Full Version : Panels not resizing along with browser resize when using renderTo - Ext4.1.3



cbadz
2 Jan 2013, 7:58 AM
I've been attempting to embed my ExtJS into a div rather than using the viewport to render the entire screen. I have been unable to find a solution for how to get the ExtJS panels to auto resize along with the browser window. Using Firebug I can see the div itself is resizing fine with the browser but the ExtJS panels are staying the same until a browser refresh.

Below is a slimmed down testcase that demonstrates my problem. I am running ExtJS 4.1.3 and developing with Firefox 17.

Thanks in advance,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Panel Resize Test Case</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = (Ext.isIE6 || Ext.isIE7) ? 'resources/themes/images/default/tree/s.gif' : Ext.BLANK_IMAGE_URL;
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: 'ext',
layout: 'border',
height: 600,
items: [{
xtype: 'panel',
title: 'Main Content',
region: 'center',
html: '<h1>Content</h1><p>This is my content.</p>'
},
{
xtype: 'tabpanel',
region: 'south',
height: 200,
collapsible: 'true',
collapsed: 'true',
items: [{
xtype: 'tab',
title: 't1',
closable: false,
html: '<h1>tab1</h1>'
},{
xtype: 'tab',
title: 't2',
closable: false,
html: '<h1>tab2</h1>'
},{
xtype: 'tab',
title: 't3',
closable: false,
html: '<h1>tab3</h1>'
}]
}]
});
});


</script>
</head>
<body></body>
</html>

EDIT:

Here is the updated code with skirtle's recommended solution:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>
<title>Panel Resize Test Case</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = (Ext.isIE6 || Ext.isIE7) ? 'resources/themes/images/default/tree/s.gif' : Ext.BLANK_IMAGE_URL;
Ext.onReady(function () {
var panel = Ext.create('Ext.panel.Panel', {
renderTo: 'ext',
layout: 'border',
height: 600,
items: [{
xtype: 'panel',
title: 'Main Content',
region: 'center',
html: '<h1>Content</h1><p>This is my content.</p>'
},
{
xtype: 'tabpanel',
region: 'south',
height: 200,
collapsible: 'true',
collapsed: 'true',
items: [{
xtype: 'tab',
title: 't1',
closable: false,
html: '<h1>tab1</h1>'
},{
xtype: 'tab',
title: 't2',
closable: false,
html: '<h1>tab2</h1>'
},{
xtype: 'tab',
title: 't3',
closable: false,
html: '<h1>tab3</h1>'
}]
}]
});
Ext.EventManager.onWindowResize(function(){
panel.updateLayout();
});
});




</script>
</head>
<body></body>
</html>

skirtle
2 Jan 2013, 8:12 AM
It won't automatically resize, you'll have to give it a kick. Just add a listener for window resize. It might be sufficient to call updateLayout but failing that you can manually set the panel size to match the div:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.EventManager-method-onWindowResize

cbadz
2 Jan 2013, 12:59 PM
It won't automatically resize, you'll have to give it a kick. Just add a listener for window resize. It might be sufficient to call updateLayout but failing that you can manually set the panel size to match the div:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.EventManager-method-onWindowResize

Thanks skirtle, I tried updateLayout and it seems to be working great.

I thought auto resize might have been baked into a config or somewhere I might have overlooked, but since that doesn't seem to be the case it looks like I'll be using this process.

nobruds
9 Oct 2014, 8:18 AM
Hello,


Sorry to dig up this thread, but I had the same problem. I just want to know if this is yet the current solution or the "error" has been fixed?


I'm using 4.2, but I want to buy v5.0

eg: The resize works fine for ext.toolbar, using renderTo div


thanks