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

那么你想要做的是让用户选择一个开始和结束日期，并在网格中过滤掉并仅显示截止日期在该范围之间的记录？假设您有用户输入日期范围的字段，并单击按钮以过滤单击过滤器按钮。从两个字段中获取日期范围（我假设您将有逻辑确保用户输入有效的日期范围，即开始日期在结束日期之前等。）

然后尝试以下方法：在下面的按钮单击处理程序

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.
}
});

Answer 2

这是我的例子：

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 3

您还可以通过同一属性使用多个过滤器，但向每个过滤器添加不同的ID。这使代码更加清晰。

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

extjs网格过滤日期范围

3 个答案: