EXT JS in Layout su Viewport non mostra nulla

Question

Dopo aver letto molti esempi sull'aggiunta di nuovi componenti al contenitore esistente senza ricaricare l'intera pagina, ho riscontrato un piccolo problema durante la combinazione di albero e schede all'interno del componente Viewport.

Quello che sto cercando di fare è registrare l'evento click sul nodo dell'albero e caricarlo nel nuovo componente del contenitore di contenuti, a seconda del tipo di nodo che può essere tabpanel, gridpanel o qualsiasi altro componente disponibile.

ecco un breve esempio di oggetto ad albero:

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

Tutta la manipolazione del DOM è andata bene, tutto è stato registrato correttamente, il nuovo titolo è stato mostrato, ma dummy_tabs2 non è mostrato. Ho provato a impostare varie proprietà per doLayout (true | false, true | false) ma non succede nulla.

Sto facendo qualcosa di sbagliato?

Answer 1

Ora capisco, DOM funziona bene ma EXTJS applica la proprietà nascosta di visualizzazione agli elementi appena inseriti. Quindi ciò che resta da fare è applicare la funzione show () al nostro nuovo componente. Il seguente codice sarebbe simile a questo:

{
  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

Prova a impostare la larghezza e l'altezza di dummy_tabs2 prima di doLayout. Ispeziona con firebug, forse il pannello è lì ma non riesci a vedere.

Leggi Ext.Panel nella API .

  

Quando si specificano gli elementi figlio di   un pannello, o aggiungendo dinamicamente   Componenti di un pannello, ricordati di   considera come desideri il Pannello   organizzare quegli elementi figlio e   se questi elementi figlio devono   essere dimensionato utilizzando uno degli Ext integrati   schemi di layout. Per impostazione predefinita, i pannelli utilizzano   lo schema ContainerLayout. Questo   esegue semplicemente il rendering dei componenti figlio,   aggiungendoli uno dopo l'altro   all'interno del contenitore e non lo fa   applicare qualsiasi dimensionamento.

Spero che questo possa aiutare.