EXT JS to Layout en Viewport no muestra nada

Question

Después de leer muchos ejemplos sobre cómo agregar nuevos componentes al contenedor existente sin volver a cargar toda la página, me encuentro con un pequeño problema al combinar el árbol y las pestañas dentro del componente Viewport.

Lo que estoy tratando de hacer es registrar el evento de clic en el nodo del árbol y cargarlo en el nuevo componente del contenedor de contenido, dependiendo del tipo de nodo puede ser tabpanel, gridpanel o cualquier otro componente disponible.

aquí hay un breve ejemplo de objeto de árbol:

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

Toda la manipulación DOM fue bien, todo se registró correctamente, se muestra un nuevo Título, pero no se muestran dummy_tabs2. Intenté establecer varias propiedades para doLayout (verdadero | falso, verdadero | falso) pero no sucede nada.

¿Estoy haciendo algo mal?

Answer 1

Ahora lo entiendo, DOM funciona bien pero EXTJS aplica la propiedad oculta de la pantalla a los elementos recién insertados. Entonces, lo que queda por hacer es aplicar la función show () a nuestro nuevo componente. El siguiente código se vería así:

{
  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

Intente establecer el ancho y la altura de dummy_tabs2 antes de doLayout. Inspeccione con firebug, tal vez el panel está allí pero no puede verlo.

Lea Ext.Panel en la API .

  

Al especificar elementos secundarios de   un Panel, o agregando dinámicamente   Componentes de un panel, recuerde   considere cómo desea que el Panel   organizar esos elementos secundarios, y   si esos elementos secundarios necesitan   dimensionarse utilizando uno de los integrados de Ext   esquemas de diseño. Por defecto, los paneles usan   El esquema ContainerLayout. Esta   simplemente representa componentes secundarios,   anexándolos uno tras otro   dentro del contenedor, y no   aplicar cualquier tamaño en absoluto.

Espero que esto ayude.