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

此面板将完全位于屏幕中间，但表单不会。附：我试图将布局移动到容器 - 它不起作用

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布局包含在contianer'项目中。

Answer 2

首先将您的布局定义移到容器中。它与视口无关。对于你的布局，我认为你应该使用

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

我还认为ExtJs布局图像的方式可能有些 - 因为当我在jsfiddle中尝试你的例子时 - 图像仍然不会在vbox中布局，但是其他组件 - （框或按钮）会布局jsut很好

HBOX布局中的元素对齐extjs 4

2 个答案: