1

ExtJS 4 を使用すると、次のウィンドウが表示されます。

    var mainWin = Ext.create('Ext.Window',{
    title: 'IE Screwup Illustration',
    id: 'MAINWIN',
    constrain: true,
    constrainTo: 'appdiv',
    x: 0,
    y: 0,
    width: '100%',
    height: 518,
    moveable: false,
    closable: false,
    layout: {
        type: 'border',
        padding: 3
    },
    renderTo: Ext.Element.get('appdiv'),
}).show();

スタイルが以下に示されている要素である「appdiv」と呼ばれる要素へのレンダリングに注意してください。

#appdiv {
    position: absolute;
    left: 10px;
    width: 90%;
    height: 520px;
    border: 1px solid;
    overflow: hidden;
    border-color: #000000;
}

ウィンドウのレンダリングに問題はありません。問題なく appdiv 内に表示され、周囲に素敵な境界線が表示されます。

ブラウザのサイズを変更すると、問題が発生します。ウィンドウは、appdiv DIV 内ではなく、画面の中央に配置しようとしているようです。これにより、DIV 内で移動され、左隅の右下にレンダリングされます。

サイズ変更時にウィンドウの位置を変更する試みなど、さまざまなトリックを試しました。何も機能していないようで、他に何も考えられません。

ブラウザのサイズが変更されたときに、このウィンドウを DIV 内に保持する方法を教えてください。ありがとう...

4

4 に答える 4

1

プロジェクトで通常どのように問題を解決したかを説明するために、 JS Fiddleを作成しました。

解決策は、ウィンドウを中央に配置するコンポーネントのサイズ変更イベントをリッスンし、ウィンドウの新しい位置を計算することです。私の例では、このコンポーネントはviewportでした。

これが仕事を成し遂げるリスナーです：

viewPort.on('resize', function(vp, width, height) {
    var me = this,
       winWidth = me.getWidth(),
       winHeight = me.getHeight(),
       left = (width -winWidth) / 2,
       top = (height -winHeight) / 2;

    me.setPosition(left, top);
}, mainWin);
于 2013-01-02T17:52:45.673 に答える
1

問題の答えを見つけました。それはタイミングの問題であることが判明しました。

Matyas さんが提案した setPosition() メソッドが無視されているようで意味が分からなかったので、「move」イベントを確認しました。どうやら、Ext ウィンドウが <div> にレンダリングされると、サイズ変更イベントの後に移動イベントを受け取ります。理由はわかりません (ExtJS 内部の専門家がここで助けてくれるのではないでしょうか?)。

そのため、Matyas のサイズ変更リスナーに示されている計算を行う代わりに、mainWin で移動リスナーを作成しました。ウィンドウを <div> の左上隅に置いておきたかったので、私のものはやや単純でした。

listeners: {
    move: function(theWin,xP,yP,theOp) {
    if((xP != 0) || (yP != 0)) {
        theWin.setPosition(0,0);
    }
}

このように、ブラウザがウィンドウを必要な場所以外の位置に移動するたびに、元に戻していました。これで問題は解決しました。

この質問に答えてくれたすべての人に感謝します（コメントを含む）。これらの回答がなければ、この問題を解決するために必要な手がかりを得ることができなかったでしょう.

于 2013-01-03T14:03:06.007 に答える
0 
        Ext.EventManager.onWindowResize(function() {
            if(mainWin.isVisible()) {
                mainWin.center();
            }
        }, this, {buffer: 1});
于 2019-04-28T19:04:17.283 に答える