View Full Version : Enable comboBox on button click?

15 Aug 2012, 9:05 AM
I have a disabled comboBox in a form panel, and I would like to enable it when the user clicks a button. I have tried to follow the example here (http://www.sencha.com/learn/getting-elements-and-components/) regarding Ext.get() but it doesn't work. My entire code is below--the important part is in the onButtonClick function.

Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',

height: 250,
width: 400,
bodyPadding: 10,
title: 'My Form',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
xtype: 'combobox',
anchor: '100%',
disabled: true,
id: 'box',
fieldLabel: 'Label'
xtype: 'button',
text: 'MyButton',
listeners: {
click: {
fn: me.onButtonClick,
scope: me


onButtonClick: function(button, e, options) {
Ext.get('box').dom.disabled = false; // Doesn't work


Tim Toady
15 Aug 2012, 9:33 AM
So you need to get a reference to the combo and call enable on it. Currently, you are getting a reference to the combo's element and manipulating the dom. The simplest way to achieve what you want (which I don't recommend), is to use Ext.getCmp( 'box' ).enable() in your onButtonClick listener.

The better way to do this is to do it in your controller. In the this.control (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.app.Controller-method-control) call in your controller's init method you should put the click listener on your button. Don't use ids. If you have to, use itemIds (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.AbstractComponent-cfg-itemId) instead. I would have a ref (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.app.Controller-cfg-refs) for your combo. It would also be good to have an alias (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.Class-cfg-alias) on the view so your ref and control selector (component queries (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.ComponentQuery)) are more specific.

15 Aug 2012, 9:40 AM
Very helpful thank you.