title: How to make text field non editable in Sencha Touch
body: <p>I have used the following properties to make an textfield and disable it for user edit.</p>
  <p><strong>disabled: true</strong></p>
  <p>below is my code for the Xtype decleration.</p>
  <pre><code>xtype : 'passwordfield',
  name : 'password',
  id: 'password',
  disabled: true,
  label : 'Password',
  placeHolder :'Password',
  useClearIcon : false
  </code></pre>
  <p>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.</p>
  <p><img src="https://i.stack.imgur.com/s4gE3.png" alt="enter image description here" /></p>
  <p><strong>Edit-1:</strong>
  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.</p>
  <pre><code> listeners: {
              afterrender: function(ele) {
                       ele.fieldEl.dom.readOnly = true;
            }
       }
  </code></pre>
  <p><strong>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.</strong> disabled.</p>
  <p>Any other approach to make text field non editable in Sencha Touch is appreciated.</p>