диапазон дат фильтра сетки extjs

Question

Я не понимаю, как создать два столбца даты и создать диапазон между ними?

Например, у меня есть Grid, где находится некоторый столбец (deadline date), и у меня есть 2 поля даты, где я могунапишите: From what day и Till what day.

Как тогда я могу фильтровать данные между теми днями, которые я выбрал?

**SOME CODE:**

   // create the Grid
    var grid = new Ext.grid.GridPanel({
        store       : store,
        id          : 'grid',
        columns     : [
            new Ext.grid.RowNumberer({width: 20, header: '#'}),
            {id:'text',header: "Text", width: 150, sortable: true, dataIndex: 'text'},
            {id:'is_online',header: "Is Online?", width: 70, sortable: true, dataIndex: 'is_online'},
            {id:'deadline',header: "Deadline", width: 130, sortable: true, dataIndex: 'deadline', xtype: "datecolumn", format: "Y-m-d"}
        ],
        stripeRows  : true,
        height      : 550,
        title       : 'Questions',
    });

    var gridSearch = new Ext.Panel({     
        stripeRows  : true,
        frame       : true,
        style       : 'padding-bottom: 5px',
        height      : 250,
        title       : 'Search filter',
        items       : [{
                        xtype       : 'checkbox',
                        id          : 'is_for_online',
                        boxLabel    : 'Показать только ОНЛАЙН',
                        inputValue  : '1'
                      },{
                        xtype       : 'datefield',
                        id          : 'date_s',
                        allowBlank  : true,
                        emptyText   : 'Выберите дату С',
                        name        : 'deadline',
                        width       : 140,
                        editable    : false,
                        format      : 'Y-m-d'
                      },{
                        xtype       : 'datefield',
                        id          : 'date_s',
                        allowBlank  : true,
                        emptyText   : 'Выберите дату С',
                        name        : 'deadline',
                        width       : 140,
                        editable    : false,
                        format      : 'Y-m-d'
                      },{
                        xtype       : 'button',
                        text        : 'Go!',
                        handler     : function () {

                    //var searchValueDate1 = Ext.getCmp("date_s").getValue(); 
                    //var searchValueDate2 = Ext.getCmp("date_po").getValue(); 
                    //var date_s    = searchValueDate1.format('Y-m-d');
                    //var date_po = searchValueDate2.format('Y-m-d');

                    //store.filter("deadline", date_s)//, date_po);

                    alert(daterange);



                        }
                },
                ]
    });

Answer 1

Вот мой пример:

Ext.create('Ext.grid.Panel', {
id: 'destinationsGrid',
features: [{
        ftype: 'filters',
        encode: false,
        local: false, // defaults to false (remote filtering)
        filters: [
         { type:'list', dataIndex: 'status',/* phpMode: true,*/ options: [[1,'Прошел'], [0, 'Не прошел'] ]}
        ]
      }],
columns: [
 { text: 'ФИО', flex: 1, dataIndex: 'fio', filter: {type: 'string'} },
 { text: 'Дата начало', dataIndex: 'start_date', filter: { type: 'date' }, xtype: "datecolumn", format: "d.m.Y" },
 ...





tbar: [
    {
        xtype: 'textfield',
        emptyText: 'Найти участника',
        id: 'findUserInGrid',
        width: 350,
        listeners: {
            change: function(data, record){
                var value = record;
                var grid = Ext.getCmp('destinationsGrid'),
                filter = grid.filters.getFilter('fio');

                 if (!filter) {
                    filter = grid.filters.addFilter({
                        active: true,
                        type: 'string',
                        dataIndex: 'fio'
                    });

                    filter.menu.show();
                    filter.setValue(value);
                    filter.menu.hide();
                } else {
                    filter.setValue(value);
                    filter.setActive(true);
                }
            }
        }
    }

и

listeners: {
            change: function(data, record){
                var value = record;
                var grid = Ext.getCmp('destinationsGrid'),
                filter = grid.filters.getFilter('fio');

                 if (!filter) {
                    filter = grid.filters.addFilter({
                        active: true,
                        type: 'string',
                        dataIndex: 'fio'
                    });

                    filter.menu.show();
                    filter.setValue(value);
                    filter.menu.hide();
                } else {
                    filter.setValue(value);
                    filter.setActive(true);
                }
            }
        }

Answer 2

Вы также можете использовать несколько фильтров по одному свойству, но добавлять разные идентификаторы для каждого фильтра.Это делает много ясного кода.

store.filter([
    {
      id: "deadlineStart",
      property: "deadline",
      operator: ">",
      value: new Date(2017, 0, 1)
    },
    {
      id: "deadlineEnd",
      property: "deadline",
      operator: "<",
      value: new Date()
    }
]);

Answer 3

Итак, что вы хотите сделать, это дать пользователю выбрать дату начала и окончания и в сетке отфильтровать и показать только записи с датами крайнего срока между этим диапазоном?Скажем, у вас есть поле, в котором пользователь вводит диапазон дат, и нажмите кнопку, чтобы отфильтровать по нажатию кнопки фильтра.Получите диапазон дат из двух полей (я предполагаю, что у вас будет логика, чтобы убедиться, что пользователь ввел допустимый диапазон дат, т.е. дата начала предшествует дате окончания и т. Д.)

Затем попробуйте следующее:На кнопке обработчик нажатия ниже

var grid = Ext.getCmp('grid');//Get the grid
var store = grid.store; //get the store from the grid to filter

//This method loops through each record return true to keep the record false to filter it //out
store.filterBy(function(rec, id){

     var startDate = Ext.getCmp('dateFieldStart');
     var endDate = Ext.getCmp('dateFieldEnd');

     var deadLineDate = rec.data.deadline;

//Then here I'm not going to write all the code you need to see if the date of the record //is between the start and end range if so return true to keep the row in the grid and //return false to filter it out

if(in the range){
 return true;
}else {
 return false.
}
});