PDA

View Full Version : Problem when Expanding and Collapsing



Sabareesh
8 May 2012, 2:47 AM
Is there any options in 4.0.7 such as "forcefit" as it was in 3.4. so that the panel fits to the screen when resizing.

Currently I am facing this issue. I have a west panel and center panel(which contains a tab panel) which is initially fine , but when collpasing and expanding the west panel , the center panel is not fitting to the screen .

Am I missing something .

Thanks in advance

friend
8 May 2012, 3:51 AM
It sounds like a layout or region misconfiguration problem. Can you post a concise code sample of your layout?

In the meanwhile, here's a functional code sample you can refer to:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
frame: true,
height: 70,
html: '<span style="font-size: 24px;">North Region Title</span>',
title: 'North Title'
},{
xtype: 'panel',
region: 'west',
collapsible: true,
frame: true,
title: 'Menu Panel',
width: 200
},{
xtype: 'panel',
region: 'center',
layout: 'fit',
items: [{
xtype: 'panel',
html: 'A child content panel of the center region.'
}]
},{
xtype: 'panel',
region: 'south',
frame: true,
height: 54,
html: '&copy; 2012, Ren & Stimpy, Inc.',
style: {
textAlign: 'right'
},
title: 'South Region'
}]
});
});
</script>
</head>
<body>
</body>
</html>

Sabareesh
8 May 2012, 4:04 AM
{xtype: 'panel',
height: gScreenHeight * 0.8914,
layout: 'border',
width: '100%',
items: [{
xtype: 'appWest', // custom defined component
id: 'westPanel',
collapsible: true,
collapseDirection: 'left',
region: 'west',
width:gScreenWidth * 0.1736,
}, {
xtype: 'artistFormGridPanel', // Custom defined component that contains tab panel
id: 'centerPanel',
layout: 'fit',
region: 'center',
//height: gScreenHeight * 0.8915,
//width: gScreenWidth * 0.8194
}]
}

Am I missing something .

Thanks

Sabareesh
8 May 2012, 6:45 AM
Fixed it .

It was problem with the layout of the child item(the tab panel).

Thanks.