PDA

View Full Version : Resizing viewport containing a constrained maximized window



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>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<!-- page specific -->
<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();