Thanks a lot for this solution Daniil! I've made slight changes to the override to bring the check item event logic in line with the date picker menus' one.
It seems that combining this thread with
http://forums.ext.net/showthread.php...ional-behavior would make a perfect sense.
Ext.ux.grid.filter.DateFilter.override({
menuItems: ['after', 'before', '-', 'on'],
onCheckChange: function (checkItem, value, options) {
var fields = this.fields,
field = this.fields[checkItem.menu.itemId],
selectedPicker = field.menu.picker,
beforePicker = fields.before.menu.picker,
afterPicker = fields.after.menu.picker;
// Important! Set hideOnClick to "false" in order for the menu to stay up!
checkItem.hideOnClick = false;
if (field == fields.on) {
fields.before.setChecked(false, true);
fields.after.setChecked(false, true);
} else {
fields.on.setChecked(false, true);
if (field == fields.after && beforePicker.value < selectedPicker.value) {
fields.before.setChecked(false, true);
} else if (field == fields.before && afterPicker.value > selectedPicker.value) {
fields.after.setChecked(false, true);
}
}
if (this.active && this.isActivatable()) {
this.fireEvent('update', this);
}
this.setActive(this.isActivatable());
},
onMenuSelect: function (menuItem, value, picker) {
var fields = this.fields,
field = this.fields[menuItem.ownerCt.itemId];
field.setChecked(true, 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) {
fields.before.setChecked(false, true);
} else if (field == fields.before && fields.after.menu.picker.value > value) {
fields.after.setChecked(false, true);
}
}
this.fireUpdate();
}
});
var onActivateFilter = function (filter, options) {
//alert('act');
};
var onUpdateFilter = function (filter, options) {
//alert('upd');
};
var onDeactivateFilter = function (filter, options) {
//alert('deact');
filter.suspendEvents(false);
switch (filter.type) {
case "boolean":
break;
case "date":
filter.menu.items.each(function (item) {
if (item instanceof Ext.menu.CheckItem)
item.setChecked(false);
});
break;
case "list":
filter.menu.items.each(function (item) {
item.setChecked(false);
});
break;
case "numeric":
filter.menu.items.each(function (item) {
if (item instanceof Ext.form.NumberField)
item.setValue("");
});
break;
case "string":
filter.menu.items.each(function (item) {
item.setValue("");
});
break;
};
filter.resumeEvents();
// Do some other processing here;
};
<ext:DateFilter DataIndex="UpdatedDate">
<DatePickerOptions runat="server" TodayText="Now">
<CustomConfig>
<ext:ConfigItem Name="hideOnClick" Value="false" Mode="Raw" />
</CustomConfig>
</DatePickerOptions>
<Listeners>
<Deactivate Fn="onDeactivateFilter" />
<Activate Fn="onActivateFilter" />
<Update Fn="onUpdateFilter" />
</Listeners>
</ext:DateFilter>