<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-ux-grid-filter-DateFilter'>/**
</span> * @class Ext.ux.grid.filter.DateFilter
* @extends Ext.ux.grid.filter.Filter
* Filter by a configurable Ext.picker.DatePicker menu
* <p><b><u>Example Usage:</u></b></p>
* <pre><code>
var filters = Ext.create('Ext.ux.grid.GridFilters', {
...
filters: [{
// required configs
type: 'date',
dataIndex: 'dateAdded',
// optional configs
dateFormat: 'm/d/Y', // default
beforeText: 'Before', // default
afterText: 'After', // default
onText: 'On', // default
pickerOpts: {
// any DatePicker configs
},
active: true // default is false
}]
});
* </code></pre>
*/
Ext.define('Ext.ux.grid.filter.DateFilter', {
extend: 'Ext.ux.grid.filter.Filter',
alias: 'gridfilter.date',
uses: ['Ext.picker.Date', 'Ext.menu.Menu'],
<span id='Ext-ux-grid-filter-DateFilter-cfg-afterText'> /**
</span> * @cfg {String} afterText
* Defaults to 'After'.
*/
afterText : 'After',
<span id='Ext-ux-grid-filter-DateFilter-cfg-beforeText'> /**
</span> * @cfg {String} beforeText
* Defaults to 'Before'.
*/
beforeText : 'Before',
<span id='Ext-ux-grid-filter-DateFilter-cfg-compareMap'> /**
</span> * @cfg {Object} compareMap
* Map for assigning the comparison values used in serialization.
*/
compareMap : {
before: 'lt',
after: 'gt',
on: 'eq'
},
<span id='Ext-ux-grid-filter-DateFilter-cfg-dateFormat'> /**
</span> * @cfg {String} dateFormat
* The date format to return when using getValue.
* Defaults to 'm/d/Y'.
*/
dateFormat : 'm/d/Y',
<span id='Ext-ux-grid-filter-DateFilter-cfg-maxDate'> /**
</span> * @cfg {Date} maxDate
* Allowable date as passed to the Ext.DatePicker
* Defaults to undefined.
*/
<span id='Ext-ux-grid-filter-DateFilter-cfg-minDate'> /**
</span> * @cfg {Date} minDate
* Allowable date as passed to the Ext.DatePicker
* Defaults to undefined.
*/
<span id='Ext-ux-grid-filter-DateFilter-cfg-menuItems'> /**
</span> * @cfg {Array} menuItems
* The items to be shown in this menu
* Defaults to:<pre>
* menuItems : ['before', 'after', '-', 'on'],
* </pre>
*/
menuItems : ['before', 'after', '-', 'on'],
<span id='Ext-ux-grid-filter-DateFilter-cfg-menuItemCfgs'> /**
</span> * @cfg {Object} menuItemCfgs
* Default configuration options for each menu item
*/
menuItemCfgs : {
selectOnFocus: true,
width: 125
},
<span id='Ext-ux-grid-filter-DateFilter-cfg-onText'> /**
</span> * @cfg {String} onText
* Defaults to 'On'.
*/
onText : 'On',
<span id='Ext-ux-grid-filter-DateFilter-cfg-pickerOpts'> /**
</span> * @cfg {Object} pickerOpts
* Configuration options for the date picker associated with each field.
*/
pickerOpts : {},
<span id='Ext-ux-grid-filter-DateFilter-method-init'> /**
</span> * @private
* Template method that is to initialize the filter and install required menu items.
*/
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.add(item);
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);
},
<span id='Ext-ux-grid-filter-DateFilter-method-onInputKeyUp'> /**
</span> * @private
* Handler method called when there is a keyup event on an input
* item of this menu.
*/
onInputKeyUp : function (field, e) {
var k = e.getKey();
if (k == e.RETURN && field.isValid()) {
e.stopEvent();
this.menu.hide();
}
},
<span id='Ext-ux-grid-filter-DateFilter-method-onMenuSelect'> /**
</span> * Handler for when the DatePicker for a field fires the 'select' event
* @param {Ext.picker.Date} picker
* @param {Object} date
*/
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();
},
<span id='Ext-ux-grid-filter-DateFilter-method-getValue'> /**
</span> * @private
* Template method that is to get and return the value of the filter.
* @return {String} The value of this filter
*/
getValue : function () {
var key, result = {};
for (key in this.fields) {
if (this.fields[key].checked) {
result[key] = this.getFieldValue(key);
}
}
return result;
},
<span id='Ext-ux-grid-filter-DateFilter-method-setValue'> /**
</span> * @private
* Template method that is to set the value of the filter.
* @param {Object} value The value to set the filter
* @param {Boolean} preserve true to preserve the checked status
* of the other fields. Defaults to false, unchecking the
* other fields
*/
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);
},
<span id='Ext-ux-grid-filter-DateFilter-method-isActivatable'> /**
</span> * @private
* Template method that is to return <tt>true</tt> if the filter
* has enough configuration information to be activated.
* @return {Boolean}
*/
isActivatable : function () {
var key;
for (key in this.fields) {
if (this.fields[key].checked) {
return true;
}
}
return false;
},
<span id='Ext-ux-grid-filter-DateFilter-method-getSerialArgs'> /**
</span> * @private
* Template method that is to get and return serialized filter data for
* transmission to the server.
* @return {Object/Array} An object or collection of objects containing
* key value pairs representing the current configuration of the filter.
*/
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;
},
<span id='Ext-ux-grid-filter-DateFilter-method-getFieldValue'> /**
</span> * Get and return the date menu picker value
* @param {String} item The field identifier ('before', 'after', 'on')
* @return {Date} Gets the current selected value of the date field
*/
getFieldValue : function(item){
return this.values[item];
},
<span id='Ext-ux-grid-filter-DateFilter-method-getPicker'> /**
</span> * Gets the menu picker associated with the passed field
* @param {String} item The field identifier ('before', 'after', 'on')
* @return {Object} The menu picker
*/
getPicker : function(item){
return this.fields[item].menu.items.first();
},
<span id='Ext-ux-grid-filter-DateFilter-method-validateRecord'> /**
</span> * Template method that is to validate the provided Ext.data.Record
* against the filters configuration.
* @param {Ext.data.Record} record The record to validate
* @return {Boolean} true if the record is valid within the bounds
* of the filter, false otherwise.
*/
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) {
// keep track of the picker value separately because the menu gets destroyed
// when columns order changes. We return this value from getValue() instead
// of picker.getValue()
this.values[picker.itemId] = date;
this.fireEvent('update', this);
}
});
</pre>
</body>
</html>