ExtJs 3 - Add listener

Question

I would like to accomplish:

• When some item in the ComboBox is selected hide some other field in the form or a complete div.

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.

Answer 1

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();
    }
});

Answer 2

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");
    }]
});

Answer 3

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();

             }
         }
    }
});