Sencha 이미지 사이즈 정보 가져오기

Case1

Ext.application({
    name: 'ImageSizeApp',

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'image',
                    src: 'https://via.placeholder.com/150', // Replace with your image URL
                    alt: 'Example Image',
                    listeners: {
                        afterrender: function (img) {
                            // Access the DOM element after the image is rendered
                            const imageElement = img.el.dom;

                            // Attach a load event to get the dimensions
                            imageElement.onload = function () {
                                const width = this.naturalWidth;
                                const height = this.naturalHeight;

                                Ext.Msg.alert('Image Size', `Width: ${width}px, Height: ${height}px`);
                            };

                            // Handle error cases
                            imageElement.onerror = function () {
                                Ext.Msg.alert('Error', 'Failed to load the image.');
                            };
                        }
                    }
                }
            ]
        });
    }
});

Case2

Ext.application({
    name: 'ResourceApp',

    launch: function () {
        // Make an AJAX request to fetch the Map data from the backend
        Ext.Ajax.request({
            url: '/api/resource-with-map', // Endpoint from Spring Boot
            method: 'GET',
            success: function (response) {
                // Parse the response
                const data = Ext.decode(response.responseText);

                // Create a panel to display the data
                Ext.create('Ext.container.Viewport', {
                    layout: 'vbox',
                    items: [
                        {
                            xtype: 'panel',
                            title: data.name,
                            html: `<p>${data.description}</p>`,
                            padding: 10
                        },
                        {
                            xtype: 'image',
                            src: data.resource, // Use the resource path for the image
                            alt: data.name,
                            style: {
                                width: '100%',
                                height: 'auto'
                            },
                            listeners: {
                                afterrender: function (img) {
                                    const imageElement = img.el.dom; // Access the DOM element
                                    
                                    // Attach a load event to fetch image size
                                    imageElement.onload = function () {
                                        const width = this.naturalWidth;
                                        const height = this.naturalHeight;
                                        Ext.Msg.alert('Image Size', `Width: ${width}px, Height: ${height}px`);
                                    };

                                    // Handle image load errors
                                    imageElement.onerror = function () {
                                        Ext.Msg.alert('Error', 'Failed to load the image.');
                                    };
                                }
                            }
                        }
                    ]
                });
            },
            failure: function (response) {
                Ext.Msg.alert('Error', 'Failed to load resource data.');
            }
        });
    }
});