Как использовать более одного типа gridfilter в ExtJS?
В настоящее время я работаю со значениями SQL Timestamp (дата + время) в своих столбцах на панели сетки. Чтобы правильно отфильтровать это, мне нужно меню даты и времени в заголовке столбца. Комбинации типов «дата» и «число» было бы достаточно.
Другими словами, мне нужно меню заголовка столбца, в котором есть меню фильтров дат и чисел. Как я могу применить два типа фильтров к меню заголовка столбца? Если это не работает напрямую, как создать собственный фильтр, сочетающий типы даты и числа?
Тип номера:
Обновлено: с помощью @abeyaz мне удалось создать собственный фильтр столбцов с полями чисел и дат. Хотя мне не удалось найти способ внести изменения в значения в полях, применяемых к удаленному фильтру магазина. Как мне настроить события, которые будут вызываться, когда пользователь нажимает ввод в числовом поле, например, для изменения массива фильтров магазина?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Нет встроенного фильтра сетки даты и времени. Тем не менее, вы можете легко реализовать его самостоятельно. Во-первых, проверьте код фильтра даты. Вы должны создать класс Ext.grid.filters.menu.DateTime, расширяющий Ext.grid.filters.menu.Base, как в классе даты. Что вы можете сделать, так это; вместо использования datefield в items вы должны использовать контейнер поля, который включает datefield и timefield вместе. Следующий пример даст вам представление:
menu: {
items: {
lt: {
xtype: 'fieldcontainer',
label: 'Before',
placeholder: 'Before...',
operator: '<',
weight: 10,
items: [
{
xtype: 'datefield',
flex: 1,
listeners: {
change: 'up.onInputChange'
}
},
{
xtype: 'timefield',
width: 80,
listeners: {
change: 'up.onInputChange'
}
}
]
}
}
}
Однако вы также должны переопределить методы фильтрации, чтобы она работала правильно из-за разных элементов. Я создал скрипку для полностью рабочий пример
Я не понял, что вы имели в виду. Было бы лучше, если бы вы могли поделиться скрипкой.
Я отредактировал вопрос с некоторыми из моих достижений. Я не смог заставить скрипку показать именно то, что мне нужно, поэтому я решил, что изображение того, как я включил это, было бы более полезным. В настоящее время я использую классический Ext 6.5.
«up.onInputChange» — это то, что вы ищете. Посмотрите, как я его использовал. Вы должны использовать его аналогичным образом для других полей. Это вызывает обновление в магазине с новым фильтром
«up.onInputChange» ищет метод с таким именем на моем контроллере. Это ожидаемое поведение? Должен ли я кодировать этот метод с нуля? Подобный метод должен помечать флажок в меню фильтра и обновлять фильтр магазина.
Нет, именно так extjs сделали в фильтре даты, и я скопировал оттуда. Это метод в поле фильтра. Перепроверьте мою скрипку, чтобы увидеть, например. Вы можете активировать некоторые другие функции оттуда в соответствии с вашими потребностями. Однако в скрипке фильтр применяется при наборе текста, поэтому я не знаю вашего случая. Возможно, удаленный фильтр отличается. Опять же, лучший способ получить помощь — это всегда поделиться скрипкой, чтобы имитировать такое же/похожее поведение. Это не обязательно должен быть один и тот же код.
Здорово! нет проблем
Этот пример очень полезен, но когда я пытаюсь реализовать этот контейнер полей в Ext.grid.filters.filter.String, например, я получаю много ошибок из-за отсутствия методов обработки событий. Есть ли способ переопределить только menu.items и сохранить все методы событий? Мне кажется, что это простая настройка...