Layout ExtJS, Orizzontalmente crescono verticalmente

Question

Ho un Ext.panel.Panel in cui voglio aggiungere dinamicamente altri pannelli "più piccoli" che rappresentano "cose" differenti nella mia applicazione. Questo pannello si trova nella parte superiore di una griglia ed ha la stessa larghezza della griglia. Quando un pannello "più piccolo" viene aggiunto dinamicamente a questo "pannello contenitore", voglio che i pannelli vengano aggiunti orizzontalmente e poi verticalmente se la larghezza totale di tutti i pannelli "piccoli" è maggiore della larghezza del contenitore.

Ho provato "adatto", "hbox", "vbox", tutto.

Mi manca un tipo di layout?

Answer 1

quello che cercate è generalmente noto come un layout flow, che ExtJS non ha fuori dalla scatola (se mi chiedete, è un po 'sciocco non lo fanno in quanto è un layout molto comune e in Infatti quello applicato alla maggior parte dei loro esempi di dataview, ma usando css piuttosto che un layout).

Ma è possibile ottenere facilmente utilizzando il layout di colonna senza columnWidth definito. Copia this answer:

Ext.create('Ext.Panel', { 
     width: 500, 
     height: 280, 
     title: "ColumnLayout Panel", 
     layout: 'column', 
     renderTo: document.body, 
     items: [{ 
      xtype: 'panel', 
      title: 'First Inner Panel', 
      width: 250, 
      height: 90 
     },{ 
      xtype: 'panel', 
      title: 'Second Inner Panel', 
      width: 200, 
      height: 90 
     }, { 
      xtype: 'panel', 
      title: 'Third Inner Panel', 
      width: 150, 
      height: 90 
     }] 
    }); 

Answer 2

ho trovato che quando si utilizza l'esempio precedente in ExtJS 4.2.2 i pannelli sono stati impilati verticalmente.

avevo bisogno di aggiungere:

style: { 
    float: 'left' 
}, 

ad ogni voce e poi tutto ha funzionato bene.

Ho eseguito il test con entrambe le configurazioni statiche (come nell'esempio precedente) e anche con l'aggiunta/rimozione dinamica (utilizzando un contenitore personalizzato per ogni articolo figlio). Il pannello del contenitore ripetuto ogni volta in modo simile al flusso. Correggere anche durante il ridimensionamento della finestra del browser: gli elementi secondari spostati per adattarsi alle nuove dimensioni del pannello.

Murray