Генерация формы

// пример формы для вывода быстрого поиска 
Ext.define('Core.view.sys_users.sys_users-findform', {
extend: 'Ext.Container', (1)
xtype: 'sys_users-findform', (2)

padding: 10, (3)

items: [{ (4)
xtype: 'textfield',
fieldLabel: 'Имя',
name: "name",
value: "Администратор"
}, {
xtype: 'findfieldcontainer',
fieldLabel: 'Логин',
layout: 'hbox',
items: [{
xtype: 'textfield',
name: "login",
value: "admin"
}, {
xtype: 'findform-splitter'
}, {
xtype: 'textfield',
name: "login1"
}]
}],
// нужен только для переопределения
getFilter: function () { (5)
return [{
property: "login",
operator: 'like',
value: 'adm'
}]
}
});

Правила создания форм:

  • (1) компонент должен является наследником простых контейнеров, лучше Ext.Container, но не Ext.form.Panel, так как это приведет к ошибке при получении данных.
  • (2) нужно указывать xtype потому что он используется при инициализации плагина
...
// пример применения контейнера
plugins: [{
ptype: 'findform',
...
formConfig: {
xtype: 'sys_users-findform',
width: 500
}
}]
...
  • (3) визуальные настройки компонент настраиваются в нем же. Плагин лишь настраивает прокрутку для данного компонента, т.е. применять свойство scrollable не нужно
  • (4) все поля должны быть размещены в элементе items (подробнее смотреть ниже). Если настройка плагина onlyValue равна true, то можно применять dockedItems, ограничений нет.
  • (5) дополнительный метод для переопределения фильтра (см. ниже). По умолчанию создавать не нужно. Если указано свойство onlyValue=true, то результат этого метода не учитывается

Способы получения данных от компонента

Внимание: при создание полей всегда нужно указывать свойство name

Имеются 3 способа:

Способ №1

Производиться анализ внутренних компонент (свойства items) и на основе расположенности полей создается условие для стандартной фильтрации хранилища.

items: [{
xtype: 'textfield', (1)
fieldLabel: 'Имя',
name: "name",
value: "Администратор"
}, {
xtype: 'findfieldcontainer', (2)
fieldLabel: 'Логин',
layout: 'hbox',
items: [{
xtype: 'textfield',
name: "login",
value: "admin"
}, {
xtype: 'findform-splitter' (3)
}, {
xtype: 'textfield',
name: "login1"
}]
}]

(1) Одиночное поле преобразуется в условие:

[
{
"property": "login", // получается из свойства name
"value": "текст" // значение поля
}
]

(2) контейнер findfieldcontainer преобразуется в группу:

[...]

(3) компонент findform-splitter является разделителем для группы элементов, которые расположены внутри findfieldcontainer. У findform-splitter есть одно дополнительное свойство logic. Оно предназначено для указания логической операции которая может применяться для группы полей. Существует две такие операции:

  • OR – является значение по умолчанию и по этому свойство logic в компоненте
    findform-splitter может быть не указано.
  • BETWEEN
// пример с OR
xtype: 'findfieldcontainer',
fieldLabel: 'Логин',
layout: 'hbox',
items: [{
xtype: 'textfield',
name: "login",
value: "admin"
}, {
xtype: 'findform-splitter'
}, {
xtype: 'textfield',
name: "login"
}]
// результатом будет
[
{
"property": "login",
"value": "admin"
},
'OR',
{
"property": "login",
"value": undefined
}
]
// пример с BETWEEN
xtype: 'findfieldcontainer',
fieldLabel: 'Логин',
layout: 'hbox',
items: [{
xtype: 'numberfield',
name: "age",
value: 30
}, {
xtype: 'findform-splitter',
logic: "BETWEEN"
}, {
xtype: 'numberfield',
name: "age",
value: 28
}]
// результатом будет
[
{
"property": "age",
"operator": ">",
"value": 30
},
{
"property": "age",
"operator": "<",
"value": 28
}
]
// !!! разделитель по умолчанию здесь AND

Способ №2

Создание метода getFilter для указания своего собственного условия.

!!! Внимание: свойство onlyValue у плагина должно быть равным false

 items: [{
xtype: 'textfield',
fieldLabel: 'Имя',
name: "name",
value: "Администратор"
}, {
...
}],
// метод для переопределения фильтра
getFilter: function () {
return [{ (1)
property: "login",
operator: 'like',
value: 'adm'
}]
}

(1) Добавили собственный фильтр, указав собственный оператор для фильтра

Способ №3

Простое считывание данных с формы. Параметр onlyValue у плагина должен быть равен true. При данном способе данные будут переданы в отдельном свойстве RPC запроса

// пример части rpc запроса
...
data: [{
...
findForm: [...]
...
}]
...
 items: [{
xtype: 'textfield',
fieldLabel: 'Имя',
name: "name",
value: "Администратор"
}, {
xtype: 'findfieldcontainer',
fieldLabel: 'Логин',
layout: 'hbox',
items: [{
xtype: 'textfield',
name: "login",
value: "admin"
}, {
xtype: 'findform-splitter'
}, {
xtype: 'textfield',
name: "user"
}]
}]
// результатом будет
[
{
"property": "name",
"value": "Администратор"
},
{
"property": "login",
"value": "admin"
},
{
"property": "user",
"value": undefined
}
]
Print Friendly, PDF & Email