How to remove disabled attribute in Ext JS

Question

I have a field which is by default set as disabled. But I want to change this attribute (enable it) on button click.

{
    margin: '10 50 10 50',
    padding: '10 20 10 20',
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Survey Name',
    allowBlank: false,
    disabled: true,
    id: 'name'
},

This is the button:

{
    margin: '0 50 0 50',
    padding: '10 20 10 20',
    xtype: 'button',
    text: "Create",
    listeners: {
        click: function() {
            Ext.get('name').disabled = false;
        }
    }
}

When I click this nothing is happening. What is wrong here?

Answer 1

There is so little information about Ext JS.

I tried this out, to remove the disabled attribute, you can use "set" function of Ext.dom.Element, with the second param as false.

Ext.get('name').set({'disabled': false }, false);

But I guess you can me are using old version of Ext JS. In the lastest version, it can be removed by using value === undefined

Answer 2

As you have provided id to your component so instead of getting by Ext.get() use Ext.getCmp().

Example

Ext.getCmp('name').setDisabled(false)

In this Fiddle, I have created a demo using same code.

Code snippet:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            xtype: 'panel',
            title: 'Demo',
            renderTo: Ext.getBody(),
            layout: 'hbox',
            bodyPadding: 10,
            items: [{
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Survey Name',
                allowBlank: false,
                disabled: true,
                id: 'name'
            }, {
                xtype: 'button',
                text: "Create",
                listeners: {
                    click: function () {
                        Ext.getCmp('name').setDisabled(false);
                    }
                }
            }]
        })
    }
});

Note: Instead of using id use the itemId or any other config of extjs component because id can't be duplicate. So you can also do like this

Code snippet:

Ext.create({
    xtype: 'panel',
    title: 'Enable component using ITEM ID',
    renderTo: Ext.getBody(),
    layout: 'hbox',
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Survey Name',
        allowBlank: false,
        disabled: true,
        itemId: 'name'
    }, {
        xtype: 'button',
        text: "Create",
        handler: function() {
            this.up('panel').down('#name').setDisabled(false);
        }
    }]
})