Comment obtenir Sencha champ d'envoi de fichier pour accepter plusieurs fichiers

J'ai Sencha Ext JS demande où je l'utiliser File champ de formulaire (Ext.form.field.File) pour télécharger des fichiers. Ça fonctionne, mais je veux que les utilisateurs puissent sélectionner plusieurs fichiers à télécharger à la fois, comme à Dropbox.com, par exemple. J'en ai une autre, non Sencha site (dans laquelle j'ai eu un contrôle direct sur le langage HTML) où j'ai résolu ce problème en utilisant multiple attribut de l'élément d'ENTRÉE:

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

Sencha, cependant, ne prend pas en charge plusieurs fichiers dans le champ d'envoi de fichier natif, à moins que de la version actuelle (4.1). C'est peut-être possible de modifier le HTML de sortie émis par le Sencha pour <input> élément, mais je ne suis pas sûr de savoir comment.

OriginalL'auteur Cozzamara | 2013-02-16

  1. 3

    Vous pouvez créer un 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'
                });
            }
        }
    }
});

    Et à utiliser dans votre formulaire:

    ,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[]'
    }]

    Voir l'exemple sur githab

    Merci. Ce code semble être dépendante de ExtJS version ne fonctionne pas pour moi avec 4.0.7. L'élément d'entrée dans mon cas n'ont pas d'id something-inputEl, donc Ext.get(me.id+'-inputEl') retourne null. Je l'ai remplacé par Ext.get(me.id).down('input') et qui a aidé, mais il provoque alors de nouvelles exceptions dans ExtJS code en bas de la route.
    Oui, vous avez tout fait correctement. Juste la même chose doit être fait dans le validateur. Exemple pour 4.0.7: htmlpreview.github.com/?https://github.com/werdender/... Si la validation n'est pas nécessaire, il suffit de ne pas utiliser vtype.

    OriginalL'auteur Vlad