Проблема с раскладкой Vbox на панели вкладок

Question

У меня возникла проблема с макетом vbox, поэтому я создал простой пример , который иллюстрирует проблему, которая приводит к тому, что мой макет vbox подходит к «fit» высоте экрана. На экране hbox вид выглядит как .

Однако, когда я просто изменить «» на горизонтальный бокс «VBox», все текстовые пометки в верхнем левом углу.

Весь код приведен ниже, и это на Sencha Fiddle

app.js

 
Ext.Loader.setConfig({ enabled: true }); 

Ext.application({ 
    name: 'SenchaFiddle', 

    views: ['MainView', 'HboxView', 'VboxView'], 

    launch: function() { 
     Ext.Viewport.add(Ext.create('SenchaFiddle.view.MainView')); 

    } 
}); 

MainView.js

 
Ext.define("SenchaFiddle.view.MainView", { 
    extend: 'Ext.tab.Panel', 
    requires: [ 
     'Ext.TitleBar' 
    ], 
    config: { 
     tabBarPosition: 'bottom', 
     items: [ 
      { 
       title: 'hbox', 
       iconCls: 'action', 

       items: [ 
        { 
         docked: 'top', 
         xtype: 'titlebar', 
         title: 'Hbox' 
        }, 
        { 
         xtype: 'hbox-view' 
        } 
       ] 
      }, 
      { 
       title: 'vbox', 
       iconCls: 'action', 

       items: [ 
        { 
         docked: 'top', 
         xtype: 'titlebar', 
         title: 'Vbox' 
        }, 
        { 
         xtype: 'vbox-view' 
        } 
       ] 
      }, 
     ] 
    } 
}); 

HboxView.js

 
Ext.define("SenchaFiddle.view.HboxView", { 
    extend: 'Ext.Container', 
    xtype: 'hbox-view', 
    config: { 
     style: 'background-color: #0f0', 
     layout: 'hbox', 

     items: [ 
      { 
       xtype: 'panel', 
       html: 'baz', 
       style: 'background-color: #ff0', 
       flex: 1 
      }, 
      { 
       xtype: 'panel', 
       html: 'foo', 
       style: 'background-color: #f00', 
       flex: 2 
      }, 
      { 
       xtype: 'panel', 
       html: 'bar', 
       style: 'background-color: #fff', 
       flex: 3 
      } 
     ] 
    } 
}); 

VboxView.js

 
Ext.define("SenchaFiddle.view.VboxView", { 
    extend: 'Ext.Container', 
    xtype: 'vbox-view', 
    config: { 
     style: 'background-color: #0f0', 
     layout: 'vbox', 

     items: [ 
      { 
       xtype: 'panel', 
       html: 'baz', 
       style: 'background-color: #ff0', 
       flex: 1 
      }, 
      { 
       xtype: 'panel', 
       html: 'foo', 
       style: 'background-color: #f00', 
       flex: 2 
      }, 
      { 
       xtype: 'panel',     
       html: 'bar', 
       style: 'background-color: #fff', 
       flex: 3 
      } 
     ] 
    } 
}); 

Answer 1

Проблема заключается в структуре MainView.js. Ваш VBox обертка контейнер не имеет раскладку:

{ 
    title: 'vbox', 
    iconCls: 'action', 
    layout: card, // or fit, etc. :) 
    items: [ 
    { 
     docked: 'top', 
     xtype: 'titlebar', 
     title: 'Vbox' 
    }, 
    { 
     xtype: 'vbox-view' 
    } 
    ] 
}, 

Но это не очень хороший код. Лучше добавить заголовок окна и некоторые конфиги к VBoxView и HboxView определения:

Ext.define("SenchaFiddle.view.VboxView", { 
     extend: 'Ext.Container', 
     xtype: 'vbox-view', 
     config: { 
      style: 'background-color: #0f0', 
      layout: 'vbox', 
      title: 'Vbox', // this is better place for title and iconCls :) 
      iconCls: 'action', 
      items: [ 
       // title bar is here :) 
       { 
        type: 'titlebar', 
        docked: 'top', 
        title: 'Navigation', 
       }, 
       { 
        xtype: 'panel', 
        html: 'baz', 
        style: 'background-color: #ff0', 
        flex: 1 
       }, 
       { 
        xtype: 'panel', 
        html: 'foo', 
        style: 'background-color: #f00', 
        flex: 2 
       }, 
       { 
        xtype: 'panel',     
        html: 'bar', 
        style: 'background-color: #fff', 
        flex: 3 
       } 
      ] 
     } 
    }); 

И в MainView.js

Ext.define("SenchaFiddle.view.MainView", { 
    extend: 'Ext.tab.Panel', 
    // ...  
    config: { 
    tabBarPosition: 'bottom', 
    items: [ 
     {xtype: 'hbox-view'}, // very nice code :) 
     {xtype: 'vbox-view'}, 
    ] 
    } 
});