如何在Ext JS中刪除禁用的屬性

Question

我有一個默認設置為禁用的字段。 但是我想在單擊按鈕時更改此屬性（啟用它）。

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

當我單擊此按鈕時，沒有任何反應。 怎么了

Answer 1

由於已為組件提供了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);
        }
    }]
})