1

我需要在页面中心放置 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()
});

该面板将恰好位于屏幕中间，但表单不会。PS我试图将布局移动到容器 - 它不起作用

4

2 回答 2

2 
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 的项目中。

于 2014-03-10T15:05:10.633 回答
0

首先将您的布局定义移动到容器内。它与视口无关。第二个是你的布局，我认为你应该使用

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

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

于 2012-06-04T13:03:46.180 回答