如何在Ext JS中删除disabled属性

时间:2018-05-22 14:10:13

标签: javascript extjs

我有一个默认设置为禁用的字段。但我想在按钮点击时更改此属性(启用它)。

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

这是按钮:

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

当我点击这个时,没有任何事情发生。这有什么不对?

1 个答案:

答案 0 :(得分:1)

由于您已向ToUpper()提供了id,因此请Ext.get()使用Ext.getCmp()

实施例

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

Fiddle 中,我使用相同的代码创建了一个演示。

代码段:

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

注意:不要使用id使用itemId或extjs组件的任何其他配置,因为id不能重复。所以你也可以这样做

代码段:

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