Geek asks and answers

ExtJs 3 - Add a listener

I would like to execute:

  • When any item is selected in ComboBox, hide some other field in the form or full 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 am adding listeners to my form var = new Ext.FormPanel. But that does not work.

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

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

+3
source share
3 answers

First, the FormPanel listener is not needed, because the FormPanel will not fire any "select" events on its own events. You must add listeners to the components inside the FormPanel to listen for the specified events that the component triggers.

In your case, it is simple as shown below:

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

             }
         }
    }
});
+1
source

Try the following:

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

, :

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

More articles:


All Articles