Ext.form.field.File enable is not enabling the button

[ryan.mcgee]

Ext version tested:

• Ext JS 4.1 - Build date: 2012-04-20 14:10:47 (19f55ab932145a3443b228045fa80950dfeaf9cc)

Browser versions tested against:

• Firefox 13.0.1

Description:

• When 'Ext.form.field.File' is created with a config object that has disabled = true and then enable is called then the browse button appears to still be disabled even though you can click on it.

Work Around:

Ext.define('mycompany.myproject.widget.FileFieldEx', {
    extend : 'Ext.form.field.File',
    alias : ['widget.filefieldex'],

    onEnable : function() {
        this.callParent(arguments);
        this.buttonEl.removeCls(['x-item-disabled', 'x-disabled', 'x-btn-default-small-disabled', 'x-btn-disabled']);
        this.buttonEl.addCls(['x-btn', 'x-btn-default-small']);
    },
    
    onDisable : function() {
        this.callParent(arguments);
        this.buttonEl.addCls(['x-item-disabled', 'x-disabled', 'x-btn-default-small-disabled', 'x-btn-disabled']);
        this.buttonEl.removeCls(['x-btn', 'x-btn-default-small']);
    }
});

Operating System:

• Win 7 Pro SP1 64

[scottmartin]

There does not seem to be a problem using the standard config:

Perhaps your custom CSS is causing problems?

Ext.create('Ext.form.Panel', {
    title: 'Upload a Photo',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'photo',
        disabled: true,
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...'
    }]
});

Scott

[ryan.mcgee]

Using this code:

        var panel = Ext.create('Ext.form.Panel', {
           title: 'Upload a Photo',
           width: 400,
           bodyPadding: 10,
           frame: true,
           renderTo: Ext.getBody(),
           items: [{
               xtype: 'filefield',
               name: 'photo',
               disabled: true,
               fieldLabel: 'Photo',
               labelWidth: 50,
               msgTarget: 'side',
               allowBlank: false,
               anchor: '100%',
               buttonText: 'Select Photo...'
           }]
        });    
        
        panel.down('filefield').enable();

I would expect to see :
expected.png
but instead I see :
actual.png

[scottmartin]

Verified, thanks!

Scott.