Sencha layout item들이 수평으로 꽉차게 보이도록 처리

수평으로 item들이 보이도록 하려면, hbox 사용
stretch를 사용해서 높이가 꽉차하게 함
flex를 사용해서 넓이를 꽉차게 함

Ext.onReady(function () {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Panel with Items Stretching Horizontally',
        width: 600,
        height: 300,
        layout: {
            type: 'hbox', // Horizontal Box Layout
            align: 'stretch', // Stretch items to fill container height
        },
        items: [
            {
                xtype: 'panel',
                title: 'Item 1',
                flex: 1, // Fills 1 part of available width
                html: 'This item stretches horizontally.',
            },
            {
                xtype: 'panel',
                title: 'Item 2',
                flex: 2, // Fills 2 parts of available width
                html: 'This item stretches more.',
            },
            {
                xtype: 'panel',
                title: 'Item 3',
                flex: 1, // Fills 1 part of available width
                html: 'This item also stretches.',
            },
        ],
    });
});