Свои триггеры для 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: 'Введите имя'

Осталось определить стили для каждого класса и вуаля, получаем вот такое поле

Поля с бОльшим количеством триггером определяются по такому же принципу. На этом всё. Надесь, получилось понятно.

В следующей статье мы рассмотрим пример комбобокса с несколькими триггерами.