add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / form / FileUploads.js

/**\r
 * This example demonstrates use of Ext.form.field.File, a file upload field with custom\r
 * rendering, and error handling.\r
 */\r
Ext.define('KitchenSink.view.form.FileUploads', {\r
    extend: 'Ext.container.Container',\r
    xtype: 'form-fileuploads',\r
    controller: 'form-fileuploads',\r
    \r
    //<example>\r
    requires: [\r
        'KitchenSink.view.form.FileUploadsController'\r
    ],\r
    \r
    exampleTitle: 'File Upload fields',\r
    otherContent: [{\r
        type: 'ViewController',\r
        path: 'classic/samples/view/form/FileUploadsController.js'\r
    }],\r
    //</example>\r
    \r
    width: 600,\r
    layout: {\r
        type: 'vbox',\r
        align: 'stretch'\r
    },\r
    \r
    defaults: {\r
        xtype: 'form',\r
        layout: 'anchor',\r
\r
        bodyPadding: 10,\r
        style: {\r
            'margin-bottom': '20px'\r
        },\r
        \r
        defaults: {\r
            anchor: '100%'\r
        }\r
    },\r
    \r
    items: [{\r
        items: [{\r
            xtype: 'component',\r
            html: [\r
                '<h3>Basic File Field</h3>',\r
                '<p>A typical file upload field with Ext style. Direct editing ',\r
                'of the text field cannot be done in a consistent, cross-browser way, ',\r
                'so it is always read-only. The file path reported by the ',\r
                '<code>getValue</code> method will depend on the browser and cannot ',\r
                'be controlled by Ext JS.'\r
            ]\r
        }, {\r
            xtype: 'filefield',\r
            hideLabel: true,\r
            reference: 'basicFile'\r
        }, {\r
            xtype: 'button',\r
            text: 'Get File Path',\r
            handler: 'getFilePath'\r
        }]\r
    }, {\r
        items: [{\r
            xtype: 'component',\r
            html: [\r
                '<h3>Button Only</h3>',\r
                '<p>You can also render the file input as a button without ',\r
                'the text field, with access to the field\'s value via the ',\r
                'standard <tt>Ext.form.field.Field</tt> interface or by handling ',\r
                'the <tt>change</tt> event (as in this example).',\r
                '</p>'\r
            ]\r
        }, {\r
            xtype: 'fileuploadfield', // Same as filefield above\r
            buttonOnly: true,\r
            hideLabel: true,\r
            listeners: {\r
                change: 'buttonOnlyChange'\r
            }\r
        }]\r
    }, {\r
        title: 'File Upload Form',\r
        frame: true,\r
        bodyPadding: '10 10 0',\r
        reference: 'firstForm',\r
\r
        defaults: {\r
            anchor: '100%',\r
            allowBlank: false,\r
            msgTarget: 'side',\r
            labelWidth: 50\r
        },\r
\r
        items: [{\r
            xtype: 'textfield',\r
            fieldLabel: 'Name'\r
        }, {\r
            xtype: 'filefield',\r
            emptyText: 'Select an image',\r
            fieldLabel: 'Photo',\r
            name: 'photo-path',\r
            buttonText: '',\r
            buttonConfig: {\r
                iconCls: 'file-uploads-image-add'\r
            }\r
        }],\r
\r
        buttons: [{\r
            text: 'Save',\r
            handler: 'firstFormSave'\r
        }, {\r
            text: 'Reset',\r
            handler: 'firstFormReset'\r
        }]\r
    }, {\r
        title: 'Upload error test',\r
        frame: true,\r
        bodyPadding: '10 10 0',\r
        reference: 'secondForm',\r
\r
        defaults: {\r
            anchor: '100%',\r
            allowBlank: false,\r
            msgTarget: 'side',\r
            labelWidth: 70\r
        },\r
\r
        items: [{\r
            xtype: 'textfield',\r
            fieldLabel: 'Name'\r
        }, {\r
            xtype: 'filefield',\r
            emptyText: 'Select an image',\r
            fieldLabel: 'Photo',\r
            name: 'photo-path',\r
            buttonConfig: {\r
                text : '',\r
                iconCls: 'file-uploads-image-add'\r
            }\r
        }, {\r
            xtype: 'numberfield',\r
            fieldLabel: 'HTTP status',\r
            value: 200,\r
            minValue: 200,\r
            maxValue: 599,\r
            name: 'returnResponse'\r
        }],\r
\r
        buttons: [{\r
            text: 'Save',\r
            handler: 'secondFormSubmit'\r
        }, {\r
            text: 'Reset',\r
            handler: 'secondFormReset'\r
        }]\r
    }]\r
});\r