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
Author by
user2747797
Updated on June 04, 2022Comments
-
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?