Extjs4 でラベルの配置をいろいろ変更しよう！

こちらで紹介した物よりも良い感じになりましたので、再投稿です。
URL:http://blog.goo.ne.jp/pianyi/e/63ec1bcefa9bc41d4578c76531ecd02c

コレを応用すれば、ラベル以外の何でも中央揃え出来るはずです。
Extjsのバージョン：4.1.1a
他のバージョンでも使えるかどうかは知りません。

一部しか動作確認してません。(コピペで作りました)動かなかったら教えてね♪

まずは、ラベルを左上に配置！

Ext.create('Ext.container.Container', {
    layout: {
        align: 'stretch',   // この行は 'left' でもOK
        pack: 'start',
        type: 'vbox'
    },
    items: [
        Ext.create('Ext.form.Label', {
            text: 'My Label',
        })
    ]
});

ラベルを中央上に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'center',

        pack: 'start',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label'

        })

    ]

});

ラベルを右上に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',

        pack: 'start',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

            style: 'text-align:right;',

        })

    ]

});

ラベルを左中央に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',   // この行は 'left' でもOK

        pack: 'center',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});

ラベルを中央中央に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'center',

        pack: 'center',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});

ラベルを右中央に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',

        pack: 'center',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

            style: 'text-align:right;',

        })

    ]

});

ラベルを左下に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',   // この行は 'left' でもOK

        pack: 'end',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});

ラベルを中央下に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'center',

        pack: 'end',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});

ラベルを右下に配置！

Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',

        pack: 'end',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

            style: 'text-align:right;',

        })

    ]

});

要するに、vbox のレイアウトを使って、align(横)とpack(縦)の位置を決定します。
そして、「align: 'stretch' は style:'display:block;' と同じになります」
したがって、"親パネルの横幅いっぱいにする"と解釈できます。
なので、「style: 'text-align:right;'」だけで、右寄せが出来ます。
逆に言うと、「align: 'stretch'」意外にすると、右寄せは出来ません。


ちなみに、「Ext.container.Container」は「Ext.panel.Panel」でも良いし、
xtype を使っても出来ます。(僕がExt.createが好きなだけです)


コレで無駄なマージンやパディングをしなくてすむし、高さや幅を変更しても自動追尾♪