1

東、西、南の領域を持つビューポートの中央領域 (ボーダー レイアウト) でウィンドウを開くアプリケーションがあります。私が知る限り、これらのウィンドウを開くには 2 つの方法があり、どちらにも注意事項があります。

.add()1 つ目は、window コンポーネントをそのコンテナー (中央領域) に追加するために使用します。この方法には、次の問題があります。

  1. 東/西の領域が展開/折りたたまれても、ウィンドウの位置は変更されません。たとえば、幅が 200px の西の領域で、西の領域が折りたたまれており、ウィンドウが中央の領域の西端から 150px に配置されている場合、西の領域が展開され、中央の領域の西の端が 200px 移動しますが、ウィンドウは所定の位置にとどまり、拡張された西側の領域と重なります。ウィンドウを移動しようとすると、その設定により中央領域の西端にスナップバックしますがconstrainHeader: true、展開/折りたたみ時に再配置する必要があります。

  2. Z-Index 管理: ウィンドウはヘッダーによってのみ制約されるため、ウィンドウの本体は中央領域の南端の下にドラッグできます。理想的には、このように配置された場合、南地域の下に表示されるはずですが、上に表示されます。同様に、東または西の領域がフローティングされている (展開されていない) 場合、それらは重なり合うほど近くに配置されたウィンドウの上にも表示されます。ウィンドウは中央領域の子として追加されているように見えますが、実際には中央領域の要素の DOM 子ではありません。したがって、それらの z インデックスは中央領域ではなく、ページ本体に対して相対的です。そのため、カスタム zseed でカスタム ZIndexManager を使用しても、開いているすべてのウィンドウの z-index が他の領域の z-index を下回ることを保証することはできません。

  3. ウィンドウを拡大して元のサイズに戻すと、元の位置は、西側領域の表示幅に等しい量だけ右に移動します。領域が折りたたまれている場合は、ヘッダーのみが表示されるため、わずかな量です。それ以外の場合は全幅。

ウィンドウを開く 2 番目の方法はrenderTo、中央領域の要素を値として設定オプションを使用することです。これにより、上記の問題 1) および 2) が解決されます。ウィンドウの要素が中央の領域の要素の実際の DOM 子であるため、東/西の領域が展開/折りたたまれたときにウィンドウが正しく再配置されます (したがって、それらの z インデックスは中心領域)、z-index 管理の問題はもはや問題ではありません。でも：

  1. Ext.AbstractComponent のドキュメントには、コンポーネントをコンテナの子コンポーネントとして追加するときに renderTo を使用しないように記載されています。これは、コンテナ レイアウト マネージャーが処理する必要があるためです。これはフローティング コンポーネントに関連していますか?

  2. 上記の 3) と同様の問題 - ウィンドウの最大化と復元は正常に行われますが、ウィンドウをドラッグ アンド ドロップすると同様の東方向への移動が発生し、より明白になります。ウィンドウをドロップすると、ウィンドウはドロップされた場所の右側にいくらか配置されます。その量は、西側領域の可視幅と同じ (またはそれに近い) です。西部地域が拡大されると、これは特に耳障りです。

これらの問題 (maximise-restore の問題を除く) はすべて、次の単純なアプリケーションで確認できます。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="ext-4.0.0/resources/css/ext-all.css">
        <script type="text/javascript" src="ext-4.0.0/ext-all-debug.js"></script>

        <script type="text/javascript">
            Ext.onReady(function() {

                var viewport = Ext.create('Ext.container.Viewport', {
                    renderTo: Ext.getBody(),
                    layout: 'border',
                    items: [{
                        region: 'west',
                        width: 200,
                        collapsible: true,
                        collapsed: true,
                        html: 'West Region'
                    }, {
                        region: 'center'
                    }, {
                        region: 'east',
                        width: 200,
                        collapsible: true,
                        collapsed: true,
                        html: 'East Region'
                    }, {
                        region: 'south',
                        height: 50,
                        html: 'South Region'
                    }]
                });

                var win = Ext.create('Ext.window.Window', {
                    //renderTo: viewport.layout.regions.center.getEl(), // using renderTo
                    width: 400,
                    height: 300,
                    title: 'Test',
                    constrainHeader: true
                });

                viewport.layout.regions.center.add(win); // using add()
                win.show()

            });
        </script>

    </head>
    <body>
    </body>
</html>

これらのアプローチのいずれかが他のアプローチよりも優れているか、リストされているすべての問題を克服するために適用できるか?

アップデート：

両方の方法を一緒に使用することは、おそらくもっと早く思いついたはずです。そうすることで、東/西の領域が展開/縮小されたときにウィンドウが正しく再配置され、z インデックスの問題がなく、最大化/復元時にウィンドウが正しく配置されないことを意味します。朗報です！ただし、ウィンドウはドラッグ アンド ドロップ時に正しく配置されません。これは、最も明白で厄介な問題です。なぜこれが起こっているのか、それを止める方法についてのアイデアはありますか (ドロップされたときに、ウィンドウの x 位置から西領域の幅を手動で差し引く以外)?

4

0 に答える 0