Свои триггеры для ComboBox, ч.2
В предыдущей статье мы рассмотрели создание текстовых полей с любым количеством собственных триггеров. В этой статье мы разберём как создать 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».
Вы должны авторизоваться, чтобы оставлять комментарии.
Комментарии ()