PDA

View Full Version : [CLOSED] FilterHeader and Enter key event



matt
Jan 18, 2015, 9:19 PM
Hi,

Is it possible to add Enter key handler for FilterHeader ?

My scenario:

AutoReload is disabled. User type filter criteria into one of the filter header text boxes. User can go to another column and type another filter criteria. When user press enter while filter header text box is focused then event is fired. The event will be calling store.load().

Thank you,

fabricio.murta
Jan 18, 2015, 10:53 PM
You can bind the enter key on the fields, can't you?..

Look at this example: BorderLayout Regions Toggle (http://examples.ext.net/#/Keys/KeyMap/BorderLayout_Regions_Toggle/)

I believe you can join it with the logic of the code:


<ext:TextField runat="server">
<ext:KeyMap runat="server">
<Binding>
<ext:KeyBinding>
<Keys>
<ext:Key Code="ENTER"></ext:Key>
</Keys>
</ext:KeyBinding>
</Binding>
</ext:KeyMap>
</ext:TextField>


To bind the enter key to your will. :)

hogaf
Jan 19, 2015, 4:37 AM
Hi @matt,

You might find it useful to override the default behavior:



Ext.net.FilterHeader.override({
initField: function (field, column) {
this.callParent(arguments);

if (field && (!field.isXType("displayfield") || field.filterFn)) {
this.applyReloadOnEnter(field);
}
},

applyReloadOnEnter: function (field) {
this.autoReload = false;
field.enableKeyEvents = true;
field.initEvents();
field.on('keyup', function (item, e) {
if (e.getCharCode() == Ext.EventObject.ENTER) {
this.applyFilter();
}
}, this);
}
});

matt
Jan 19, 2015, 7:41 AM
Thank you for both solutions. I like the overriding.

I have got funny behavior... and trying to figure out what is wrong. It might be problem with my implementation only, but has anyone seen that message:

Requested value 'auto' was not found.

I am receiving that (ajax) exception when first time press enter (which after overriding calls applyFilter()).

hogaf
Jan 19, 2015, 10:18 AM
@matt,

It seems capturing the field's value is buffered (500 ms is the default value) and it is called upon field change event. So if we apply the onFieldChange body at the time of calling applyFilter that would do the trick.



Ext.net.FilterHeader.override({
initField: function (field, column) {
this.callParent(arguments);

if (field && (!field.isXType("displayfield") || field.filterFn)) {
this.applyReloadOnEnter(field);
}
},

applyReloadOnEnter: function (field) {
this.autoReload = false;
field.enableKeyEvents = true;
field.initEvents();
field.on('keyup', function (item, e) {
if (e.getCharCode() == Ext.EventObject.ENTER) {
if (this.isSmartFilterValid(item)) {
this.runFiltering();
}
this.applyFilter();
}
}, this);
}
});

matt
Jan 19, 2015, 11:24 AM
Works like a charm now! Thank you.

One more question. What is the best practice to override Ext.net.FilterHeader ?

When exactly?
It is not available straight away.

I had to do it when my view was loaded. Worked fine until I have noticed that overriding it every time my view was loaded, then listeners were added every time. (after few loads and unloads the event was fired few times ... )

I have worked around the problem by adding my flag to Ext.net.FilterHeader, but I am sure that is not good solution.


if (!Ext.net.FilterHeader.wasOverriden) {
Ext.net.FilterHeader.wasOverriden = true

Ext.net.FilterHeader.override({ ... });
}

hogaf
Jan 19, 2015, 1:14 PM
Since the target is a class declared using Ext.define, then the override method of that class is called upon Ext.override So it's better to not directly use of override method which is deprecated As of Extjs 4.1. It's better to use Ext.define instead:

You can find more about it in the following link:
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext
(Look at the override method)

Also as you may know there are a couple of ways to modify the default behavior in Extjs like extending, Overriding per instance and on prototype.
I'd suggest you to take a look at them.



Ext.define('Override.net.FilterHeader', {
override: 'Ext.net.FilterHeader',
initField: function (field, column) {
...
}
});

matt
Jan 19, 2015, 2:11 PM
I choose "Ext.define" :) Works perfectly !

Thank you,