extjs網格過濾日期範圍

Question

我不明白如何創建兩個日期列並在它們之間創建範圍？

例如，我有Grid其中一些列（deadline date），和我有2個datefields，哪裏可以寫：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); 
       } 
      } 
     }