Sencha 파일 업로드

화면

Ext.create('Ext.form.Panel', {
    title: 'File Upload Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(), // Render the form to the body
    frame: true, // Adds border and background
    items: [
        {
            xtype: 'filefield', // File upload field
            name: 'file', // Name attribute for the uploaded file
            fieldLabel: 'Select File',
            labelWidth: 80,
            width: 360,
            allowBlank: false, // Makes this field required
            buttonText: 'Browse...', // Browse button label
        },
    ],
    buttons: [
        {
            text: 'Upload',
            handler: function () {
                const form = this.up('form').getForm(); // Get the form instance
                if (form.isValid()) { // Check if the form is valid
                    form.submit({
                        url: '/file/upload', // Server endpoint for file upload
                        waitMsg: 'Uploading your file...', // Show loading message
                        success: function (form, action) {
                            Ext.Msg.alert('Success', 'File uploaded successfully!');
                        },
                        failure: function (form, action) {
                            Ext.Msg.alert('Failure', 'File upload failed.');
                        },
                    });
                }
            },
        },
        {
            text: 'Reset',
            handler: function () {
                this.up('form').getForm().reset(); // Reset the form fields
            },
        },
    ],
});

팝업

function showFileUploadPopup() {
    const uploadPopup = Ext.create('Ext.window.Window', {
        title: 'File Upload',       // Popup title
        width: 400,
        height: 200,
        modal: true,                // Modal popup
        resizable: false,           // No resizing allowed
        draggable: true,            // Allow dragging
        layout: 'fit',              // Fit layout for form
        items: [
            {
                xtype: 'form',
                bodyPadding: 10,
                frame: true,        // Add frame for styling
                defaultType: 'textfield',
                items: [
                    {
                        xtype: 'filefield',    // File upload field
                        name: 'file',         // Field name for the file
                        fieldLabel: 'File',
                        labelWidth: 50,
                        allowBlank: false,    // Validation: file is required
                        buttonText: 'Browse...', // Button text for file selection
                    },
                ],
                buttons: [
                    {
                        text: 'Upload',
                        handler: function () {
                            const form = this.up('form').getForm(); // Get the form
                            if (form.isValid()) {
                                form.submit({
                                    url: '/file/upload',       // Replace with your server URL
                                    waitMsg: 'Uploading file...', // Display progress message
                                    success: function (form, action) {
                                        Ext.Msg.alert('Success', 'File uploaded successfully!');
                                        uploadPopup.close(); // Close the popup on success
                                    },
                                    failure: function (form, action) {
                                        Ext.Msg.alert('Failure', 'File upload failed.');
                                    },
                                });
                            }
                        },
                    },
                    {
                        text: 'Cancel',
                        handler: function () {
                            uploadPopup.close(); // Close the popup without action
                        },
                    },
                ],
            },
        ],
    });

    uploadPopup.show(); // Display the popup
}

팝업호출

Ext.create('Ext.button.Button', {
    text: 'Open File Upload',
    renderTo: Ext.getBody(),
    handler: function () {
        showFileUploadPopup(); // Open the file upload popup
    },
});