<!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> * Filter by a configurable Ext.picker.DatePicker menu
|
*
|
* Example Usage:
|
*
|
* 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
|
* }]
|
* });
|
*/
|
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', {
|
plain: true,
|
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 = {};
|
},
|
|
<span id='Ext-ux-grid-filter-DateFilter-method-onCheckChange'> onCheckChange : function (item, checked) {
|
</span> 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> * 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;
|
},
|
|
<span id='Ext-ux-grid-filter-DateFilter-method-onPickerSelect'> onPickerSelect: function(picker, date) {
|
</span> // 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>
|