Resizing viewport containing a constrained maximized window [Archive]

lsaffre

10 Sep 2010, 2:55 PM

Hello,

here is a code snippet that renders constrained maximized windows to the center region of the viewport. I agree that this is not why windows have been created, but I use this method in my project (http://code.google.com/p/lino/)because I found it to give best performance.

Here is my problem (to be reproduced on the code below)

- select any menu command
- resize your browser's window to make its height smaller than what is needed for the form fields. Okay: some of the fields get hidden.
- now make your browser's window again as high as necessary for the fields to fit again. Unexpected result: the fields don't become visible, there remains an empty unused area.

There are other small problems. For example try to collapse the "Messages" panel, but the form still won't layout.

Any ideas about how I can solve these problems?

Luc

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">2010-09-10</title>


<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

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

<script type="text/javascript">

function show_window(btn,event) {
var win = new Ext.Window({
title: (btn == undefined ? "Title" : btn.text),
maximized : true,
constrain : true,
renderTo: 'main_area',
layout: 'form',
items: [
{xtype: 'textfield', fieldLabel: 'A', value:'A'},
{xtype: 'textfield', fieldLabel: 'B', value:'B'},
{xtype: 'textfield', fieldLabel: 'C', value:'C'},
{xtype: 'textfield', fieldLabel: 'D', value:'D'},
{xtype: 'textfield', fieldLabel: 'E', value:'E'},
{xtype: 'textfield', fieldLabel: 'F', value:'F'},
{xtype: 'textfield', fieldLabel: 'G', value:'G'}
],
});
var main_area = Ext.getCmp('main_area')
main_area.on('resize',function() {
console.log('resize!');
win.maximize()
});
win.show();
}

Ext.onReady(function(){

var menu = {
items: [
{text:"Foo",menu:[
{text:"First",handler:show_window},
{text:"Second",handler:show_window},
{text:"Third",handler:show_window}]},
{text:"Bar",menu:[
{text:"Fourth",handler:show_window},
{text:"Fifth",handler:show_window}]}
],
region: "north",
xtype: "toolbar",
height: 29
};

var main_area = {
region: "center",
layout: "fit",
xtype: "container",
html: "\nThis is the main screen. there is no open window.",
id: "main_area"
};

var message_area = {
collapsible: true,
title: "Messages",
region: "south",
height: 100,
html: "\nChoose any menu command to open a dummy window, then resize the browser's window to see layout problems",
split: true,
autoScroll: true,
id: "konsole"
}

var viewport = new Ext.Viewport({layout:"border",items:[menu,main_area,message_area]});

// show_window();

});
</script>
</head><body>
</body></html>

laurentParis

10 Sep 2010, 4:52 PM

normaly you must using

monitorResize: true

for center region and for your window

var win = new Ext.Window({
title: (btn == undefined ? "Title" : btn.text),
maximized : true,
renderTo: 'main_area',
monitorResize: true,
autoScroll: true,
layout: 'form',
...

var main_area = {
region: "center",
layout: "fit",
monitorResize: true,
...

lsaffre

10 Sep 2010, 8:16 PM

Laurent, thanks for your idea which I tried instantly... but sorry, this doesn't change anything.

lsaffre

10 Sep 2010, 9:22 PM

The "Similar Threads" panel of the forum found the answer to my question:

http://www.sencha.com/forum/showthread.php?77150-CLOSED-113-3.0.0-Constrained-maximized-window-onWindowResize-problem

So in my snippet, just change the `show_window` function to the following:

var main_area = Ext.getCmp('main_area')
win.on('show', function(win) {
main_area.on('resize', win.onWindowResize, win);
});
win.on('hide', function(win) {
main_area.un('resize', win.onWindowResize, win);
});
win.show();