How to make text field non editable in Sencha Touch

4
votes

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.

3
sencha-touchextjs4extjssencha-touch-2

3 Answers

8
votes
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

4
votes

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
1
votes

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.