{ xtype: 'container', layout: { type: 'hbox', // Horizontal layout pack: 'end', // Aligns child items to the right }, items: [ { xtype: 'button', text: 'Button 1' }, { xtype: 'button', text: 'Button 2' }, ],}

panel의 중간에 보이도록 처리Ext.create('Ext.panel.Panel', { title: 'Vertical Alignment Example', width: 400, height: 300, layout: { type: 'vbox', // Vertical box layout align: 'center', // Center items horizontally pack: 'center' // Center items vertically }, items: [ { xtype: 'component', html: 'This is vertically centered!' } ..

수평으로 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 heig..