Added an enter event to EXT JS Application search text box to fire search

Question

Hi I have the code below my my enter event is never triggering, any help will be appreciated.

    items: [{
            xtype: 'textfield',
            id: 'idhere',
            name: 'namehere',
            fieldLabel: 'lablehere:',
            width: 500,
            handler: {
                  key:13,
                  fn : function () {
                  if (e.getKey() == e.ENTER) {
                           alert("You pressed an enter button in text field.");
    }
                  }

            }
        },{
            xtype: 'button',
            text: 'texttodisplay',
            handler: function() {
                                  //my function.
            }

        }]

I actually solved this by using:

listeners:  {
                specialkey: function (f,e) {    
                     if (e.getKey() == e.ENTER) {
                        loadData();
                    }
                }
            }

Answer 1

I am not sure why Sencha never included Ext.ux.form.SearchField in the API docs but the component has been included in all versions of the framework I've used. It is set-up to fire a submit and a cancel event and includes the appropriate search and cancel buttons attached to the field.

You can find it in your framework files at: [extjs-root]\examples\ux\form\SearchField.js

I would recommend using that component instead of trying to create your own searchfield. I usually override the default search function to fit my own needs but there have been a few scenarios where I did not need to also.

If you add a requires statement at the top of your component JS you can create it like any other (non-UX) component:

E.g:

Requires statement:

Ext.define('MyApp.view.SomeComponent', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mycomponent',
    requires: [
        'Ext.ux.form.SearchField'
    ],
    ...

Creating a search field in the panel's bottom toolbar:

bbar: {
    items: [{
        text: 'A Button'
    }, {
        text: 'Another Button'
    }, '-', {
        xtype: 'searchfield', // <- can use this xtype with requires stmt
        itemId: 'search',
        width: 250,
        emptyText: 'Enter first and last name to search...'
    }]
},
...

If you have trouble with the requires statement you could also just create it like this:

var search = Ext.create('Ext.ux.form.SearchField', {
    itemId: 'search',
    width: 250,
    emptyText: 'Enter first and last name to search...'
});