Свои триггеры для ComboBox, ч.1
Встала задача сделать ComboBox с несколькими триггерами (кнопками в конце поля). Найти готовую инструкцию мне не удалось, поэтому пришлось самому разбираться. В итоге всё оказалось не так уж сложно. Начнём с простых полей.
В ExtJs есть 2 готовых компонента для формы — с одним триггером (Ext.form.TriggerField) и двумя триггерами (Ext.form.TwinTriggerField). У них есть уже готовые методы и классы для кнопок.
У некоторых может возникнуть вопрос, чем компонент «TriggerField» отличается от компонента «ComboBox». TriggerField — это просто текстовое поле с кнопкой, функционал которой вы определяете сами. А ComboBox — это доработанный TriggerField, похожий на элемент select в HTML, который при клике на кнопку отображает список, элементы которого могут подгружаться из файла или базы данных.
Поле с одним триггером
Тут всё очень просто. В описании указываем правильный xtype — «trigger». Ещё нужно указать свою функцию для свойства onTriggerClick и класс в свойстве triggerClass. Для примера добавим кнопку, очищающую значение поля.
xtype: 'trigger', onTriggerClick: function (e,btn) { // Триггер находится на одном уровне с инпутом. Поэтому ищем sibling и очищаем. btn.previousSibling.value = ''; }, triggerClass: 'x-field-trigger-clear', name: 'name', width: 200, id: 'name-field', emptyText: 'Введите имя'
Теперь добавим соответствующие стили в css файл, который будет подключатся в админке при загрузке компонента.
.x-field-trigger-clear {border-left: 1px solid #e4e4e4 !important;} .x-field-trigger-clear:before {content: '\f00d' !important;} .x-field-trigger-clear:hover {border-left-color: transparent !important;}
В результате получится вот такое поле
Поле с двумя триггерами
В ExtJs есть уже готовый компонент. Так как у данного поля 2 кнопки, то для каждой кнопки нужно указать свой класс и определить свою функцию. И не забываем указывать правильный xtype.
xtype: 'twintrigger', onTrigger1Click: function (e,btn) { // Функция для кнопки 1 }, onTrigger2Click: function (e,btn) { // Функция для кнопки 2 }, trigger1Class: 'x-field-trigger1-class', trigger2Class: 'x-field-trigger2-class', name: 'name', width: 200, id: 'name-field', emptyText: 'Введите имя'
Для обоих кнопок указываем такие же стили как в первом случае. Единственное что нужно добавить — это сместить одну кнопку влево.
.x-field-trigger1-class {right: 31px !important; border-radius: 0 !important;}
Поле с 3 триггерами
Тут настройки немного усложняются. Теперь нам самим нужно описать кнопки и реакцию на их нажатие. За базовый элемент можно взять поле с одним триггером.
xtype: 'trigger', triggerConfig: { tag: 'span', cls: 'x-field-combo-btns', cn: [ {tag: 'div', cls: 'x-form-trigger x-field-trigger1-class', trigger: 'first'}, {tag: 'div', cls: 'x-form-trigger x-field-trigger2-class', trigger: 'second'} {tag: 'div', cls: 'x-form-trigger x-field-trigger3-class', trigger: 'third'} ] }, onTriggerClick: function(event, el){ // Проверяем какой триггер нажат. switch (el.getAttribute('trigger') { case 'first': alert('Нажата кнопка 1'); break; case 'second': alert('Нажата кнопка 2'); break; default: alert('Нажата кнопка 3'); } } name: 'name', width: 200, id: 'name-field', emptyText: 'Введите имя'
Осталось определить стили для каждого класса и вуаля, получаем вот такое поле

Поля с бОльшим количеством триггером определяются по такому же принципу. На этом всё. Надесь, получилось понятно.
В следующей статье мы рассмотрим пример комбобокса с несколькими триггерами.
Вы должны авторизоваться, чтобы оставлять комментарии.
Комментарии ()