выравнивание элементов в макете HBOX extjs 4

Question

Мне нужно поставить 3 элемента друг под друга в центре страницы. Это не проблема с HBOX. Но мои элементы имеют разную ширину: два элемента с шириной 350 и одним элементом с шириной 1000. вот пример:

Ext.create('Ext.Viewport', { 
      layout: { 
       type: "hbox", 
       pack: "center", 
       align: "middle" 
      }, 
      items: { 
       xtype: 'container', 
       items:[{ 
        xtype: 'image', 
        height: 350, 
        width: 350, 
        src: '/images/logo.jpg' 
       },{ 
        xtype: 'image', 
        height: 350, 
        width: 350, 
        src: '/images/logo2.jpg' 
       },{ 
        xtype: 'panel', 
        width: 1000, 
        margin: '0px 0px 0px -325px', 
        frame: true, 
        autoscroll: true, 
        title: 'panel title', 
        html: 'some panel with some rows with<br /> some text' 
       }] 
      }, 
      renderTo: Ext.getBody() 
    }); 

Основная проблема - горизонтальное выравнивание элементов. Вторая проблема: нет полосы прокрутки, если разрешение экрана мало, и у меня большой текст в панели.

Хорошо, еще один пример:

Ext.create('Ext.Viewport', { 
       layout: { 
        type: "hbox", 
        pack: "center", 
        align: "middle" 
       }, 
       items: { 
        xtype: 'container', 
        items:[{ 
         xtype: 'form', 
         width: 350, 
         title: 'Form Panel', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name' 
         }] 
        },{ 
         xtype: 'panel', 
         width: 1000, 
         frame: true, 
         autoscroll: true, 
         title: 'panel title', 
         html: 'some panel with some rows with<br /> some text' 
        }] 
       }, 
       renderTo: Ext.getBody() 
}); 

Эта панель будет точно в середине экрана, но форма не будет. P.S. Я попытался переместить макет в контейнер - он не работает

Answer 1

Ext.create('Ext.Viewport', { 
    layout : 'fit', 
    autoScroll : true, 
    items: { 
     xtype: 'container', 
     autoScroll : true, 
     minHeight : 1000, 
     layout: { 
      type: "vbox", 
      pack: "center", 
      align: "center" 
     }, 
     items:[{ 
      xtype: 'image', 
      height: 350, 
      width: 350, 
      src: '/images/logo.jpg' 
     },{ 
      xtype: 'image', 
      height: 350, 
      width: 350, 
      src: '/images/logo.jpg' 
     },{ 
      xtype: 'panel', 
      width: 1000, 
      margin: '0px 0px 0px -325px', 
      frame: true, 
      title: 'panel title', 
      html: 'some panel with some rows with<br /> some text' 
     }] 
    }, 
    renderTo: Ext.getBody() 
}); 

Я думаю, что, может быть, вы должны определить minHeight к контейнеру, и включают в себя расположение 'fit' к контейнеру, чтобы получить панель автопрокрутки.

А также включить макет vbox в пункты консьержа.

Answer 2

Прежде всего переместите определение макета внутри контейнера. Он не имеет ничего общего с видовым окном. Во-вторых для макета Я думаю, вы должны использовать

type: 'vbox', 
align: 'center', 
pack: 'center', 

Я также думаю, что там может быть что-то с тем, как ExtJs макеты изображений - потому что, когда я попробовал ваш пример jsfiddle - изображения еще не макет в VBox, но и другие компоненты - (коробка или кнопка) будет макет штраф этого нужно просто