elements alignment in HBOX layout extjs 4

Question

I need to put 3 elements under each other in the center of page. It is not a problem with HBOX. But my elements have different width: two elements with 350 width and one element with 1000 width. here is the sample:

    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()
    });

The main problem is horisontal alignment of elements. The second problem is: no scrollbar if the resolution of the screen is small and I have big text in panel.

Ok, another example:

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()
});

This panel will be exactly in the middle of screen, but the form will not. P.S. I've tried to move layout to the container - it doesn't work

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()
});

I think that maybe you should define a minHeight to the container, and include the layout 'fit' to the container in order to get the autoscroll panel.

And include the vbox layout to the contianer' items.

Answer 2

First of all move your layout definition inside container. It has nothing to do with viewport. Second for your layout I think you should use

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

I also think there might be something with the way ExtJs layouts images - because when I tried your example in jsfiddle - images still won't layout in vbox, but other components - (box or button) would layout jsut fine