Meilleur moyen de publier des fichiers de manière asynchrone avec ExtJS

Question

J'ai essentiellement un formulaire que les utilisateurs ont rempli, et dans lequel il est également possible de joindre des fichiers. C'est vraiment équivalent à gmail: les fichiers sont envoyés pendant que vous tapez les informations dans le formulaire, et lorsque vous cliquez sur le bouton d'envoi final, il attend que les fichiers soient tous transférés et soumettent les champs finaux.

Mon problème ici est de soumettre ces fichiers pendant le processus. Ma première idée était de créer d'abord un nouveau FormPanel pour chaque fichier ajouté afin de pouvoir les envoyer en utilisant une requête POST Ext.Ajax. Malheureusement, nous ne pouvons pas intégrer un formulaire dans un formulaire (et j'ai pensé que ExtJS gérerait cela différemment, mais j'ai essayé et ce n'est pas le cas).

J'ai vu quelques contrôles sur Internet en utilisant un peu de Flash pour le faire, mais ce n'est pas la façon dont je veux le faire. Je voudrais le faire de la même manière que Google l'a fait! Excepté avoir une barre de progression, c'est une belle fonctionnalité mais ce n'est pas obligatoire :) Merci pour votre aide!

Answer 1

Réponse courte: Ne pas imbriquer les formulaires, les avoir côte à côte (ou même créé dynamiquement).

plus longue:

Quand vous y pensez, vous faites quelque chose qui n'est pas une opération atomique. Le téléchargement d'un fichier et l'affichage des données sur votre formulaire sont (technologiquement parlant) 2 transactions sans rapport. Vous fournissez le contexte transactionnel entre eux, comme le fait Gmail: vous créez un objet "brouillon", chargez les fichiers en indiquant qu'ils appartiennent à ce brouillon, puis publiez le reste des données du formulaire et finalisez le brouillon en un objet entièrement construit.

Bien sûr, vous devez faire la gestion de tout cela, mais ce n'est pas la question à portée de main. Le point est: Partitionnez votre interface utilisateur à la lumière de la "atomicité" que j'ai décrite ci-dessus. Ne mélangez pas les opérations de "téléchargement de fichier" et "envoi final" dans le même formulaire HTML Form/Ext FormPanel. (Vous pouvez toujours faire visuellement la même interface utilisateur conceptuelle pour l'utilisateur).

Vous pouvez faire la "demande d'extension.Ajax" pour les téléchargements de fichiers avec des formulaires créés ad-hoc.

Vous pouvez consulter l'exemple de Saki here.

Espérons que cela aide :-)