Extjs: как подойти к концепции: добавить, удалить, добавить экземпляр - PullRequest
Новая
       12

Extjs: как подойти к концепции: добавить, удалить, добавить экземпляр

6 голосов
/ 31 марта 2011

Концепция : рассмотрите возможность использования двух панелей A и B и окна C, как в следующем примере.Кнопки в окне переключаются между двумя панелями. 

var A = new Ext.Panel({
    title: 'A'
});

var B = new Ext.Panel({
    title: 'B'
});

var C = new Ext.Window({
    layout: 'fit',
    width: 300,
    height: 300,
    items: A,
    buttons: [
    {
        text: 'Switch to A',
        handler: function() {
            C.removeAll(false);
            C.add(A);
            C.doLayout();
        }
    }, {
        text: 'Switch to B',
        handler: function() {
            C.removeAll(false);
            C.add(B);
            C.doLayout();
        }
    }]
});
C.show();

Концепция очень проста: добавьте компонент, удалите его и снова добавьте тот же экземпляр.

Проблема : Переключение с A на B работает, но возврат к A не работает (B остается и A снова не отображается).

Вопрос : Думаю, ООП, я ожидаювышеуказанная концепция для работы.Так как это не тот случай, и это очень простой маневр, как мне думать / созерцать / дизайн , когда я пытаюсь это сделать?

Я понимаю, что могут быть разные случаи при рассмотрении FormPanel в сравнении с другими макетами / компонентами - но должен быть общий и правильный способдля этого:)

Ответы [ 2 ]

3 голосов
/ 31 марта 2011

Возможно, макет card - это именно то, что вам нужно: 

var C = new Ext.Window({
    layout: 'card',
    width: 300,
    height: 300,
    activeItem: 0,
    items: [A, B],
    buttons: [{
        text: 'Switch to A',
        handler: function() {
            C.getLayout().setActiveItem(0);
        }
    }, {
        text: 'Switch to B',
        handler: function() {
            C.getLayout().setActiveItem(1);
        }
    }]
});
C.show();

Я предполагаю, что проблема с вашим кодом в том, что вы снова используете тот же экземпляр. Ext внутренне устанавливает флаг rendered для компонента после его записи в дерево DOM. Поскольку флаг rendered остается верным после удаления компонента из C, он не будет перерисован при повторном добавлении компонента.

Простая модификация заставит ваш код работать: добавьте A.rendered = false; и B.rendered = false соответственно перед вызовом C.doLayout() в обработчиках кнопок.

Но, тем не менее, подход макета карты будет наилучшей практикой.

0 голосов
/ 31 июля 2011

Я нашел простое решение, но это скорее взлом. После удаления компонента (вашей панели A или B) вы должны добавить его в другой контейнер, который должен отображаться. Вот пример, в котором панели перемещаются в скрытый контейнер: 

var A = new Ext.Panel({
    title: 'A'
});

var B = new Ext.Panel({
    title: 'B'
});

var C = new Ext.Window({
    layout: 'fit',
    width: 300,
    height: 300,
    items: A,
    buttons: [
    {
        text: 'Switch to A',
        handler: function() {
            C.remove(B, false);
            T.add(B);
            C.add(A);
            C.doLayout();
        }
    }, {
        text: 'Switch to B',
        handler: function() {
            C.remove(A, false);
            T.add(A);
            C.add(B);
            C.doLayout();
        }
    }]
});

var T = new Ext.Container({
    renderTo: "temporaryContainer",
    renderHidden: true
});

C.show();

И где-то в теле страницы вам нужно это: 

<div id="temporaryContainer" class="x-hidden"></div>

Протестировано с ExtJs 4.0.2a.

...