5

Ext.applcation の起動メソッド内にロードマスクを追加して、表示時にウィンドウなどのフローティングコンポーネントもカバーするようにするにはどうすればよいですか?

現在、マスクは機能しますが、開いているウィンドウはカバーされません。

4

3 に答える 3

1

CSSを使用したソリューションを好みました：

body.x-masked .x-mask {
    z-index: 20000;
}

ウィンドウの z-index は 19001 なので、20000 は悪くありません。

于 2014-01-22T09:04:25.863 に答える
1

すべてがロードされたときに非表示になるカスタムローダーを作成できます...

1.本文にhtmlホルダーを作成します。

<div id="loading-mask"></div>
<div id="loading">
   <span id="loading-message">Loading. Please wait...</span>
</div>


2. css を追加してマスクを適切に配置します。

#loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 1;
}
#loading {
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 2;
    font-family: tahoma,arial,verdana,sans-serif;
    font-size: 12px;
}
#loading span {
    padding: 5px 30px;
    display: block;
}


3. Ext.onReady 呼び出しの外側で js 関数を作成します。

function hidePreloader() {
    var loadingMask = Ext.get('loading-mask');
    var loading = Ext.get('loading');

    //  Hide loading message            
    loading.fadeOut({ duration: 0.2, remove: true });

    //  Hide loading mask
    loadingMask.setOpacity(0.9);
    loadingMask.shift({
        xy: loading.getXY(),
        width: loading.getWidth(),
        height: loading.getHeight(),
        remove: true,
        duration: 1,
        opacity: 0.1,
        easing: 'bounceOut'
    });
 }


4.すべてのコンポーネントとタスクが完了して準備ができたら、hidePreloader メソッドを呼び出します。この場合、app.js 起動メソッドの読み込みが完了した後です。次に例を示します。

listeners: {
    afterrender: function(form) {
        hidePreloader();
    }
}

これはフィドルの例です。

于 2013-07-16T10:15:53.397 に答える