Results 1 to 4 of 4

Thread: Resizing viewport containing a constrained maximized window

  1. #1
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default Resizing viewport containing a constrained maximized window

    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 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

    Code:
    <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>

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
      0  

    Default

    normaly you must using
    PHP Code:
    monitorResizetrue 
    for center region and for your window

    PHP Code:
    var win = new Ext.Window({
                            
    title: (btn == undefined "Title" btn.text),
                            
    maximized true,
                            
    renderTo'main_area',
                            
    monitorResizetrue,
                            
    autoScrolltrue,
                            
    layout'form',
    ...

                  var 
    main_area = {
                            
    region"center",
                            
    layout"fit",
                            
    monitorResizetrue,
    ... 

  3. #3
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default

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

  4. #4
    Sencha User lsaffre's Avatar
    Join Date
    Aug 2009
    Location
    Estonia
    Posts
    34
    Vote Rating
    0
      0  

    Default

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

    http://www.sencha.com/forum/showthre...Resize-problem

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

    Code:
       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();

Similar Threads

  1. Replies: 2
    Last Post: 18 Oct 2010, 1:12 AM
  2. Replies: 0
    Last Post: 22 Jan 2010, 4:00 AM
  3. Replies: 2
    Last Post: 20 Jan 2010, 2:03 AM
  4. Constrained floating DD Panel inside viewport with layout
    By jmesquita in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 28 Dec 2008, 6:40 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •