Clever Geek Handbook

Added an input event to the search textbox of the EXT JS application to start the search

Hi I have below code, my input event never fires, any help would 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 it using:

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


source to share


2 answers


Just to indicate how to add such a listener. There is an event specialkey

that can be used for such a case

fieldinstance.on('specialkey', function(f, e){
    if (e.getKey() == e.ENTER) {
        // your action
    }
});


Anyway I recommend using the ux component that @Geronimo mentioned

+2


source


I'm not sure why Sencha never included the Ext.ux.form.SearchField

API in the docs, but the component was included in all versions of the framework used. It is configured to fire an event submit

and cancel

has corresponding search and cancel buttons attached to the field.

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

I would recommend using this component instead of trying to create your own search box. I usually override the default search function to suit my own needs, but there were a few scenarios where I didn't need to either.

If you add an assertion statement at the top of the JS component, you can create it like any other (non-UX) component:

eg:

Approval required:



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

Create a search box in the panel panel at the bottom of the panel:

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 problems with a requirement, you can 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...'
});
+6


source






More articles:


All Articles