CODEWITHSUNDEEP
javascriptextjsextjs4.2
user191542
user191542

Reputation: 285

Ext.apply dont work on listeners in ExtJS

I have this fiddle

http://jsfiddle.net/beQtF/1/

Now if i write listener code directly in the element then it works

By if apply it then it won't work

 Ext.apply(cbox, {
       listeners: {
           'select': function (combo, record, index) {
               alert(combo.getValue());
           }
       }
   });

The above code don't work

Upvotes: 1

Views: 738

Answers (1)

aga
aga

Reputation: 29416

In Ext.JS listeners are added in the constructor, therefore you can't configure the component after it was created. You can create ComboBox config separately, apply new set of listeners to it, and create a ComboBox with extended config, like so: 

var comboConfig = {
        id: 'searchInput',
        fieldLabel: 'Search:',
        enableKeyEvents: true,
        submitEmptyText: false,
        emptyText: 'search...',
        valueField: 'abbr',
        displayField: 'name',
        width: '100%',
        store: {
           fields: ['abbr', 'name'],
           data: [{
               "abbr": "AL",
                   "name": "Alabama"
           }, {
               "abbr": "AK",
                   "name": "Alaska"
           }, {
               "abbr": "AZ",
                   "name": "Arizona"
           }]
        }
};   

Ext.apply(comboConfig, {
   listeners: {
       'select': function (combo, record, index) {
           alert(combo.getValue());
       }
   }
});

var cbox = Ext.create('Ext.form.field.ComboBox', comboConfig);
Ext.create('Ext.form.Panel', {
    items: [cbox],
    frame: true,
    renderTo: Ext.getBody()
});

Or, as CD pointed out, you can add them with on function:

cbox.on({
    select: function(combo, record, index) {
        alert(combo.getValue());
    }
});

Upvotes: 2

Related Questions