Sencha form에 image 추가

다른 field처럼 image를 넣으면 됨
기본적으로 Label은 없음

Ext.create('Ext.form.Panel', {
    title: 'Image Display and Upload Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'image',
            src: 'path/to/default-image.jpg', // Replace with default or dynamic image URL
            alt: 'No image available',
            width: 200,
            height: 200,
            itemId: 'displayedImage', // Reference ID for later use
            margin: '0 0 10 0'
        },
        {
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: 'Upload Photo',
            labelWidth: 100,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select Photo...'
        }
    ],

    buttons: [
        {
            text: 'Upload and Display',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        url: 'your-upload-url', // Backend endpoint for handling image uploads
                        waitMsg: 'Uploading your photo...',
                        success: function(fp, o) {
                            // Update the image source to the new uploaded image
                            var imageComponent = fp.owner.down('#displayedImage');
                            imageComponent.setSrc('path/to/uploaded/image.jpg'); // Use the actual uploaded image URL
                            Ext.Msg.alert('Success', 'Photo uploaded and displayed.');
                        },
                        failure: function(fp, o) {
                            Ext.Msg.alert('Error', 'Failed to upload photo.');
                        }
                    });
                }
            }
        }
    ]
});

 

필요할때 ,동적으로 추가
add() 함수 사용

Ext.create('Ext.form.Panel', {
    title: 'Dynamic Image Display and Upload Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: 'Upload Photo',
            labelWidth: 100,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select Photo...'
        }
    ],

    buttons: [
        {
            text: 'Upload and Display',
            handler: function() {
                var form = this.up('form').getForm();
                var formPanel = this.up('form'); // Reference to the form panel
                
                if (form.isValid()) {
                    form.submit({
                        url: 'your-upload-url', // Backend endpoint for handling image uploads
                        waitMsg: 'Uploading your photo...',
                        success: function(fp, o) {
                            // Assuming the server returns the uploaded image URL in the response
                            var imageUrl = 'path/to/uploaded/image.jpg'; // Use the actual uploaded image URL from the server response

                            // Check if the image component already exists
                            var existingImage = formPanel.down('#dynamicImage');
                            
                            if (!existingImage) {
                                // If the image component doesn't exist, add it
                                formPanel.add({
                                    xtype: 'image',
                                    src: imageUrl, // Use the URL of the uploaded image
                                    alt: 'Uploaded image',
                                    width: 200,
                                    height: 200,
                                    itemId: 'dynamicImage', // Assign itemId for future reference
                                    margin: '10 0 0 0'
                                });
                            } else {
                                // If the image component exists, update the source
                                existingImage.setSrc(imageUrl);
                            }

                            Ext.Msg.alert('Success', 'Photo uploaded and displayed.');
                        },
                        failure: function(fp, o) {
                            Ext.Msg.alert('Error', 'Failed to upload photo.');
                        }
                    });
                }
            }
        }
    ]
});

 

이미지 사이즈 정보 가져오기
이미지에 load listener를 추가하고, dom 정보를 가져오고, naturalWidth, naturalHeight를 사용

Ext.create('Ext.form.Panel', {
    title: 'Dynamic Image Sizing Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: 'Upload Photo',
            labelWidth: 100,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select Photo...'
        },
        {
            xtype: 'image',
            itemId: 'dynamicImage', // Assign itemId for future reference
            hidden: true,           // Initially hidden until an image is uploaded
            margin: '10 0 0 0',
            listeners: {
                load: function(imageComponent) {
                    // Access the DOM element to get the actual image size
                    var imgElement = imageComponent.getEl().dom;
                    imageComponent.setSize(imgElement.naturalWidth, imgElement.naturalHeight); // Set the component size to the natural image size
                }
            }
        }
    ],

    buttons: [
        {
            text: 'Upload and Display',
            handler: function() {
                var form = this.up('form').getForm();
                var formPanel = this.up('form'); // Reference to the form panel
                var imageComponent = formPanel.down('#dynamicImage'); // Reference to the image component
                
                if (form.isValid()) {
                    form.submit({
                        url: 'your-upload-url', // Backend endpoint for handling image uploads
                        waitMsg: 'Uploading your photo...',
                        success: function(fp, o) {
                            var imageUrl = 'path/to/uploaded/image.jpg'; // Use the actual uploaded image URL

                            // Unhide the image component and set the image source
                            imageComponent.setSrc(imageUrl);
                            imageComponent.setVisible(true); // Show the image component

                            Ext.Msg.alert('Success', 'Photo uploaded and displayed.');
                        },
                        failure: function(fp, o) {
                            Ext.Msg.alert('Error', 'Failed to upload photo.');
                        }
                    });
                }
            }
        }
    ]
});