Example Usage:
- *
-var filters = new Ext.ux.grid.GridFilters({
+ *
+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 DateMenu configs
+ // any DatePicker configs
},
active: true // default is false
@@ -31,7 +25,11 @@ var filters = new Ext.ux.grid.GridFilters({
});
*
*/
-Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
+Ext.define('Ext.ux.grid.filter.DateFilter', {
+ extend: 'Ext.ux.grid.filter.Filter',
+ alias: 'gridfilter.date',
+ uses: ['Ext.picker.Date', 'Ext.menu.Menu'],
+
/**
* @cfg {String} afterText
* Defaults to 'After'.
@@ -91,52 +89,55 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
* Defaults to 'On'.
*/
onText : 'On',
-
+
/**
* @cfg {Object} pickerOpts
* Configuration options for the date picker associated with each field.
*/
pickerOpts : {},
- /**
+ /**
* @private
* Template method that is to initialize the filter and install required menu items.
*/
init : function (config) {
- var menuCfg, i, len, item, cfg, Cls;
+ var me = this,
+ pickerCfg, i, len, item, cfg;
- menuCfg = Ext.apply(this.pickerOpts, {
- minDate: this.minDate,
- maxDate: this.maxDate,
- format: this.dateFormat,
+ pickerCfg = Ext.apply(me.pickerOpts, {
+ xtype: 'datepicker',
+ minDate: me.minDate,
+ maxDate: me.maxDate,
+ format: me.dateFormat,
listeners: {
- scope: this,
- select: this.onMenuSelect
+ scope: me,
+ select: me.onMenuSelect
}
});
- this.fields = {};
- for (i = 0, len = this.menuItems.length; i < len; i++) {
- item = this.menuItems[i];
+ me.fields = {};
+ for (i = 0, len = me.menuItems.length; i < len; i++) {
+ item = me.menuItems[i];
if (item !== '-') {
cfg = {
itemId: 'range-' + item,
- text: this[item + 'Text'],
- menu: new Ext.menu.DateMenu(
- Ext.apply(menuCfg, {
- itemId: item
- })
- ),
+ text: me[item + 'Text'],
+ menu: Ext.create('Ext.menu.Menu', {
+ items: [
+ Ext.apply(pickerCfg, {
+ itemId: item
+ })
+ ]
+ }),
listeners: {
- scope: this,
- checkchange: this.onCheckChange
+ scope: me,
+ checkchange: me.onCheckChange
}
};
- Cls = Ext.menu.CheckItem;
- item = this.fields[item] = new Cls(cfg);
+ item = me.fields[item] = Ext.create('Ext.menu.CheckItem', cfg);
}
- //this.add(item);
- this.menu.add(item);
+ //me.add(item);
+ me.menu.add(item);
}
},
@@ -145,7 +146,7 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
this.fireEvent('update', this);
},
- /**
+ /**
* @private
* Handler method called when there is a keyup event on an input
* item of this menu.
@@ -154,36 +155,36 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
var k = e.getKey();
if (k == e.RETURN && field.isValid()) {
e.stopEvent();
- this.menu.hide(true);
- return;
+ this.menu.hide();
}
},
/**
- * Handler for when the menu for a field fires the 'select' event
- * @param {Object} date
- * @param {Object} menuItem
- * @param {Object} value
+ * Handler for when the DatePicker for a field fires the 'select' event
+ * @param {Ext.picker.Date} picker
* @param {Object} picker
+ * @param {Object} date
*/
- onMenuSelect : function (menuItem, value, picker) {
+ onMenuSelect : function (picker, date) {
var fields = this.fields,
- field = this.fields[menuItem.itemId];
-
+ 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 && fields.before.menu.picker.value < value) {
+ if (field == fields.after && this.getFieldValue('before') < date) {
fields.before.setChecked(false, true);
- } else if (field == fields.before && fields.after.menu.picker.value > value) {
+ } else if (field == fields.before && this.getFieldValue('after') > date) {
fields.after.setChecked(false, true);
}
}
this.fireEvent('update', this);
+
+ picker.up('menu').hide();
},
/**
@@ -195,7 +196,7 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
var key, result = {};
for (key in this.fields) {
if (this.fields[key].checked) {
- result[key] = this.fields[key].menu.picker.getValue();
+ result[key] = this.getFieldValue(key);
}
}
return result;
@@ -208,12 +209,12 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.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.fields[key].menu.picker.setValue(value[key]);
+ this.getPicker(key).setValue(value[key]);
this.fields[key].setChecked(true);
} else if (!preserve) {
this.fields[key].setChecked(false);
@@ -265,16 +266,16 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
* @return {Date} Gets the current selected value of the date field
*/
getFieldValue : function(item){
- return this.fields[item].menu.picker.getValue();
+ return this.getPicker(item).getValue();
},
-
+
/**
* 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.picker;
+ return this.fields[item].menu.items.first();
},
/**
@@ -287,16 +288,17 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
validateRecord : function (record) {
var key,
pickerValue,
- val = record.get(this.dataIndex);
-
+ val = record.get(this.dataIndex),
+ clearTime = Ext.Date.clearTime;
+
if(!Ext.isDate(val)){
return false;
}
- val = val.clearTime(true).getTime();
-
+ val = clearTime(val, true).getTime();
+
for (key in this.fields) {
if (this.fields[key].checked) {
- pickerValue = this.getFieldValue(key).clearTime(true).getTime();
+ pickerValue = clearTime(this.getFieldValue(key), true).getTime();
if (key == 'before' && pickerValue <= val) {
return false;
}
@@ -310,4 +312,4 @@ Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
}
return true;
}
-});
\ No newline at end of file
+});