Работа с Form и HTMLForm

Для работы с формами используются следующие методы:

setValues()

Позволяет установить значения для всех полей сразу.

1. В качестве первого параметра необходимо передать объект, который содержит пару "ключ-значение". Ключ должен соответствовать свойству name поля формы.

webix.ui({
    rows:[
        { view:"form", id:"myform", elements:[
            { view:"text", name:"field_a", label: "from", value: "Madrid"},
            { view:"text", name:"field_b", label: "to", value: "Milan"}
        ]},
        { view:"button", label: "Fill form", click:set_form }
    ]
});
 
function set_form(){
    $$("myform").setValues({
        field_a: "London",
        field_b: "New York"
    });
};

2. Второй параметр необязателен и отвечает за обновление формы.

По умолчанию у него установлено значение false. Это значит, что если вы меняете хотя бы 1 поле (например "field_b"), значения других полей будут очищены. Чтобы изменить значение только необходимого поля и сохранить значения в других полях, передайте методу параметр true, .

// обновляем значение поля field_b, значения других полей формы будут удалены!
$$("myform").setValues({ field_b:"Paris" }); 
 
// обновляем значение поля field_b, значения других полей формы будут сохранены 
$$("myform").setValues({ field_b:"Paris" }, true);

3. Третий параметр также не обязателен и отвечает за настройку действий. Он может быть любого типа (от string до object) и передается обработчику события onChange в качестве последнего аргумента.

Более подробную информацию о методе можно узнать в его API документации.

load()

Загружает данные с указанного источника.

Метод принимает три параметра:

• url (string, function, object) - источник данных
• type (string) - формат данных. Укажите этот параметр, если входящие данные приходят не в формате JSON
• callback (function) - необязательный параметр. Коллбэк будет выполнен после полной загрузки данных.

$$("myform").load("./data/book.xml", "xml", callback);

Более подробную информацию о методе можно узнать в его API документации.

getValues()

Метод возвращает объект со значениями всех полей формы, включая спрятанные и заблокированные. В примере ниже, значения всех полей формы выводятся в консоль.

webix.ui({
    view:"form",
    elements:[
        // если мы хотим получить значения полей, нужно задать им свойство name
        { view:"text", name:"login"},
        { view:"text", name:"email"}
    ]
});
 
var values = $$("myform").getValues();
console.log(values);

Вы также можете исключить из объекта значения заблокированных и скрытых полей:

$$("myform").getValues({hidden:false, disabled:false});

Более подробную информацию о методе можно узнать в его API документации.

clear()

Очищает все поля формы.

Метод принимает только 1 параметр:

• config (any) - необязательный. Отвечает за настройку действий.

Параметр может быть любого типа и передается событию onChange в качестве последнего аргумента.

$$("myform").clear();

focus()

Метод устанавливает фокус в нужное поле. Для этого необходимо передать методу название поля в качестве параметра. Если вызвать метод без параметра, фокус будет установлен на первом подходящем элементе.

webix.ui({
    view:"form", id:"myform",
    elements:[
        { view:"text", name:"login"},
        { view:"text", name:"email"}
    ]
});
 
// устанавливает фокус в первое поле (здесь это "login")
$$("myform").focus();
// устанавливает фокус в поле "email"
$$("myform").focus("email");

isDirty()

Метод проверяет наличие любых изменений в форме. Его нужно вызвать перед валидацией и сохранением значений из формы в компонент и/или на сервер.

function save_form(){
    var form = $$("form1");
    if(form.isDirty()){
        if(!form.validate())
            return false;
        form.save();
    }
 };

Related sample:  Binding to List

Более подробную информацию о методе можно узнать в его API документации.

Помните, что метод save() доступен только для формы, которая связана с компонентом данных.

setDirty()

Помечает форму маркером "dirty", который сообщает о том, что данные в ней были изменены.

$$("form1").setDirty();

Более подробную информацию о методе можно узнать в его API документации;

bind()

Метод связывает форму с любым компонентом данных. В примере ниже, форма связывается со списком и заполняется его данными. После изменения, форма сохраняет данные обратно в список.

webix.ui({
    view:"form",
    id: "form1",
    elements:[
        { view:"text", name:"rank"},
        { view:"text", name:"title"}
    ]
});
 
webix.ui({
     view:"list",
     id: "list1",
     template:"#rank#. #title#",
     select:true,
     data:small_film_set
});
 
$$("form1").bind($$("list1"));

Related sample:  Binding to List

После связывания формы со списком, доступны следующее операции/действия:

• при клике на любой элемент списка, его данные заполнят соответствующие поля формы. Ключи данных выбранного элемента должны совпадать со значениями свойства name полей формы

• форма получает доступ к методу save(), который отправляет измененные данные обратно в компонент List

Более подробную информацию о методе можно узнать в разделе Связывание данных.

validate()

Проверяет значения полей формы на соответствие установленным правилам. Объект rules хранит названия полей как ключи, а функции для их валидации как значения.

Метод возвращает false, если указанные поля не соответствуют установленным правилам.

webix.ui({
    view:"form",
    id:"myform",
    elements:[
        { view:"text", name:"rank"},
        { view:"text", name:"title"}
    ],
    rules:{
        rank:webix.rules.isNumber,
        title:webix.rules.isNotEmpty
    }
});
 
$$("myform").validate();

Более подробную информацию о методе можно узнать в разделе Валидация данных.

Наверх