13

モーダルウィンドウを作成する場合：

Ext.define('myWindow', {
    extend: 'Ext.Container',
    alias: 'widget.myWindow',
    floating: true,
    modal: true,
    listeners:
        'onMaskClick???': { close the window }
    .....
}

ユーザーがウィンドウの外側のマスクをクリックしたことをどのように知ることができますか？Sench Touchには、指定できる構成hideOnMaskTapがあります。extJSのイベント/構成とは何ですか？

4

4 に答える 4

17

Tramwayのケース（一種）は、モーダルウィンドウまたは非モーダルウィンドウで機能します。ただし、コンボボックスのバウンドリストなどの子コンポーネントがウィンドウの境界の外に浮かんでいる場合はそうではありません。

ただし、とにかくモーダルウィンドウを使用する場合は、このようにマスクのクリックイベントをリッスンできます。

Ext.define('myWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.myWindow',
    floating: true,
    modal: true,

    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.mon(Ext.getBody(), 'click', function(el, e){
            me.close(me.closeAction);
        }, me, { delegate: '.x-mask' });
    }
});
于 2013-03-20T13:05:02.870 に答える
11

すべてのクリックイベントをリッスンしてから、クリック位置がウィンドウの外にあるかどうかを確認できます

Ext.define('myWindow', {
    extend: 'Ext.Container',
    alias: 'widget.myWindow',
    floating: true,
    modal: true,

    initComponent: function () {
        this.initEvents();
        this.callParent();
    },

    initEvents: function () {
        //make sure your window is rendered and have sizes and position
        if(!this.rendered) {
            this.on('afterrender', this.initEvents, this, {single: true});
            return;
        }

        this.mon(Ext.getBody(), 'click', this._checkCloseClick, this);
    }

    _checkCloseClick: function (event) {
        var cx = event.getX(), cy = event.getY(),
            box = this.getBox();

        if (cx < box.x || cx > box.x + box.width || cy < box.y || cy > box.y + box.height) {
            //clean up listener listener
            this.mun(Ext.getBody(), 'click', this._checkCloseClick, this);
            this.close();
        }
    }
}
于 2012-09-15T08:41:54.553 に答える
2

これも試すことができます： 

Ext.getBody().on('click', function(e, t){
    var el = win.getEl();

    if (!(el.dom === t || el.contains(t))) {
        win.close();
    }
});
于 2013-05-02T14:07:44.930 に答える
0

リスナーをボディに追加し、cssクラスをチェックすることは、私にとって少しハッキーだと感じました。実際には、のプライベートメソッド_onMaskClickをオーバーライドできますExt.ZIndexManager（ハッキーではありませんを参照）。これにより、すべてのウィンドウに独自の構成パラメーター（さらにはイベント）を追加できます。

Ext.define('MyApp.ux.ZIndexManager_maskClick', {
  override: 'Ext.ZIndexManager',

  _onMaskClick: function ()
  {
    if (this.front)
    {
      var allowed = this.front.fireEvent('maskclick', this.front, this.mask);

      if (allowed !== false && this.front.closeOnMaskClick)
        this.front.close();
    }
    return this.callParent(arguments);
  },
});
于 2017-07-25T10:33:49.910 に答える