web-dev-qa-db-ja.com

ext 4で完全なモーダルウィンドウを作成する方法は？

Microsoft OS（xp、Vista、7など）のウィンドウのように...

メインウィンドウがモーダルウィンドウを作成する場合、ユーザーはメインウィンドウにアクセスできません。
（ツールバーを閉じてアクセスするなどを含む）。

Extjsで似たようなものを作りたいです。これは私のモーダルな例です：

Ext.create("Ext.Window", {
    title: 'aa',
    width: 200,
    height: 150,
    html: 'a',
    tbar: [{
        text: 'aa',
        handler: function() {
            Ext.create("Ext.Window", {
                title: 'aa',
                width: 150,
                closable: false,
                height: 100,
                html: 'b',
                ownerCt: this,
                modal: true
            }).show();
        }
    }]
}).show();

問題は、メインウィンドウの本体を無効にするだけで、ユーザーはメインツールバーにアクセスして閉じることもできるということです。

私の質問は、完全なモーダルを作成する方法ですか？または、それができない場合、メインウィンドウを無効にする方法、モーダルウィンドウが表示されている場合、モーダルウィンでリスナー表示を使用していますが、問題はこのリスナーからメインウィンドウにアクセスできないことです。

編集：

これはこれまでの私のコードです：

Ext.create("Ext.Window", {
    title: 'aa',
    width: 200,
    height: 150,
    html: 'a',
    maskOnDisable: false,
    tbar: [{
        text: 'aa',
        handler: function(a) {
            var parent = a.up("window");
            parent.disable();
            Ext.create("Ext.Window", {
                title: 'aa',
                width: 150,
                height: 100,
                html: 'b',
                listeners: {
                    scope: this,
                    "close": function() {
                        parent.enable();
                    },
                    /*
                    "blur" : function(){
                        this.focus()
                    }
                    */
                }
            }).show();
        }
    }]
}).show();

これはモーダルの概念ではありませんが、今私が望んでいるように見えますが、新しい問題があります。maskOnDisableが機能せず、blurのようなイベントが必要なので、ユーザーが親ウィンドウをクリックすると、ポップアップウィンドウに戻ります。 （新しい質問として投稿する必要がありますか？）

extjsmodal-dialogextjs4
8
Egy Mohammad Erdin

新しい答え：

親ウィンドウを適切にdisable()およびenable()しようとしましたか？これは、最初のウィンドウへのアクセスを停止すると同時に、ユーザーがメインアプリケーションのメニューと画面にアクセスできるようにするのに役立つと思います。これが私が試したものです：

_var x = Ext.create("Ext.Window",{
    title : 'aa',
    width : 200,
    height: 150,
    html : 'a',
    tbar : [{
        text : 'aa' ,
        handler :function(){
            // I disable the parent window.
            x.disable();

            Ext.create("Ext.Window",{                   
                title : 'aa',
                width : 150,
                closable : false,
                height: 100,
                html : 'b'
                // You will need to enable the parent window in close handler of this window.

            }).show();
        }
    }]
}).show();
_

ウィンドウを無効にすると、ウィンドウ内のコンポーネントが無効になり、ウィンドウを移動することもできなくなります。ただし、同時に、メインメニューやページ上のグリッドなどの他のコンポーネントにもアクセスできます。新しいウィンドウにもアクセスできます。ここで、モーダルのように動作させるには、子ウィンドウを閉じるときに親ウィンドウを有効にする必要があります。そのためにenable()メソッドを利用できます。

私はあなたが探しているものを達成するための他の方法を考えることができません。

古い答え：

ウィンドウ自体を参照してownerCtプロパティを設定したのはなぜだろうか！それがあなたの主な問題です。プロパティを削除することにより、あなたが探しているものを達成します。更新されたコードは次のとおりです。

_Ext.create("Ext.Window",{
    title : 'Extra window!',
    width : 150,                            
    height: 100,
    closable : false,                           
    html : 'A window that is a modal!',                         
    modal : true
}).show();
_

ownerCtプロパティを設定する理由はありましたか？

9
Abdel Raoof

最近、モーダルを設定します：true

Ext.define('myApp.view.MyModalWindow', {
extend: 'Ext.window.Window',
...
modal: true,
...
24
emolaus