CODEWITHSUNDEEP
extjsextjs4.1
Frank W. Zammetti
Frank W. Zammetti

Reputation: 1241

Window maximize issue when constrained to BorderLayout center region

I have a situation where I want to constrain a window to the center region of a BorderLayout. This of course works fine, however, when I click the maximize button, the bottom docked toolbar is getting cut off. If I simply do not constrain the window then this doesn't happen. I'm not sure if I'm missing something obvious or if this might be a bug. This is using version 4.2.1. Here's simplified test code that demonstrates the issue:

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css"
      href="js/extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="js/extjs/ext-all.js"></script>

    <script>

      Ext.onReady(function() {

        Ext.create("Ext.container.Viewport",
          { layout : "border",
            items: [
              { height : 60, region : "north", items: [ ] },
              { id : "regCenter", region : "center" }
            ]
          }
        );

        Ext.create("Ext.window.Window",
          { maximizable : true, width : 350, height : 440,
            constrainHeader : true, constrainTo : "regCenter",
            dockedItems : [
              { xtype : "toolbar", dock : "bottom",
                items : [ { text : "XXX" } ]
              }
            ],
            items : [ ]
          }
        ).show();

      });

    </script>

  </head>

  <body></body>

</html>

I've got it narrowed down to something to do with the constrainTo and constrainHeader... if I remove either or both then maximize works as expected, nothing is cut off on the bottom.

Thanks in advance for any suggestions, Frank

Upvotes: 0

Views: 1351

Answers (1)

vajrakumar
vajrakumar

Reputation: 758

Instead of 

constrainHeader : true, constrainTo : "regCenter",

put :

constrain : true, renderTo :'regCenter',

As Documentation for constrainHeader says,

constrainHeader : Boolean True to constrain the window header within its containing element ( allowing the window body to fall outside of its containing element )

And

constrain : Boolean

True to constrain the window within its containing element, false to allow it to fall outside of its containing element. By default the window will be rendered to document.body. To render and constrain the window within another element specify renderTo. "Optionally the header only can be constrained using constrainHeader".

Hope this Explaination works for you.

Upvotes: 2

Related Questions