não EXT JS para Layout na Viewport não mostra nada

Question

Depois de ler muitos exemplo sobre como adicionar novos componentes no contêiner existente sem recarregar a página inteira eu corro no pequeno problema, combinando árvore e guias dentro componente Viewport.

O que eu estou tentando fazer é se registrar no evento clique para o nó de árvore e de carga no componente novo recipiente de conteúdo, dependendo do tipo de nó que pode ser TabPanel, GridPanel ou qualquer outro componente disponível.

aqui é curto exemplo de objeto da árvore:

{
    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;
        }
    }
}

Manipulation Todos os DOM correu bem, tudo registrado corretamente, novo título mostrado, mas dummy_tabs2 não são mostradas. Eu tentei definir várias propriedades para doLayout. (True | false, true | false), mas nada acontece

Estou fazendo algo errado?

Answer 1

Agora eu entendi, DOM funciona bem, mas EXTJS aplicando exibição da propriedade oculta para elementos recém-inseridos. Então o que resta a fazer é aplicar a função show () ao nosso novo componente. Folowing código ficaria assim:

{
  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

Tente definir a largura e altura de dummy_tabs2 antes doLayout. Inspecione com o Firebug, talvez o painel está lá, mas você não pode ver.

Leia Ext.Panel no API .

Quando qualquer especificando itens filhos de um painel, ou adicionar dinamicamente Componentes a um painel, lembre-se considerar como você deseja que o Painel organizar esses elementos filhos, e se esses elementos filhos precisam ser dimensionados usando um dos Ext do built-in esquemas de layout. Por padrão, Painéis usar o esquema ContainerLayout. este simplesmente torna componentes filhos, anexando-los um após o outro no interior do recipiente, e não aplicar qualquer dimensionamento de todo.

Esperamos que isto ajude.