How to change the fieldCls of a textfield dynamically in extjs?

Question

In our application we have a textfield and a checkbox. By default textfield should be readonly. Whenever check box is checked, textfield should be editable.

We are able to do the above mentioned requirement. But we also have to show textfield in such a way that users should feel they can not edit it, when it is read only.

We used the below code for this:

{
   xtype:'textfield',
   id:'textfieldid',
   readOnly:true,
   fieldCls:'x-item-disabled'
    ...
}


{
    xtype:'checkbox',
    listeners:{
        change:function(thisCmp,newValue,oldValue){
                if(newValue==true){
                    Ext.getCmp('textfieldid').addCls('x-item-disabled');
                } else {
                    Ext.getCmp('textfieldid').removeCls('x-item-disabled');
                }
            }
    }
}

But some how i am not able to get it working.

Could anyone please suggest the way to solve it?

Actually I need to submit that field. If it is disabled, that field will not be submitted. So I tried with setting fieldCls dynamically.

thanks for identifying it. It was copied by mistake. Actually while running the code it was not there. removed it. — ramya sri

Saket Patel Saket Patel · Accepted Answer · 2013-03-15T20:08:02

can't you use setDisabled method of Ext.form.field.Text?

{
    xtype:'checkbox',
    listeners:{
        change:function(thisCmp,newValue,oldValue){
             Ext.getCmp('textfieldid').setDisabled(newValue);
        }
    }
}

and also don't specify fieldCls:'x-item-disabled' as config for TextField that will be automatically managed by setDisabled method, and if you want to initially render text field as disabled then you can use disabled : true in config like this

{
   xtype:'textfield',
   id:'textfieldid',
   disabled: true
    ...
}

Another Option:

you are initially using fieldCls property to specify disable class which can be wrong instead you could do something like this

{
   xtype:'textfield',
   id:'textfieldid',
   readOnly:true,
   listeners : {
       afterrender : function() {
            this.addCls('x-item-disabled');
       },
       scope : this
   }
    ...
}

How to change the fieldCls of a textfield dynamically in extjs?

1 Answers