Protip: Constraining Ext JS Windows

This is the only methodology that I’ve found which reliably constrains windows to panels.

Step 1: Define your window with a constrain: true property

Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywindow',
    autoShow: true,
    height: 320,
    width: 501,
    constrain: true,
    layout: {
        type: 'fit'
    },
    title: 'My Constrained Window'
});

Step 2: Instantiate the window into a container using the constrainTo property.

  // get reference to parent panel / container
  var parentPanel = Ext.ComponentQuery.query('#dashboardPanel')[0];
  
  // instantiate and constrain the window

  Ext.widget('mywindow', {
     constrainTo: parentPanel.getEl(),
     x: 5,
     y: 20
  });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s