I am working with ExtJS and I have a textfield ponent. I would like to disable only the inputEl of a textfield ponent (not the label).

If I use the setDisabled() method of the textfield, then it sets disabled the inputEl but also the label.

I have used also the setReadOnly() method, but it does not grey out the inputEl, only set as ReadOnly.

Is there a way to disable only the inputEl of a textfield ponent?

Thanks for your help.

I am working with ExtJS and I have a textfield ponent. I would like to disable only the inputEl of a textfield ponent (not the label).

If I use the setDisabled() method of the textfield, then it sets disabled the inputEl but also the label.

I have used also the setReadOnly() method, but it does not grey out the inputEl, only set as ReadOnly.

Is there a way to disable only the inputEl of a textfield ponent?

Thanks for your help.

• javascript
• extjs

Share Improve this question Follow edited Jan 31, 2013 at 11:50 Emil 7,2561818 gold badges8080 silver badges135135 bronze badges asked Jan 31, 2013 at 11:47 SergioKastroSergioKastro 88544 gold badges1515 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You will have to set a custom class to the disabledCls

.ux-item-disabled .x-form-field, .ux-item-disabled .x-form-display-field, .ux-item-disabled .x-form-trigger {
   filter: alpha(opacity=30);
   opacity: .3;
}

see JSFiddle

What about this one?

items: [{
  xtype: 'textfield',
  name: 'item',
  itemId: 'item',
  readOnly: true,
  listeners:{
    afterrender: function(f){
      c.inputEl.addCls('x-item-disabled');
    }
}]

You could even make it change dicamically if you include an if befor apply the class

I have got another answer from the Sencha forum (I thought it may be interesting to post it here also) Solution:

Use the setOpacity method

Ext.onReady(function () {
var panel =Ext.create('Ext.form.Panel', {
    title: 'Basic Form',
    renderTo: Ext.getBody(),
    bodyPadding: 5,
    width: 350,
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field',
        name: 'theField',
      disabled: true
    }]        
});

 panel.down('[xtype=textfield]').labelEl.setOpacity(1); });