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
  });