ExtJS Layout, Horizonally następnie rosną pionowo

Question

Mam Ext.panel.Panel, do którego chcę dynamicznie dodać inne "mniejsze" panele reprezentujące różne "rzeczy" w mojej aplikacji. Ten panel znajduje się na górze siatki i ma taką samą szerokość jak siatka. Kiedy "mniejszy" panel jest dynamicznie dodawany do tego "panelu kontenera", chcę, aby panele były dodawane poziomo, a następnie pionowo, jeżeli całkowita szerokość wszystkich "małych" paneli jest większa niż szerokość kontenera.

Próbowałem "dopasować", "hbox", "vbox", wszystko.

Czy brakuje mi typu układu?

Answer 1

To, o co prosisz, jest ogólnie znane jako układ flow, który ExtJS nie ma po wyjęciu z pudełka (jeśli mnie pytasz, jest to trochę głupie, ponieważ nie jest to bardzo powszechny układ i fakt, który zastosowano na większości ich przykładów danych, ale raczej za pomocą css niż układu).

Ale można to łatwo osiągnąć za pomocą układu kolumn bez zdefiniowanej wartości columnWidth. Kopiowanie 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

I stwierdzono, że stosując powyższy przykład w ExtJS 4.2.2 Płyty ułożono w pozycji pionowej.

Musiałem dodać:

style: { 
    float: 'left' 
}, 

do każdego elementu, a następnie wszystko działa dobrze.

Przetestowałem zarówno z konfiguracją statyczną (jak powyższy przykład), jak iz dynamicznym dodawaniem/usuwaniem (przy użyciu niestandardowego kontenera dla każdego elementu potomnego). Panel kontenera jest ponownie renderowany za każdym razem w sposób przypominający przepływ. Popraw również przy zmianie rozmiaru okna przeglądarki - elementy potomne zostały przeniesione w celu dostosowania do nowego rozmiaru panelu.

Murray