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!' } ..

Ext.application({ name: 'ImageApp', launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Image Display', html: '' } ] }); }});

{ xtype: 'panel', width: leftWidth, bodyStyle: 'background-color:black', html: '  Home', listeners: { click: { element: 'el', fn: function() { window.location.reload(); } } }},

{ xtype: 'panel', bodyStyle: 'background-color:black', listeners: { afterrender: function(panel) { Ext.Ajax.request({ url: '/test/abc', success: function(response) { let abc = Ext.decode(response.responseText); let html = ''+ abc.name +'('+ abc.tel +')'; panel.update(html); ..

Case1{ xtype: 'panel', bodyStyle: 'background-color:black', html: 'Logout', listeners: { afterrender: function(panel) { panel.getEl().on('click', function() { Ext.Msg.alert('Panel Clicked', 'You clicked on the panel!'); }); } }},Case2{ xtype: 'panel', bodyStyle: 'background-color:black', html: 'Logout', listeners: { click: { lement: 'el', //bind to the underlying el property on ..