CODEWITHSUNDEEP
extjstextfield
ramya sri
ramya sri

Reputation: 125

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

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.

Upvotes: 2

Views: 7896

Answers (1)

Saket Patel
Saket Patel

Reputation: 6683

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
   }
    ...
}

Upvotes: 2

Related Questions