[CLOSED] FilterHeader and Enter key event

[matt]

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]

You can bind the enter key on the fields, can't you?..

Look at this example: 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]

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]

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]

@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]

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]

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]

I choose "Ext.define" :) Works perfectly !

Thank you,