ExtJS Layout, горизонтально растут вертикально

Question

У меня есть Ext.panel.Panel, в которую я хочу динамически добавлять другие «меньшие» панели, представляющие разные «вещи» в моем приложении. Эта панель находится в верхней части сетки и имеет ту же ширину, что и сетка. Когда «меньшая» панель динамически добавляется к этой «панели контейнера», я хочу, чтобы панели добавлялись горизонтально, а затем вертикально, если общая ширина всех «маленьких» панелей больше ширины контейнера.

Я пробовал «подгонку», «hbox», «vbox», все.

Я пропустил тип макета?

Answer 1

Что вам нужно, как правило, известно как макет flow, который ExtJS не имеет из коробки (если вы спросите меня, это немного глупо, они не так, как это очень распространенный макет и в факт тот, который применяется на большинстве своих примеров dataview, но использует css, а не макет).

Но это может быть легко достигнуто с использованием расположения столбцов без columnWidth. Копирование 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

Я обнаружил, что при использовании в качестве примера выше в ExtJS 4.2.2 панели были уложены вертикально.

мне нужно добавить:

style: { 
    float: 'left' 
}, 

к каждому пункту, а затем все работало хорошо.

Я тестировал как статическую конфигурацию (как в примере выше), так и с динамическим добавлением/удалением (используя пользовательский контейнер для каждого дочернего элемента). Контейнерная панель повторно обрабатывается поточно-подобным образом каждый раз. Также правильны при изменении размера окна браузера - перемещение дочерних элементов для размещения нового размера панели.

Мюррей