Ext.define('Ext.ux.grid.filter.DateFilter', {
extend: 'Ext.ux.grid.filter.Filter',
alias: 'gridfilter.date',
uses: ['Ext.picker.Date', 'Ext.menu.Menu'],
afterText : 'After',
beforeText : 'Before',
compareMap : {
before: 'lt',
after: 'gt',
on: 'eq'
},
dateFormat : 'm/d/Y',
menuItems : ['before', 'after', '-', 'on'],
menuItemCfgs : {
selectOnFocus: true,
width: 125
},
onText : 'On',
pickerOpts : {},
init : function (config) {
var me = this,
pickerCfg, i, len, item, cfg;
pickerCfg = Ext.apply(me.pickerOpts, {
xtype: 'datepicker',
minDate: me.minDate,
maxDate: me.maxDate,
format: me.dateFormat,
listeners: {
scope: me,
select: me.onMenuSelect
}
});
me.fields = {};
for (i = 0, len = me.menuItems.length; i < len; i++) {
item = me.menuItems[i];
if (item !== '-') {
cfg = {
itemId: 'range-' + item,
text: me[item + 'Text'],
menu: Ext.create('Ext.menu.Menu', {
items: [
Ext.apply(pickerCfg, {
itemId: item,
listeners: {
select: me.onPickerSelect,
scope: me
}
}),
]
}),
listeners: {
scope: me,
checkchange: me.onCheckChange
}
};
item = me.fields[item] = Ext.create('Ext.menu.CheckItem', cfg);
}
me.menu.add(item);
}
me.values = {};
},
onCheckChange : function (item, checked) {
var me = this,
picker = item.menu.items.first(),
itemId = picker.itemId,
values = me.values;
if (checked) {
values[itemId] = picker.getValue();
} else {
delete values[itemId]
}
me.setActive(me.isActivatable());
me.fireEvent('update', me);
},
onInputKeyUp : function (field, e) {
var k = e.getKey();
if (k == e.RETURN && field.isValid()) {
e.stopEvent();
this.menu.hide();
}
},
onMenuSelect : function (picker, date) {
var fields = this.fields,
field = this.fields[picker.itemId];
field.setChecked(true);
if (field == fields.on) {
fields.before.setChecked(false, true);
fields.after.setChecked(false, true);
} else {
fields.on.setChecked(false, true);
if (field == fields.after && this.getFieldValue('before') < date) {
fields.before.setChecked(false, true);
} else if (field == fields.before && this.getFieldValue('after') > date) {
fields.after.setChecked(false, true);
}
}
this.fireEvent('update', this);
picker.up('menu').hide();
},
getValue : function () {
var key, result = {};
for (key in this.fields) {
if (this.fields[key].checked) {
result[key] = this.getFieldValue(key);
}
}
return result;
},
setValue : function (value, preserve) {
var key;
for (key in this.fields) {
if(value[key]){
this.getPicker(key).setValue(value[key]);
this.fields[key].setChecked(true);
} else if (!preserve) {
this.fields[key].setChecked(false);
}
}
this.fireEvent('update', this);
},
isActivatable : function () {
var key;
for (key in this.fields) {
if (this.fields[key].checked) {
return true;
}
}
return false;
},
getSerialArgs : function () {
var args = [];
for (var key in this.fields) {
if(this.fields[key].checked){
args.push({
type: 'date',
comparison: this.compareMap[key],
value: Ext.Date.format(this.getFieldValue(key), this.dateFormat)
});
}
}
return args;
},
getFieldValue : function(item){
return this.values[item];
},
getPicker : function(item){
return this.fields[item].menu.items.first();
},
validateRecord : function (record) {
var key,
pickerValue,
val = record.get(this.dataIndex),
clearTime = Ext.Date.clearTime;
if(!Ext.isDate(val)){
return false;
}
val = clearTime(val, true).getTime();
for (key in this.fields) {
if (this.fields[key].checked) {
pickerValue = clearTime(this.getFieldValue(key), true).getTime();
if (key == 'before' && pickerValue <= val) {
return false;
}
if (key == 'after' && pickerValue >= val) {
return false;
}
if (key == 'on' && pickerValue != val) {
return false;
}
}
}
return true;
},
onPickerSelect: function(picker, date) {
this.values[picker.itemId] = date;
this.fireEvent('update', this);
}
});