ExtJS 4 Высота растяжки сетки до родительского компонента

Question

Я пытаюсь растянуть высоту xtype: 'grid1' до его родительского элемента (вкладка на вкладке).

Вот мой код:

Ext.define('My.view.Example', { 
    extend: 'Ext.tab.Panel', 
    region: 'center', 
    id: 'objectsManageArea', 
    items: [{ 
     title: "Tab 1", 
     items: [ 
      { 
       border: false, 
       items: [ 
        { 
         xtype: 'panel', 
         layout: { 
          type: 'vbox', 
          align: 'stretch' 
         }, 
         border: false, 
         items: [ 
          { 
           xtype: 'grid1', 
           flex: 1 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    }, 
    { 
     title: "Tab 2", 
     items: [ 
      { 
       xtype: 'panel', 
       layout: { 
        type: 'hbox', 
        align: 'stretch' 
       }, 
       border: false, 
       items: [ 
        { 
         xtype: 'panel', 
         layout: { 
          type: 'vbox', 
          align: 'stretch' 
         }, 
         flex: 1, 
         border: false, 
         items: [ 
          { 
           xtype: 'grid2', 
           flex: 1 
          } 
         ] 
        }, 
        { 
         xtype: 'panel', 
         layout: { 
          type: 'vbox', 
          align: 'stretch', 
          pack: 'center' 
         }, 
         items: [ 
          { 
           xtype: 'button', 
           iconCls: 'icon-greater-than', 
           margin: '0 5 5 5' 
          }, 
          { 
           xtype: 'button', 
           iconCls: 'icon-less-than', 
           margin: '0 5 0 5' 
          } 
         ] 
        }, 
        { 
         xtype: 'panel', 
         layout: { 
          type: 'vbox', 
          align: 'stretch' 
         }, 
         flex: 1, 
         border: false, 
         items: [ 
          { 
           xtype: 'treegrid1', 
           flex: 1 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    }] 
}); 

На закладке «2» (с сеткой, панель с двумя кнопками и TreeGrid) все в порядке, но на «Tab» 1 вложенный xtype: 'grid1' устанавливается на высоте его содержание. Я пробовал различные версии с vbox, но ничего не работает. В чем может быть проблема?

Answer 1

Вы хотите layout: 'fit'. От docs: Это базовый класс для макетов, содержащих один элемент, который автоматически расширяется, чтобы заполнить контейнер макета.

Однако я бы рекомендовал, чтобы вы старались избегать чрезмерно гнездящихся компонентов. В вашей конфигурации Tab 1 сетка может быть самой вкладкой и автоматически заполняет все пространство в этом случае. Вы можете сделать то же самое с деревом в вкладке 2.

См. JsFiddle here. Вкладка 1 представляет собой только сетку в качестве самой вкладки. Вкладка 2 представляет собой обычную панель с layout: 'fit' с сеткой, поскольку это отдельный элемент.