Не отправляйте пустые поля формы в ExtJS

Question

У меня есть форма extjs с полями.Пользователь не обязан вводить данные в каждое поле, поэтому я не хочу отправлять поля без данных.Я хочу, чтобы он публиковал только те поля, в которых есть данные.Возможно ли это?

Answer 1

Я рекомендую использовать событие формы beforeaction. При обработке этого события вы можете проверить все поля. Если все значения пусты, просто return false;. Следующий пример работает в ExtJS4 и должен работать в 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;
    }
});

На самом деле, правильный способ не отправлять пустые поля - использовать настройку действия submitEmptyText. Но это не работает в текущей версии (ExtJS4.0.2a).

Answer 2

Другой вариант - переопределить метод компонента getSubmitValue() и вернуть null, если это поле пустое, таким образом, оно не будет включено в поля отправки.

Answer 3

Эта ошибка присутствует и в ExtJS 4.0.7.

Как указал Молекулярный Человек:

На самом деле, правильный способ не отправлять пустые поля - использовать конфиг submitEmptyText действия. Но это не работает в текущей версии (ExtJS4.0.2a).

Возможное решение для исправления этой ошибки - переопределение 2 функций, getValues ​​в "Ext.form.Basic" (где ошибка) и createForm (для создания нашей базовой формы) в "Ext.form.Panel" в качестве расширения. следующим образом:

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));
    }
});

Код скопирован из исходного кода ext. Единственное изменение внутри итерации каждого поля: введена следующая упаковка "if":

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

Я немного опоздал, но лучше позже, чем никогда ...

Answer 4

Вместо использования отправки формы, непосредственно вызывайте Ext.Ajax.request (...) с URL, типом метода (GET / POST) и params (и любыми другими параметрами, как объяснено в вызове документация). Чтобы сгенерировать параметры, выполните итерации по полям формы и проверьте наличие нулевого значения перед добавлением к параметрам.