Extjs4 でラジオボタンを横に配置しよう！(ついでに中央揃えも…)

ボタンを横に配置したりするのにも使えると思います。
今回は、HTMLに対し、renderTo を使用していますが、使わなくても考え方は一緒です。


HTMLはこんな感じ：

＜table style="margin-left:auto;margin-right:auto;" border="0"＞
    ＜tr＞
        ＜td style="text-align:right;"＞
            あいうえお
        ＜/td＞
        ＜td style="text-align:left;"＞
            かきくけこ
        ＜/td＞
    ＜/tr＞
    ＜tr＞＜td＞＜!-- ダミー行 --＞　＜/td＞＜/tr＞
    ＜tr＞
        ＜td colspan="2" style="text-align:center;"＞
            ＜span id="button1"＞＜/span＞
            ＜span id="button2"＞＜/span＞
        ＜/td＞
    ＜/tr＞
    ＜tr＞＜td＞＜!-- ダミー行 --＞　＜/td＞＜/tr＞
    ＜tr＞
        ＜td colspan="2"＞
            ＜!-- ラジオボタンで変更 --＞
            ＜span id="aiueo"＞＜/span＞
        ＜/td＞
    ＜/tr＞
＜/table＞

ExtJSはこんな感じ：

// ボタン1

Ext.create('Ext.button.Button',{

    renderTo: 'button1',

    text: 'ボタン１',

    name: 'button1'

});



// ボタン2

Ext.create('Ext.button.Button',{

    renderTo: 'button2',

    text: 'ボタン2',

    name: 'button2'

});



// 1個目のラジオボタン

var test1 = Ext.create('Ext.form.field.Radio',{

    boxLabel: 'ラジオボタン1',

    name: 'Test',

    inputValue: 'Test1',

    checked: true

})

var separator = Ext.create('Ext.form.Label',{

    text: '　'

});

// 2個目のラジオボタン

var test2 = Ext.create('Ext.form.field.Radio',{

    boxLabel: 'ラジオボタン2',

    name: 'Test',

    inputValue: 'Test2',

    checked: false

})



// ラジオボタン

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

    renderTo: 'aiueo',

    layout: {

        pack: 'center',

        type: 'hbox'

    },

    items:[test1, separator, test2]

});

ボタンはHTMLを使って無難に横に並べてますが、ラジオボタンはボタンと同じ方法では出来ません。
なぜなら、ボタンはDIVタグとCSSで作られますが、ラジオボタンはテーブルとinputタグで作成されます。
その為、横に並べたり中央揃えにする方法が違うんですね。

ただし、ラジオボタンのやり方をボタンに適応すればボタンも中央揃えに出来ます。
(items:[test1, separator, test2] の部分をボタンオブジェクトに変更して見てください)


で、ラジオボタンの肝はやっぱり「layout:{pack: 'center',type: 'hbox'}」の部分ですね。
「type: 'hbox'」でitems の中身を横に並べてます。
「pack: 'center'」 で中身を中央揃えにしてます。

また、「Ext.create('Ext.container.Container'」を使ってます。
コレは背景色を透過させる為です。
「Ext.create('Ext.panel.Panel'」に変更すれば、背景色が設定されます。




注意：
・直接編集したので動かない可能性があります。その場合は教えてください♪
・HTMLの ＜＞ は半角にしてね♪
・動かしていると、たまに中央揃えしないことがありました。初期起動やキャッシュを消した後にありました。
renderTo を初めて使ったけどそのせいなのかなぁ？？？