【まとめ】Ext JSで困ったときに見るサイト等 ref: http://qiita.com/nikuyoshi/items/06d4a378ab5e1b10678c

file0.js

layout: {
    type: 'fit'
},
items:[{
    xtype: 'button',
    text: 'button1',
},{
    xtype: 'button', // ここにはFitレイアウトは適用されない
    text: 'button2',
}]

file1.js

layout: {
    type: 'fit'
},
items: [{
    xtype: 'panel',
    items: [{
        xtype: 'button',
        text: 'button' // ここにはFitレイアウトは適用されない
    }]
}]

一つだけ固定サイズで、その他のボタンを均等サイズにする

layout: {
    type: 'hbox',
    pack: 'end'
},
items: [{
    xtype: 'button',
    text: 'button1',
    width: 100
},{
    xtype: 'button',
    text: 'button2',
    flex: 1
}]

一番大きいアイテムの高さに合わせる

layout: {
    type: 'hbox',
    align: 'stretchmax'
},
items: [{
    xtype: 'button',
    text: 'button1',
    height: 20 // ボタン1の高さも100になる
},{
    xtype: 'button',
    text: 'button2',
    height: 100
}]

下寄せ

layout: {
    type: 'hbox',
    align: 'bottom'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'button',
    text: 'button2'
}]

右寄せの場合

layout:{
    type: 'hbox',
    pack: 'end'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'button',
    text: 'button2'
}]

均等サイズでボタンを2つ並べる

layout: {
    type: 'hbox',
    pack: 'end',
},
items: [{
    xtype: 'button',
    text: 'button1',
    flex: 1
},{
    xtype: 'button',
    text: 'button2',
    flex: 1
}]

左右の端にボタンを配置する

layout: {
    type: 'hbox',
    align: 'bottom'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'tbspacer',
    flex: 1
},{
    xtype: 'button',
    text: 'button2'
}]

親コンポーネントのサイズに合わせる

layout: {
    type: 'hbox',
    align: 'stretch'
},
items: [{
    xtype: 'button',
    text: 'button1'
},{
    xtype: 'button',
    text: 'button2'
}]