CODEWITHSUNDEEP
extjs
Proto
Proto

Reputation: 247

ExtJs 3 - Add listener

I would like to accomplish:

This is my ComboBox:

var typeIDcombo = new Ext.form.ComboBox({
        fieldLabel: 'Type',
        name: 'typeid',
        store: typeIdData,
        displayField:'name',
        valueField: 'typeid',
        hiddenName: 'typeid',
        typeAhead: false,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Selecteer het type link',
        forceSelection: true,
        selectOnFocus:true,
        allowBlank: false,
        value: 'Selecteer een type',
    });

I have add listeners to my var form = new Ext.FormPanel. But this does not work.

listeners: [{
    'select' : function(field,nval,oval) {
     alert(field);
    }],

Does someone know a solution for this? Thanks in advance.

Upvotes: 3

Views: 17922

Answers (3)

MMT
MMT

Reputation: 2216

Try this:

typeIDcombo.on('select', function(combo) {
    if (combo.value == 'ABC') { 
        Ext.getCmp('field').show();
        Ext.getCmp('form').doLayout();
    } else {
        Ext.getCmp('field').hide();
        Ext.getCmp('form').doLayout();
    }
});

Upvotes: 4

sra
sra

Reputation: 23975

As Warung wrote, that should do it:

var typeIDcombo = new Ext.form.ComboBox({
    fieldLabel: 'Type',
    name: 'typeid',
    store: typeIdData,
    displayField:'name',
    valueField: 'typeid',
    hiddenName: 'typeid',
    typeAhead: false,
    mode: 'local',
    triggerAction: 'all',
    emptyText:'Selecteer het type link',
    forceSelection: true,
    selectOnFocus:true,
    allowBlank: false,
    value: 'Selecteer een type',
    listeners: [{
        select : function(field,nval,oval) {
            alert("Hit");
    }]
});

Upvotes: 2

Bigfei
Bigfei

Reputation: 116

First, the listener on FormPanel is not necessary cause the FormPanel will not fire any 'select' events on its own events. You should add the listeners on the components inside the FormPanel to listen the specified events fired by the component.

For your case, it is simple as the follows: 

var typeIDcombo = new Ext.form.ComboBox({
    fieldLabel: 'Type',
    name: 'typeid',
    store: typeIdData,
    displayField:'name',
    valueField: 'typeid',
    hiddenName: 'typeid',
    typeAhead: false,
    mode: 'local',
    triggerAction: 'all',
    emptyText:'Selecteer het type link',
    forceSelection: true,
    selectOnFocus:true,
    allowBlank: false,
    value: 'Selecteer een type',
    listeners:{
         select:function(field, newVal, oldVal){
             if(newVal == 'HIDE_SOMETHING'){
                  Ext.getCmp('fieldId').hide();
                  Ext.getCmp('formId').doLayout();

             }
             else if(newVal == 'SHOW_SOMETHING'){
                  Ext.getCmp('fieldId').show();
                  Ext.getCmp('formId').doLayout();

             }
         }
    }
});

Upvotes: 1

Related Questions