Display combo box when checkbox is checked - Extjs

14,254

I would use the change event: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox-event-change

listeners: {
    change: function(checkbox, newValue, oldValue, eOpts) {
        var combo = checkbox.up('form').down('combobox');
        if (newValue) {
            combo.show();
        } else {
            combo.hide();
        }
    }
}

Also, please notice the use of the hierarchy navigation methods up() and down(). Using these (or other related methods) to find the component is much more preferable than using hard-coded component Ids.

Here's a working example of your code: https://fiddle.sencha.com/#fiddle/ua

Share:
14,254
user2747797
Author by

user2747797

Updated on June 04, 2022

Comments

  • user2747797
    user2747797 almost 2 years

    I have setup a checkbox and a combobox and I am trying to set up a functionality - when a user checks the checkbox the combobox has to appear. I am new to extjs and I am having issues setting up the function for this functionality.

    Ext.onReady(function() {

    var tests = [
        ['Test1'],
        ['Test3'],
        ['Test2']
    ];
    Ext.define('Testfile.model.Test', {
        extend: 'Ext.data.Model',
        fields: ['test']
    });
    var testsStore = new Ext.data.Store({
        model: 'Testfile.model.Test',
        proxy: {
            type: 'memory',
            reader: {
                type: 'array'
            }
        },
        data: tests
    });
    var form = Ext.create('Ext.form.Panel', {
        renderTo: document.body,
        bodyPadding: 10,
        width: 550,
        style: 'margin:16px',
        height: 300,
        title: 'Testing example',
        items: [{
    
              xtype: 'checkbox',
              name: 'system',
              boxLabel: 'Production (PACTV)',
              iputValue: 'production',
    
            listeners: {
                check: function (checkbox, isChecked) {
                        var sample = Ext.getCmp('secondComboID');
                    }
    
            }
        }, {
            xtype: 'combobox'
            fieldLabel: 'Select Test',
            id: 'secondComboID',
            store: testsStore,
            valueField: 'id',
            displayField: 'test',
            typeAhead: true,
            forceSelection: true,
            allowBlank: false,
            editable: true,
            triggerAction: 'all',
            lastQuery: ''
        }]
    });
    Ext.getBody().add(me.form);
    

    })

    Can someone please suggest a fix to the script?