1

ページの中央に3つの要素を並べる必要があります。HBOXでは問題ありません。しかし、私の要素の幅は異なります。350幅の2つの要素と、1000幅の1つの要素です。これがサンプルです：

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

主な問題は、要素の水平方向の配置です。2番目の問題は、画面の解像度が小さく、パネルに大きなテキストがある場合、スクロールバーが表示されないことです。

わかりました、別の例：

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

まず、レイアウト定義をコンテナ内に移動します。ビューポートとは何の関係もありません。あなたのレイアウトのために2番目に私はあなたが使うべきだと思います

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

また、ExtJsが画像をレイアウトする方法に何かがあるかもしれないと思います-jsfiddleであなたの例を試したとき、画像はまだvboxでレイアウトされませんが、他のコンポーネント-（ボックスまたはボタン）はjsutをうまくレイアウトします

于 2012-06-04T13:03:46.180 に答える