Enable/Disable text field on checkbox selection ExtJS

Question

I'm using ExtJS 3 and I need to enable/disable a specific text field when I select/de-select a checkbox, like in the example showed below:

{ 
    fieldLabel: 'myCheckBox'
    xtype: 'checkbox',
    name: 'myCheckBox'
},{
    fieldLabel: 'myTextField'
    xtype: 'textfield',
    name: 'myTextField',
    disabled: true
}

As I understand it I have to use a listener in 'myCheckBox' like this:

listeners: {
   change: function() {

   }
}

But I don't know what parameters to pass to my function and how to target 'myTextField' and .enable() .disable() it. Can you please help me? Thank you very much.

---

Solution based on answers (thank you):

listeners: {
     change: function(cb, checked) {
         Ext.getCmp('myTextField').setDisabled(!checked);
 }
 }

and added the id tag to the textfield component like this:

id: 'myTextField'

Solution 1

If you are not sure what to pass as a parameter than Ext.getCmp() gives you the component. It takes id of the component as a parameter. In your case you have to assign id to textfield and can get it on change event as Ext.getCmp('myTextField'). Where myTextField is an id of textfield. Name and Id of a component can be same.

listeners: {
 change: function() {
     Ext.getCmp('myTextField').disable();
     //or
     Ext.getCmp('myTextField').enable();
 }
}

Solution 2

There are a few ways to reference myTextField. The easiest is probably to give the field a ref (note that this approach does not work in ExtJS 4, where you are better off with a component query):

{
    fieldLabel: 'myTextField'
    xtype: 'textfield',
    name: 'myTextField',
    ref: '../myTextField'
    disabled: true
}

Setting the ref will cause the textfield component to be referenced in a property of its owner or one of its ancestors. So then your listener can simply be something like this (the parameters passed to this function are listed in the doc):

change: function(cb, checked) {
    me.myTextField.setDisabled(!checked);
}

You might need to tweak the ref path depending on your component hierarchy.

Solution 3

Example:

1. Using setDisabled API: theStudentForm.findField('stud_name').setDisabled(true);

2. Using setOpacity API: theStudentForm.findField('stud_name').labelEl.setOpacity(1);

3. Using readOnly API: theStudentForm.findField('stud_name').setReadOnly(true);