Ne pas soumettre les champs de formulaire vide dans ExtJS

J'ai un extjs formulaire avec des champs. L'utilisateur n'est pas nécessaire d'entrer des données dans chaque champ, donc je ne veux pas soumettre les champs de l'absence de données. Je le veux afficher uniquement les champs qui ont réellement des données. Est-ce possible?

OriginalL'auteur Chris | 2011-07-27

  1. 4

    Je recommande l'utilisation du formulaire beforeaction événement. Lors de la manipulation de cet événement, vous pouvez vérifier tous les champs. Si toutes les valeurs sont vides juste return false;. L'exemple suivant fonctionne dans ExtJS4 et a travailler dans ExtJS3:

    myform.on('beforeaction', function(form, action) {
    if (action.type == 'submit') {
        var doSubmit = false, vals = form.getValues();
        for (var i in vals)
            if (vals[i] !== '') {
                doSubmit = true;
                break;
            }
        return doSubmit;
    }
});

    Actuellement, la bonne manière de ne pas se soumettre champs vides est d'utiliser de l'action submitEmptyText config. Mais cela ne fonctionne pas dans la version actuelle (ExtJS4.0.2 a).

    Le Sencha docs sont un peu floues, mais je pense que vous vous êtes trompé sur submitEmptyText'utilisation. SubmitEmptyText fait est évaluée uniquement lorsqu'un champ est '' (vide) puis remplace simplement la chaîne de caractères vide avec le emptyText de la propriété. Si défini à false, il ne laisse que le vide de chaînes que se, ce qui signifie qu'ils seraient toujours être inclus avec la demande.
    vous avez probablement raison. Merci.
    Appelez simplement form.getValues(false, true); Le deuxième paramètre est dirtyOnly=true, ce qui signifie que vous obtenez seulement les champs avec des valeurs.
    Ce n'est pas correct. Cela ne se salir les champs, donc si vous avez des champs avec préremplie valeurs (par exemple, les champs cachés) ce ne sera pas les faire.

    OriginalL'auteur Molecular Man

  2. 3

    Un autre choix est de remplacer la composante getSubmitValue() méthode et retour null si ce champ est vide, de cette façon il ne sera pas inclus dans soumettre les champs.

    {
    xtype: 'combo',
    getSubmitValue: function(){
        var value = this.getValue();
        if(Ext.isEmpty(value)) {
            return null;
        }
        return value;
    }
}
    Trop de code si les champs sont nombreux, mais il fonctionne!

    OriginalL'auteur serg

  3. 1

    Au lieu d'utiliser de soumission du formulaire, appelez directement Ext.Ajax.demande de(...) avec l'url, le type de méthode (GET/POST) et les paramètres (et toutes les autres options comme expliqué dans l'appel de la documentation).
    Pour générer params, parcourir les champs de formulaire et de vérifier la valeur null avant de l'ajouter à params.

    OriginalL'auteur Amol Katdare

  4. 1

    Ce bug est présent dans ExtJS 4.0.7 trop.

    Comme Molécule de l'Homme a signalé:

    Actuellement, la bonne manière de ne pas se soumettre champs vides est d'utiliser de l'action submitEmptyText config. Mais cela ne fonctionne pas dans la version actuelle (ExtJS4.0.2 a).

    Une solution possible pour résoudre ce bug est en substituant 2 fonctions, getValues dans "Ext.forme.De base" (d'où le bug est) et createForm (pour créer la forme de base) dans "Ext.forme.Le panneau de configuration", par extension, de la manière suivante:

    Ext.define("My.form.Basic", {
alias: "form.mybasic",
extend: "Ext.form.Basic",
getValues: function(asString, dirtyOnly, includeEmptyText, useDataValues) {
var values = {};
this.getFields().each(function(field) {
if (!dirtyOnly || field.isDirty()) {
var data = field[useDataValues ? "getModelData" : "getSubmitData"](includeEmptyText);
if (Ext.isObject(data)) {
var isArray = Ext.isArray;
Ext.iterate(data, function(name, val) {
if (includeEmptyText && val === "") {
val = field.emptyText || "";
}
if (includeEmptyText || ((!isArray(val) && val !== "") || (isArray(val) && val.length !== 0))) {
if (name in values) {
var bucket = values[name];
if (!isArray(bucket)) {
bucket = values[name] = [bucket];
}
if (isArray(val)) {
values[name] = bucket.concat(val);
}
else {
bucket.push(val);
}
}
else {
values[name] = val;
}
}
});
}
}
});
if (asString) {
values = Ext.Object.toQueryString(values);
}
return values;
}
});
Ext.define("My.form.Panel", {
alias: "form.mypanel",
extend: "Ext.form.Panel",
createForm: function() {
return Ext.create("My.form.Basic", this, Ext.applyIf({listeners: {}}, this.initialConfig));
}
});

    Le code est copié à partir du poste le code source. Le seul changement est à l'intérieur de l'itération de chaque champ: mis en œuvre à la suite de l'habillage "si":

    if (includeEmptyText || ((!isArray(val) && val !== "") || (isArray(val) && val.length !== 0)))

    Je suis un peu en retard mais mieux tard que jamais...

    OriginalL'auteur henryabra