EXT JS à Layout on Viewport ne montre rien

Question

Après avoir lu de nombreux exemples sur l'ajout de nouveaux composants dans un conteneur existant sans recharger toute la page, je rencontre un petit problème lorsque je combine une arborescence et des onglets dans le composant Viewport.

Ce que j'essaie de faire, c'est d'enregistrer un événement click sur un nœud d'arborescence et de charger dans le nouveau composant du conteneur de contenu. Selon le type de nœud, il peut s'agir d'un panneau, d'un panneau ou d'un autre composant disponible.

voici un court exemple d'objet d'arborescence:

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

Toutes les manipulations du DOM se sont bien déroulées, tout a été enregistré correctement, le nouveau titre affiché, mais dummy_tabs2 ne sont pas affichés. J'ai essayé de définir diverses propriétés pour doLayout (true | false, true | false) mais rien ne se produit.

Est-ce que je fais quelque chose de mal?

Answer 1

Maintenant, je comprends, DOM fonctionne bien mais EXTJS applique la propriété display hidden aux éléments récemment insérés. Il ne reste donc qu’à appliquer la fonction show () à notre nouveau composant. Le code suivant ressemblerait à ceci:

{
  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

Essayez de définir la largeur et la hauteur de dummy_tabs2 avant doLayout. Inspectez avec firebug, le panneau est peut-être là mais vous ne pouvez pas le voir.

Lisez le Ext.Panel dans la API .

  

Lorsque vous spécifiez des éléments enfants de   un panneau, ou ajouter dynamiquement   Composants d'un panneau, n'oubliez pas de   examinez comment vous souhaitez que le groupe   organiser ces éléments enfants, et   si ces éléments enfants doivent   être dimensionné en utilisant l'un des éléments intégrés d'Ext   schémas de disposition. Par défaut, les panneaux utilisent   le schéma ContainerLayout. Ce   rend simplement les composants enfants,   les annexer les uns après les autres   à l'intérieur du conteneur, et ne   appliquer une taille quelconque.

J'espère que cela vous aidera.