Wie man Sencha Datei-upload-Feld, um die multiple Dateien

Habe ich Sencha Ext JS Anwendung wo ich File Formularfeld (Ext.form.field.File) zum hochladen von Dateien. Es funktioniert gut, aber ich möchte den Benutzern die Auswahl mehrerer Dateien für den upload auf einmal, wie bei Dropbox.com zum Beispiel. Ich habe einen anderen, nicht-Sencha-Website (in, welche ich hatte direkte Kontrolle über HTML-Code), wo ich dieses problem gelöst durch die Verwendung multiple - Attribut des INPUT-Elements:

  <input type="file" name="files" multiple>

Sencha, jedoch nicht auf die Unterstützung mehrerer Dateien im Datei-upload-Feld nativ, zumindest von der aktuellen version (4.1). Vielleicht ist es möglich, ändern der HTML-Ausgabe emittiert von Sencha für <input> element, aber ich bin nicht sicher, wie.

InformationsquelleAutor Cozzamara | 2013-02-16

  1. 3

    Können Sie erstellen, xtype:

    Ext.define('fileupload',{
    extend: 'Ext.form.field.Text'
    ,alias: 'widget.fileupload'
    ,inputType: 'file'
    ,listeners: {
        render: function (me, eOpts) {
            var el = Ext.get(me.id+'-inputEl');
            el.set({
                size: me.inputSize || 1
            });
            if(me.multiple) {
                el.set({
                    multiple: 'multiple'
                });
            }
        }
    }
});

    Und verwenden Sie es in Ihrem Formular:

    ,items: [{
        xtype: 'fileupload'
        ,vtype: 'file'
        ,multiple: true //multiupload (multiple attr)
        ,acceptMimes: ['doc', 'xls', 'xlsx', 'pdf', 'zip', 'rar'] //file types
        ,acceptSize: 2048
        ,fieldLabel: 'File <span class="gray">(doc, xls, xlsx, pdf, zip, rar; 2 MB max)</span>'
        ,inputSize: 76 //size attr
        ,msgTarget: 'under'
        ,name: 'filesToUpload[]'
    }]

    Siehe Beispiel auf githab

    Danke. Dieser code scheint zu sein, abhängig von ExtJS-version bei mir nicht funktioniert mit 4.0.7. Das input-element in meinem Fall nicht id -something-inputEl, so Ext.get(me.id+'-inputEl') zurück null. Ich ersetzte es mit Ext.get(me.id).down('input') und das half, aber es bewirkt dann, dass weitere Ausnahmen im ExtJS-code unten auf der Straße.
    Ja, Sie hat alles richtig gemacht. Genau das gleiche muss in die Prüfung. Beispiel für 4.0.7: htmlpreview.github.com/?https://github.com/werdender/..., Wenn die Validierung ist nicht notwendig, nur verwenden Sie nicht vtype.

    InformationsquelleAutor Vlad

Schreibe einen Kommentar