ExtJS 4: Windows в контейнере - PullRequest
Новая
       3

ExtJS 4: Windows в контейнере

1 голос
/ 16 мая 2011

У меня есть приложение, которое открывает окна в центральной области области просмотра (с макетом границы), которая также имеет восточную, западную и южную области.Насколько я могу судить, есть два способа открыть эти окна, и у обоих есть предостережения.

Первый - использовать .add(), чтобы добавить компонент окна в свой контейнер (центральную область).Этот метод страдает от следующих проблем:

  1. Окна не перемещаются, так как восточные / западные области расширены / свернуты.Например, для западной области шириной 200px, если западная область свернута и окно расположено в 150px от западного края центральной области, то западная область расширяется, западный край центральной области будет перемещаться на 200px, ноокно останется на месте, перекрывая расширенный западный регион.Если будет предпринята какая-либо попытка переместить окно, оно будет привязано к западному краю центральной области из-за настройки constrainHeader: true, но оно должно переместиться при развертывании / сворачивании.

  2. Управление Z-индексами: окно ограничено только его заголовком, поэтому его можно перемещать ниже южного края центральной области.В идеале, при таком расположении он должен располагаться ниже южного региона, но появляется выше.Аналогичным образом, если восточные или западные регионы плавают (не расширяются), они также должны появляться над любыми окнами, расположенными достаточно близко, чтобы перекрываться.Может показаться, что хотя окна добавляются как дочерние элементы центральной области, они на самом деле не являются дочерними элементами DOM элемента центральной области, поэтому их z-индексы относятся не к центральной области, а к телу страницы.Поэтому, даже используя собственный ZIndexManager с пользовательским zseed, невозможно гарантировать, что z-индекс всех открытых окон останется ниже, чем у других регионов.

  3. Когда окноразвернут и восстановлен до первоначального размера, его исходное положение смещено вправо на величину, равную видимой ширине западной области - небольшая величина, если область свернута, так как виден только заголовок, в противном случае полнаяwidth.

Второй способ открывать окна - использовать параметр конфигурации renderTo, в качестве элемента которого используется центральная область.Это решает проблемы 1) и 2) выше - окна корректно перемещаются, когда восточные / западные области расширены / свернуты и, поскольку элементы окна являются фактическими дочерними элементами DOM элемента центральной области (и, следовательно, их z-индексы относительноцентральный регион), вопросы управления z-index больше не являются проблемами.Однако:

  1. В документации Ext.AbstractComponent говорится, что не следует использовать renderTo при добавлении компонента в качестве дочернего компонента некоторого контейнера, так как менеджер макета контейнеров должен его обрабатывать.Относится ли это к плавающим компонентам?

  2. Проблема, аналогичная 3) выше - окна максимизируются и восстанавливаются просто отлично, но аналогичная миграция на восток происходит при перетаскивании окна иэто намного более очевидно.Всякий раз, когда вы опускаете окно, оно располагается на некоторое количество справа от того места, где оно было опущено, при этом количество равно (или близко) видимой ширине западной области.Когда западный регион расширяется, это особенно раздражает.

Все эти проблемы (кроме проблемы максимального увеличения-восстановления) можно увидеть в этом простом приложении: 

<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-индексом нет, и окна не позиционируются неправильно при максимизации / восстановлении.Хорошие новости!ОДНАКО, окна по-прежнему не позиционируются правильно при перетаскивании, и это легко самая очевидная и раздражающая проблема.Любые идеи о том, почему это происходит и как это остановить (если не считать ручного вычитания ширины западного региона из положения окна х при его падении)?

...