How to grey out label in Extjs

Question

How to Dynamically grey out Labels in Extjs.

Ext.create('Ext.form.Panel', {
    title: 'Basic Form',
    renderTo: Ext.getBody(),
    bodyPadding: 5,
    width: 350,

    items: [,
    {
        xtype: 'label',
        text: 'Field2'
    },{
        xtype: 'textfield',
        fieldLabel: 'Field',
        name: 'theField'
    },
    {
        xtype: 'textfield',
        fieldLabel: 'Field2',
        name: 'theField2'
    }],

    buttons: [{
        text: 'Submit',
        handler: function() {

            var form = this.up('form').getForm();

            form.getFields().each(function(item){
                    item.setDisabled(true);
            });
        }
    }]
});

In the above code after click submit button i am able disable textfiled and their labels.

I need mimic same thing to Labels. How can i do it in Extjs.

https://fiddle.sencha.com/#fiddle/1bn5

Answer 1

You can look in Chrome's debugger, "Elements" tab, for the styles of an element. There you see that the style of the field labels is opacity:0.3 in your prefered theme, Triton. Now you can go ahead and add this style to the label as well:

this.up('form').down('label').setStyle('opacity', 0.3);