ExtJS 4 контейнер с вертикальным расположением

Question

У меня есть два вложенных контейнера, и я хочу установить вертикально (только вертикально) первый контейнер на размер страницы, а второй - на первый размер контейнера.

В случае изменения размера страницы все контейнеры должны автоматически изменяться.

Я не могу выполнить эту функцию. Я думаю, что это проблема макета.

Это мой пример кода, и мой jsfiddle:

Ext.onReady(function() { 
myPanel = Ext.create('Ext.container.Container', { 
    layout:'fit', 
    flex:1, 
    width:100, 
    renderTo: Ext.getBody(), 
    items: [{ 
     xtype:'container', 
     layout : { 
       type : 'vbox', 
       align : 'stretch' 

      }, 
     items:[ 
    { 
        //this is the right panel not collapsible 
        xtype : 'panel', 
        border:true, 
        //hidden:false, 
        bodyBorder:true, 
        padding: '5 5 5 5', 

        itemId:'right', 

        //default layout of inner element is hbox 
        layout : { 
         type : 'hbox', 
         //align : 'stretch' 

        }, 

        //takes all possible space 
        flex : 1 
       }]} 


    ] 
}); 
}); 

http://jsfiddle.net/eternasparta/yxeSG/

спасибо всем!

Answer 1

Просмотреть порт - это ключевой элемент, который контролирует размер браузера. http://jsfiddle.net/dbrin/6r7Dd/

var myPanel = Ext.create('Ext.panel.Panel', { 
    layout: 'fit', 
    width: 200, 
    title: 'Panel 1', 
    items: [{ 
     xtype: 'panel', 
     title: 'Panel 2', 
     layout: 'fit', 
     items: [{ 
      xtype: 'panel', 
      title: 'Right P', 
      padding: '5' 
     }] 
    }] 
}); 

Ext.create('Ext.container.Viewport', { 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    items: [myPanel] 
});