title: Extjs: prevent modal window from losing focus
body: <p>In an hybrid rails/sencha app, i defined a class that displays a small iframe inside an <strong>Ext.window.Window</strong> component. </p>
  
  <p>I would like this window to close when pressing the <strong>ESC</strong> button, a default behaviour when setting <code>modal: true</code>
  However, once i click inside the loaded iframe, this binding does not work anymore, i.e. the ESC button no longer closes the window. I am now trying to use the blur and focus events in order to give my window the focus again, so that the window mantains the focus:</p>
  
  <pre><code>Ext.require([
      'Ext.window.*'
  ]);
  
  Ext.define('App.ModalWindow', {
      id: 'modalwindow',
      extend: 'Ext.window.Window',
      alias: 'widget.modalwindow',
      title: 'Component Details',
      autoShow: true,
      height: 250,
      modal: true,
      draggable: true,
      resizable: false,
      width: 550,
      layout: 'fit',
      header: false,
  
      listeners: {
          el: {
              blur: {
                  fn: function() {console.log('loss'); this.focus()},
              },
              focus: {
                  fn: function() {
                      console.log('focus')
                  },
              }
          }
      },
  
      buttons: [
          {
              text   : 'Close',
              handler: function () { this.up('.window').close(); }
          }
      ],
  
      initComponent: function() {
          var me = this;
  
          //Close modal window when clicking on mask
          me.mon(
              Ext.getBody(),
              'click',
              function(el, e){me.close();},
              me,
              { delegate: '.x-mask' }
          );
  
          //Add iframe to window
          me.items = [{
              xtype: "component",
              style: {
              padding: '10px'
              },
              autoEl: {
                  tag: 'iframe',
                  frameborder: 0,
                  src: me.detail_link
              }
          }];
  
          //Call superclass' initComponent
          me.callParent(arguments);
      }
  });
  
  
  //Add an event luistener to the window, in order to center the modal window when the browser is resized
  //first check if modalwindow exists, cause otherwise calling the center() method on a non-existing object
  //will stop the event propagation
  Ext.EventManager.onWindowResize(function () {
      if( Ext.getCmp('modalwindow'))    {
          Ext.getCmp('modalwindow').center();
      }
  });
  </code></pre>
  
  <p>Unfortunately, this does not work. While clicking on the iframe triggers blur and then focus again, a second clicking on the iframe won't have the same effect, and most importantly, the ESC button will still not close the window.</p>
  
  <p>What am i doing wrong? How can i close the Window with the ESC button even if i click on an iframe inside the window?</p>