ExtJS filefield设置disabled为true后按钮不灰显的解决办法

ExtJS4.1中,filefield设置默认值为true时,按钮是灰显的,但是如果调用setDisabled来设定的时候,发现浏览按钮不会灰显,但是的确是被禁用了。如何解决了,只能从源码入手了。原来源码中并没有主动对浏览按钮加上灰显的样式,只是当默认值为true时才会加。因此我们需要在源码中手动加上css样式。

默认源码如下:

disableItems: function(){
        var file = this.fileInputEl;
        if (file) {
            file.dom.disabled = true;
        }
        this['buttonEl-btnEl'].dom.disabled = true;
    },

    onEnable: function(){
        var me = this;
        me.callParent();
        me.fileInputEl.dom.disabled = false;
        this['buttonEl-btnEl'].dom.disabled = true;
    },

修改方法及修改后的源码如下:

Ext.override(Ext.form.field.File,{
	disableItems: function(){
        var file = this.fileInputEl;
        if (file) {
            file.dom.disabled = true;
        }
        this['buttonEl'].addCls('x-btn-disabled');
        this['buttonEl-btnEl'].dom.disabled = true;
    },

    onEnable: function(){
        var me = this;
        me.callParent();
        me.fileInputEl.dom.disabled = false;
        this['buttonEl'].removeCls('x-btn-disabled');
        this['buttonEl-btnEl'].dom.disabled = true;
    }	
});

经过修改后,测试截图如下。

正常

禁用后


启用后



你可能感兴趣的:(fileupload,ExtJs,disabled,filefield)