Adding a searchfield keyup listener on object creation?

Question

In another question someone explained how to create a generic search box for a Nested List.

How to add a Search Bar to a Nested List?

How can I add/set a keyup listener to this class at the time of creation? I could add the listener on the class but I want to reuse this class on several screens.

Ext.define('Sencha.view.SearchBar', {
    extend: 'Ext.Toolbar',
    xtype : 'searchbar',
    requires: ['Ext.field.Text', 'Ext.field.Search'],

    config: {
        ui: 'searchbar',
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'searchfield',
                placeHolder: 'Search...',
                listeners: {
                    scope: this,
                    keyup: function(field) {
                        console.log(field.getValue());
                    }
                }
            }
        ]
    }
});

Can I add the listener directly to the searchfield at this point?

var searchBar = nestedList.add({
    docked: 'top',
    xtype: 'searchbar',
    height: 100
});

I also tried adding a listener like this but I think I need to be able to access the field directly

searchBar.on('keyup', function(field) {
                  console.log("foo...");
                  console.log(field.getValue());
                }, this);

====================================

[Update] Adding the delegation to the class:

Ext.define('Sencha.view.SearchBar', {
    extend: 'Ext.Toolbar',
    xtype : 'searchbar',
    requires: ['Ext.field.Text', 'Ext.field.Search'],
    config: {
        ui: 'searchbar',
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'searchfield',
                placeHolder: 'Search...'
            }
        ]
    },
    initialize: function() {
        this.on({
            scope: this,
            delegate: 'searchfield',
            keyup: 'onSearchFieldKeyUp'
        });
    },
    onSearchFieldKeyUp: function(field) {
        console.log("Base Class");
        console.log(field.getValue());
    }
});

Next instantiate 'searchbar' with our own method to override default onSearchFieldKeyUp

 var searchBar = this.nestedList.add({
            docked: 'top',
            xtype: 'searchbar',
            height: 75,
            id: 'searchbarId'

        });

I'm a little new to Javascript. Sorry if I'm missing the obvious. Are you just saying add listeners:{} right after the height: 100? I'll give that a try... — user568866
What I described didn't work. I included all of the source code. I think I need to directly address the searchfield from items:[]. — user568866
To answer your original question, I think it's the Javascript issue of changing something all day long without any error messages as to what the problem might be. — user568866

rdougan rdougan · Accepted Answer · 2012-05-04T23:04:38

Add the listener inside the initialize function in your class:

initialize: function() {
    this.on({
        scope: this,
        delegate: 'searchbar',
        keyup: 'onSearchFieldKeyUp'
    });
},

onSearchFieldKeyUp: function(field) {
    console.log(field.getValue());
}

Notice I'm using the delegate property to add the listener onto the searchfield component (via xtype);

Adding a searchfield keyup listener on object creation?

1 Answers