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..

컴포넌트를 수평으로 나열하기hbox 사용 { region: 'north', height: 50, layout: 'hbox', items: [ { width: 200, bodyStyle: 'background-color:black', html: '  Home' }, { bodyStyle: 'background-color:black', html: '  Home' }, ] },화면을 반응형으로 구성flex 사용 { region: 'north', height: 50, layout: 'h..