javascript - ExtJS ドラッグ イベント リスナーの動作が Chrome と Firefox で異なる

Question

Windowのタイトルバー(ヘッダー)に入力欄を追加しました。Chrome では、入力フィールドの選択と編集が機能し、ウィンドウをドラッグすることもできます。Firefox では、ウィンドウをビューポートの周りにドラッグできますが、入力フィールドを選択して編集することはできません。両方のブラウザで動作するようにするには、このコードをどのように修正すればよいですか?

問題の簡単なデモンストレーション:

Ext.define('Demo.DemoWindow', {
    extend: 'Ext.window.Window',
    xtype: 'demowindow',

    height: 300,
    width: 400,
    title: 'Window',
    autoShow: true,
    items: [{
            xtype: 'button',
            text : 'Press!',
            listeners: {
              click: function() {
               var win = this.up('window');
               var header = win.getHeader();
               header.setTitle('');

               var killDrag = false;
               var dragEvent = win.dd.on({
                 beforedragstart: function(dd, e) {
                   if (killDrag) {
                     return false;
                   }
                 }
               });

               var field = Ext.create('Ext.form.field.Text', {
                 name: 'Title',
                 allowBlank: false,
                 value: 'Type here something!',
                 listeners: {
                   el: {
                     delegate: 'input',
                     mouseout: function() {
                       killDrag = false;
                     },
                     mouseenter: function() {
                       killDrag = true;
                     }
                   }
                 }
                });

                header.insert(0, field);

              }
            }
    }]
});

Ext.application({
    name: 'Demo',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'absolute',
            items: [
                {
                    xtype: 'demowindow',
                    x: 20,
                    y: 20,
                }
            ]
        });
    }
});