В предыдущей статье мы рассмотрели создание текстовых полей с любым количеством собственных триггеров. В этой статье мы разберём как создать ComboBox с дополнительным триггером.

Для создания комбобокса в ExtJs есть готовый компонент. Называется он Ext.form.ComboBox (xtype: combo). Если посмотреть иерархию объектов, то можно увидеть, что ComboBox — это доработанный TriggerField, т.е. текстовое поле с одним триггером. Можно взять его за основу. Но авторы MODX постарались за нас и создали адаптированный для MODX комбобокс, в котором определили все необходимые настройки, добавили store и reader, описали поведение. Зачем нам делать лишнюю работу. Нужно лишь переопределить несколько свойств. Для этого добавляем в config формы следующее описание поля:

xtype: 'modx-combo',
hiddenName: 'myName', // укажите своё название элемента формы
name: 'myName', // укажите своё название элемента формы
url: 'путь к коннектору', // Как правило указывается modExtra.config.connector_url, где modExtra - название вашего компонента
baseParams: {
	action: 'путь/к/процессору/getlist' // например, 'mgr/items/getlist'
},
fieldLabel: 'Название поля',
triggerConfig: {
    tag: 'span',
    cls: 'x-field-combo-btns',
    cn: [
        {tag: 'div', cls: 'x-form-trigger x-field-combo-list'},
        {tag: 'div', cls: 'x-form-trigger x-field-combo-mytrigger'}
    ]
},
onTriggerClick: function(event, btn){
    // В данном примере используется другой способ проверки (для разнообразия)
    if (btn && Ext.get(btn).hasClass('x-field-combo-mytrigger')) {
        alert('Нажата кнопка триггера 2');
    } else {
        // Вызываем родительский метод, который выводит список
        MODx.combo.ComboBox.superclass.onTriggerClick.call(this);
    }
}

Ну а дальше нужно определить стили для кнопок. Добавляем в файл стилей описание классов триггеров.

.x-field-combo-list,
.x-field-combo-mytrigger {border-left: 1px solid #e4e4e4 !important;}
.x-field-combo-list:hover,
.x-field-combo-mytrigger:hover {border-left-color: transparent !important;}
.x-field-combo-list {right: 31px !important; border-radius: 0 !important;}
.x-field-combo-mytrigger:before {content: '\f00d' !important;}

В итоге получаем вот такое поле —

Если кликнуть по первому триггеру со стрелками или нажать кнопку , то откроется список, который вы определили в процессоре, а второй триггер выведет сообщение «Нажата кнопка триггера 2».

07 октября 2016, 11:29   726     0

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.