Ext.js5表单的文件上传（toast）(30)

view

/**
 * This example demonstrates use of Ext.form.field.File, a file upload field with custom
 * rendering, and error handling.
 * 文件上传，自定义字段呈现和错误处理
 */
Ext.define('KitchenSink.view.form.FileUploads', {
    extend: 'Ext.container.Container',
    xtype: 'form-fileuploads',
    controller: 'form-fileuploads',


    width: 600,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    defaults: {
        xtype: 'form',
        layout: 'anchor',

        bodyPadding: 10,
        style: {
            'margin-bottom': '20px'
        },

        defaults: {
            anchor: '100%'
        }
    },

    items: [{
        items: [{
            xtype: 'component',
            html: [
                '<h3>Basic File Field</h3>',
                //这一个是典型的文件上传方式，文本框是只读的，文件的路径getValue方法取决于浏览器。
                '<p>A typical file upload field with Ext style. Direct editing ',
                'of the text field cannot be done in a consistent, cross-browser way, ',
                'so it is always read-only. The file path reported by the ',
                '<code>getValue</code> method will depend on the browser and cannot ',
                'be controlled by Ext JS.'
            ]
        }, {
            xtype: 'filefield',
            hideLabel: true,
            reference: 'basicFile'
        }, {
            xtype: 'button',
            text: 'Get File Path',
            handler: 'getFilePath'
        }]
    }, {
        items: [{
            xtype: 'component',
            html: [
                '<h3>Button Only</h3>',
                //通过按钮上传文件，值得注意的是提示是在右下角出现的，很好。试试用来取代alert.pop.confirm。
                //
                '<p>You can also render the file input as a button without ',
                'the text field, with access to the field\'s value via the ',
                'standard <tt>Ext.form.field.Field</tt> interface or by handling ',
                'the <tt>change</tt> event (as in this example).',
                '</p>'
            ]
        }, {
            xtype: 'fileuploadfield', // Same as filefield above
            buttonOnly: true,
            hideLabel: true,
            listeners: {
                change: 'buttonOnlyChange'
            }
        }]
    }, {
    //这个可以一次传很多文件
        title: 'File Upload Form',
        frame: true,
        bodyPadding: '10 10 0',
        reference: 'firstForm',

        defaults: {
            anchor: '100%',
            allowBlank: false,
            msgTarget: 'side',
            labelWidth: 50
        },

        items: [{
            xtype: 'textfield',
            fieldLabel: 'Name'
        }, {
            xtype: 'filefield',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'photo-path',
            buttonText: '',
            buttonConfig: {
                iconCls: 'upload-icon'
            }
        }],

        buttons: [{
            text: 'Save',
            handler: 'firstFormSave'
        }, {
            text: 'Reset',
            handler: 'firstFormReset'
        }]
    }, {
        title: 'Upload error test',
        frame: true,
        bodyPadding: '10 10 0',
        reference: 'secondForm',

        defaults: {
            anchor: '100%',
            allowBlank: false,
            msgTarget: 'side',
            labelWidth: 70
        },

        items: [{
            xtype: 'textfield',
            fieldLabel: 'Name'
        }, {
            xtype: 'filefield',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'photo-path',
            buttonConfig: {
                text : '',
                iconCls: 'upload-icon'
            }
        }, {
            xtype: 'numberfield',
            fieldLabel: 'HTTP status',
            value: 200,
            minValue: 200,
            maxValue: 599,
            name: 'returnResponse'
        }],

        buttons: [{
            text: 'Save',
            handler: 'secondFormSubmit'
        }, {
            text: 'Reset',
            handler: 'secondFormReset'
        }]
    }]
});

viewcontroller

Ext.define('KitchenSink.view.form.FileUploadsController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.form-fileuploads',

    getFilePath: function() {
        var v = this.lookupReference('basicFile').getValue();
        //正常情况下的alert
        Ext.Msg.alert('Selected File', v && v !== '' ? v : 'None');
    },

    buttonOnlyChange: function(field, value) {
    //嗷嗷，终于知道那种是什么呢！哈哈哈，漂亮的样式，新添的吐司哈哈哈！
        Ext.toast('<b>Selected:</b> ' + value);
    },

    firstFormSave: function() {
        var form = this.lookupReference('firstForm').getForm();

        if (form.isValid()) {
            form.submit({
                url: 'resources/data/form/file-upload.php',
                waitMsg: 'Uploading your photo...',
                success: function(fp, o) {
                    var tpl = new Ext.XTemplate(
                        'File processed on the server.<br />',
                        'Name: {fileName}<br />',
                        'Size: {fileSize:fileSize}'
                    );

                    Ext.Msg.alert('Success', tpl.apply(o.result));
                }
            });
        }
    },

    firstFormReset: function() {
        this.lookupReference('firstForm').getForm().reset();
    },

    secondFormSubmit: function() {
        var form = this.lookupReference('secondForm').getForm();

        if (form.isValid()) {
            form.submit({
                url: 'resources/data/form/file-upload.php',
                waitMsg: 'Uploading your photo...',
                success: this.secondFormUploadSuccess,
                failure: this.secondFormUploadFailure
            });
        }
    },

    secondFormReset: function() {
        this.lookupReference('secondForm').getForm().reset();
    },

    secondFormUploadSuccess: function(form, action) {
        Ext.Msg.alert('Success', 'Processed file "' + action.result.file + '" on the server');
    },

    secondFormUploadFailure: function(form, action) {
        Ext.Msg.alert("Error", Ext.JSON.decode(this.response.responseText).message);
    }
});