CODEWITHSUNDEEP
javascriptextjs
SergioKastro
SergioKastro

Reputation: 875

How to disable the inputEl of a textfield in ExtJS?

I am working with ExtJS and I have a textfield component. I would like to disable only the inputEl of a textfield component (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 component?

Thanks for your help.

Upvotes: 3

Views: 6097

Answers (3)

OneThatKnowsNothing
OneThatKnowsNothing

Reputation: 11

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

Upvotes: 1

SergioKastro
SergioKastro

Reputation: 875

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

Upvotes: 0

sra
sra

Reputation: 23973

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

Upvotes: 2

Related Questions