extjs grid filter date range - extjs

Question

I dont understand how to create two date columns and create range between them?
For example I have Grid where is some column (deadline date), and i have 2 datefields, where I can write: From what day and Till what day .
How then I can filter data between those days that I choosed?
**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

You can also use multiple filters by same property, but add different id to each filter.
This makes much clear code.
store.filter([
{
id: "deadlineStart",
property: "deadline",
operator: ">",
value: new Date(2017, 0, 1)
},
{
id: "deadlineEnd",
property: "deadline",
operator: "<",
value: new Date()
}
]);

Answer 2

So what you want to do is have a user select a start and end date and in the grid filter out and show only the records with deadline dates between that range? Say you have field where the user enters the date range and click a button to filter on the filter button click. Get the date range from the two fields (I assume you'll have logic to make sure the user has enter a valid date range ie the start date is before the end date etc.)
Then try the following:
On the button click handler below
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 3

Here my example:
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);
}
}
}
}
and:
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);
}
}
}