Могу ли я разделить области extjs на субрегионы?

Question

настоящее время у меня это:

Ext.applyIf(me, { 
     items: [ 
      { 
       xtype: 'HeaderPanel', 
       region: 'north' 
      }, 
      { 
       xtype: 'MainMenuPanel', 
       flex: 1, 
       region: 'west', 
       split: false 
      }, 
      { 
       xtype: 'AccordionTreePanel', 
       flex: 1, 
       region: 'west', 
       split: false 
      }, 
      { 
       xtype: 'ContentTabPanel', 
       flex: 3, 
       region: 'center' 
      } 
     ] 
    }); 

Я хотел бы, чтобы «HeaderPanel», чтобы разделить на подобласти. Нечто похожее на это:

{ 
    xtype: 'HeaderPanel', 
    region: 'north', 
    items: [ 
      { 
       xtype: 'LeftHeaderPanel', 
       region: 'west' 
      }, 
      { 
       xtype: 'RightHeaderPanel', 
       region: 'center', 
      }, 
    ] 
}, 

Что-то я могу здесь сделать? Или мне нужно настроить мой макет, используя что-то другое?

Спасибо.

Answer 1

Вы на правильном пути. Вам нужно всего лишь установить layout:'border' во второй кусок кода после region:'north', и он должен работать.

Это макет границы, вложенной в рамки границы на самом деле. Однако вы должны подумать, действительно ли вам нужна вся функциональность макета границы во внутреннем северном регионе. Возможно, вы можете пойти с лихтером hbox.

Answer 2

Используя ваши примеры и комментарий Саки, вы должны иметь что-то вроде следующего. Мы предполагаем, что типы x, которые вы использовали в вашем примере кода, определены вами. В противном случае вы получите ошибки.

Ext.applyIf(me, { 
    items: [ 
     { 
      xtype: 'HeaderPanel', //xtype: 'container' 
      region: 'north', 
      layout: 'border', 
      flex: 1, //or height: 150, 
      items: [ 
       { 
        xtype: 'LeftHeaderPanel', 
        region: 'west', 
        flex: 1, // or width: 200 
       }, 
       { 
        xtype: 'RightHeaderPanel', 
        region: 'center' 
       } 
      ] 
     }, 
     { 
      xtype: 'MainMenuPanel', 
      flex: 1, 
      region: 'west', 
      width: 125, 
      split: false 
     }, 
     { 
      xtype: 'AccordionTreePanel', 
      flex: 1, 
      region: 'west', 
      split: false 
     }, 
     { 
      xtype: 'ContentTabPanel', 
      flex: 3, 
      region: 'center' 
     } 
    ] 
}); 

Редактировать: Удалены подвешенные запятые из примера.