CODEWITHSUNDEEP
extjsreadonly
nr.iras.sk
nr.iras.sk

Reputation: 8498

Set and remove readonly property in ext Js

In extJs I need to disable one field until edit button is clicked. 

xtype:'textfield',
fieldLabel: 'Address',
name:'streetAddress',
labelWidth: 48,                         
maxLength: 100,                         
cls: 'appAddresscls',
id: 'resume-applicantdetails-view-address',
allowBlank : false,
//readOnly:true,
skipValue:true

When loading I called

Ext.getCmp('resume-applicantdetails-view-address').getEl().dom.setAttribute('readOnly', true);

When editing 

Ext.getCmp('resume-applicantdetails-view-address').getEl().dom.removeAttribute('readOnly');

But the field is always in edit mode. Actually I try this because, the disabled fields in IE appears in gray color.

Upvotes: 4

Views: 29637

Answers (5)

Vishnu Suresh
Vishnu Suresh

Reputation: 51

It helps to change the readOnly property on run time:

component.el.dom.readOnly = true;

Upvotes: 0

kbhuvana
kbhuvana

Reputation: 3

To set disable:

Ext.get('resume-applicantdetails-view-address').set({disabled:'disabled'});

To remove disable:

Ext.get('resume-applicantdetails-view-address').set({disabled:''});

Upvotes: 0

nr.iras.sk
nr.iras.sk

Reputation: 8498

xtype:'textfield',
fieldLabel: 'Address',
name:'streetAddress',
labelWidth: 48,                         
maxLength: 100,                         
cls: 'appAddresscls',
id: 'resume-applicantdetails-view-address',
allowBlank : false,
readOnly:false,
skipValue:true

When loading I called

Ext.getCmp('resume-applicantdetails-view-address').setReadOnly(true);

When editing

Ext.getCmp('resume-applicantdetails-view-address').setReadOnly(false);

Upvotes: 14

netemp
netemp

Reputation: 4185

You can keep disabled:true and add the following css in your page to make such fields appear normal as others:

.x-item-disabled .x-form-item-label,
.x-item-disabled .x-form-cb-label {
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
     opacity: 0.9; 
 }

Hope this helps.

Upvotes: 2

gunnx
gunnx

Reputation: 1219

Set the field to be disabled: true in config then in the edit button call function to renable.

Ext.getCmp('resume-applicantdetails-view-address').setDisabled(false);

Upvotes: 0

Related Questions