Establecer y eliminar la propiedad de solo lectura en 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);

Al editar

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.

preguntado el 31 de julio de 12 a las 13:07

5 Respuestas

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);

Al editar

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

Respondido 01 ago 12, 07:08

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

Espero que esto ayude.

Respondido 31 Jul 12, 16:07

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);

Respondido 31 Jul 12, 13:07

When disabling, it will turn back to gray color. - Sarika. S

Are you saying you do not wish the fields to be greyed out? If not then apply a style using the fieldClass: config option to change this - Gunnx

To set disable:

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

To remove disable:

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

Respondido 25 Oct 13, 15:10

It helps to change the readOnly property on run time:

component.el.dom.readOnly = true; 

Respondido 13 ago 17, 08:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.