How to make text field non editable in Sencha Touch

Question

I have used the following properties to make an textfield and disable it for user edit.

disabled: true

below is my code for the Xtype decleration.

xtype : 'passwordfield',
name : 'password',
id: 'password',
disabled: true,
label : 'Password',
placeHolder :'Password',
useClearIcon : false

it appears something as shown in below image. The label is grayed out. Please let me know how can i make it non-editable and label will remain same.

enter image description here

Edit-1: After, Couple of searches in Stack overflow and sencha forum i have found the below code which is able to make my text field non-editable but now it is static in nature.

 listeners: {
            afterrender: function(ele) {
                     ele.fieldEl.dom.readOnly = true;
          }
     }

We can set the property one time, but it doesn't have any method to set dynamically. I need dynamically as i have to sometimes make user to edit and sometimes to make it. disabled.

Any other approach to make text field non editable in Sencha Touch is appreciated.

score 9 · Answer 1 · answered Nov 26 '12 at 19:51

9

readOnly: true

thx, that works fine for me. now i can use a textfield like a label. using a simple field was causing problem with formpanel.data

answered Nov 26 '12 at 19:51

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

5

Update

readOnly should be part of initial settings eg:

xtype : 'passwordfield',
name : 'password',
id: 'password',
disabled: true,
label : 'Password',
placeHolder :'Password',
useClearIcon : false,
readOnly: true

Use readOnly :

readOnly: true

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 28 '11 at 08:49

Sarfraz

377,238
77
533
578

.this has not effect, i have tried this also. I have edited my question take a look at the updated edit section. – Nilanchala Oct 28 '11 at 08:54
also we dont have any readonly property for Ext.form.Text class. – Nilanchala Oct 28 '11 at 08:56
@Neel is the readOnly or readonly property working for you? Case sensitive has no effect. I just use disabled:true – Renato H. Nov 03 '11 at 08:55
u can also use listeners: { afterrender: function(ele) { ele.fieldEl.dom.readOnly = true; } } – Nilanchala Nov 03 '11 at 09:54
Also tried that. I see now. Your talking about sencha touch 1? I Got confused by the sencha-touch-2 tag.. Tnx anyway! – Renato H. Nov 03 '11 at 10:50

score 1 · Accepted Answer · answered Feb 03 '12 at 14:16

The setting with fieldEl.dom.readOnly is not really static as most people think, because the readOnly flag is not a Sencha-specific option. That means: You save your item you want to make read-only and change its status dynamically, then add another control which sets fieldEl.dom.readOnly to false, and voila, your item is editable again.

How to make text field non editable in Sencha Touch

3 Answers3

Update