EXT JS в Layout на Viewport ничего не показывает

Question

Прочитав много примеров добавления новых компонентов в существующий контейнер без перезагрузки всей страницы, я столкнулся с небольшой проблемой, комбинируя дерево и вкладки внутри компонента Viewport.

Я пытаюсь зарегистрировать событие click для узла дерева и загрузить в новый компонент содержимого контейнера, в зависимости от типа узла это может быть tabpanel, gridpanel или любой другой доступный компонент.

вот краткий пример объекта дерева:

{
    xtype: 'treepanel',
    id: 'tree-panel',
    listeners: {
        click: function(n) {

            var content = Ext.getCmp('content-panel');

            content.setTitle(n.attributes.qtip);

            //remove all components from content-panel
            content.removeAll();

            content.add(dummy_tabs2);

            content.doLayout();

            return;
        }
    }
}

Все манипуляции с DOM прошли нормально, все зарегистрировано правильно, новый заголовок показан, но dummy_tabs2 не показаны. Я пытался установить различные свойства для doLayout (true | false, true | false), но ничего не происходит.

Я что-то не так делаю?

Answer 1

Теперь я понял, DOM работает нормально, но EXTJS применяет скрытое свойство display к вновь вставленным элементам. Поэтому осталось применить функцию show () к нашему новому компоненту. Следующий код будет выглядеть так:

{
  xtype: 'treepanel',
  id: 'tree-panel',
  listeners: {
    click: function(n) {

    var content = Ext.getCmp('content-panel');

    content.setTitle(n.attributes.qtip);

    //remove all components from content-panel
    content.removeAll();

    var container = content.add(dummy_tabs2);

    content.doLayout();

    container.show();

    return;
    }
}}

Answer 2

Попробуйте установить ширину и высоту dummy_tabs2 перед doLayout. Осмотрите с помощью firebug, возможно, панель есть, но вы не можете видеть.

Прочитайте Ext.Panel в API .

  

При указании дочерних элементов   Панель или динамическое добавление   Компоненты панели, не забудьте   подумайте, как вы хотите, чтобы Группа   расположить эти дочерние элементы и   нужны ли эти дочерние элементы   быть измерен, используя один из встроенных Ext   схемы расположения. По умолчанию панели используют   схема ContainerLayout. это   просто рендерит дочерние компоненты,   добавляя их один за другим   внутри контейнера, и не   применять любые размеры вообще.

Надеюсь, это поможет.