3

私のインターフェースでは、次の構造を使用しています。

xtype: 'container',
layout: {
    type: 'hbox',
    align: 'stretch'
},
items: [
{
    xtype: 'fieldset',
    flex: 2,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    margin: '0 5 0 0',
    padding: '10',
    items: [
        {
            xtype: 'container',
            flex: 1,
            layout: 'hbox',
            items: [
                {
                    xtype: 'combo',
                    flex: 1,
                    margin: '0 5 0 0',
                    name: 'deviceSelect',
                    ...
                },
                {
                    xtype: 'button',
                    ...
                },
                {
                    xtype: 'button',
                    ...
                }
            ]
        },
        {
            xtype: 'box',
            flex: 1,
            name: 'deviceMessage'
            ...
        }
    ]
},
{
    ...
},
{
    ...
}

コンボ「deviceSelect」は、2 つのボタンのサイズを除いてコンテナの全幅を取り、その下にテキストを配置する必要があります。現時点では、「deviceMessage」コンテナの上部に「固定」されたテキストを除いて、すべてが正常に機能しています。コンテナーの中央 (垂直) に配置するにはどうすればよいですか? style: 'vertical-align: middle;' を試しましたが、うまくいきません (おそらく ext add top: 24px のため)。

コードが最適ではないと思います。どんなコメントでも大歓迎です。

4

1 に答える 1

3

このようなもの: http://jsfiddle.net/laurenzonneveld/YLrzC/ ?

必要な部分は次のlayout部分です。

xtype: 'container',
name: 'deviceMessage',
layout: {
    // Centers your inner panel with the HTML
    type: 'vbox',
    align: 'center',
    pack: 'center'
},
//...
items: {
    xtype: 'container',
    html: 'sadfasdf<br>safasdfasf'
}
于 2013-11-05T14:08:48.367 に答える