解决EXTJS4.2 fileFiled 按钮在IE8中不显示问题

EXTJS4.2  fileFiled 按钮在IE8中不显示，于是重写了FileFiled与FileButton组件：

MyFileField.js

Ext.define('Ext.ux.form.MyFileField', {
    extend: 'Ext.form.field.Trigger',
    alias: ['widget.myFileField'],
    requires: [
        'Ext.ux.form.MyFileButton'
    ],


    buttonText: 'Browse...',


    buttonOnly: false,


    buttonMargin: 3,


    clearOnSubmit: true,


    // private
    extraFieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',


    readOnly: true,


    triggerNoEditCls: '',

    // private
    componentLayout: 'triggerfield',

    // private. Extract the file element, button outer element, and button active element.
    childEls: ['browseButtonWrap'],

    // private
    onRender: function() {
        var me = this,
            id = me.id,
            //xt = me.xtype,
            inputEl;

        me.callParent(arguments);

        inputEl = me.inputEl;
        inputEl.dom.name = ''; //name goes on the fileInput, not the text input


        me.button = new Ext.ux.form.MyFileButton(Ext.apply({
            renderTo: id + '-browseButtonWrap',
            ownerCt: me,
            ownerLayout: me.componentLayout,
            id: id + '-button',
            ui: me.ui,
            disabled: me.disabled,
            text: me.buttonText,
            style: me.buttonOnly ? '' : me.getButtonMarginProp() + me.buttonMargin + 'px',
            inputName: me.getName(),
            listeners: {
                scope: me,
                change: me.onFileChange
            }
        }, me.buttonConfig));
        me.fileInputEl = me.button.fileInputEl;

        if (me.buttonOnly) {
            me.inputCell.setDisplayed(false);
        }

        // Ensure the trigger cell is sized correctly upon render
        me.browseButtonWrap.dom.style.width = (me.browseButtonWrap.dom.lastChild.offsetWidth + me.button.getEl().getMargin('lr')) + 'px';
        if (Ext.isIE) {
            me.button.getEl().repaint();
        }
    },

    /**
     * Gets the markup to be inserted into the subTplMarkup.
     */
    getTriggerMarkup: function() {
        return '<td id="' + this.id + '-browseButtonWrap"></td>';
    },

    /**
     * @private Event handler fired when the user selects a file.
     */
    onFileChange: function(button, e, value) {
        this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
        Ext.form.field.File.superclass.setValue.call(this, value);
    },

    /**
     * Overridden to do nothing
     * @method
     */
    setValue: Ext.emptyFn,

    reset : function(){
        var me = this,
            clear = me.clearOnSubmit;
        if (me.rendered) {
            me.button.reset(clear);
            me.fileInputEl = me.button.fileInputEl;
            if (clear) {
                me.inputEl.dom.value = '';
            }
        }
        me.callParent();
    },

    onShow: function(){
        this.callParent();
        // If we started out hidden, the button may have a messed up layout
        // since we don't act like a container
        this.button.updateLayout();
    },

    onDisable: function(){
        this.callParent();
        this.button.disable();
    },

    onEnable: function(){
        this.callParent();
        this.button.enable();
    },

    isFileUpload: function() {
        return true;
    },

    extractFileInput: function() {
        var fileInput = this.button.fileInputEl.dom;
        this.reset();
        return fileInput;
    },

    restoreInput: function(el) {
        var button = this.button;
        button.restoreInput(el);
        this.fileInputEl = button.fileInputEl;
    },

    onDestroy: function(){
        Ext.destroyMembers(this, 'button');
        delete this.fileInputEl;
        this.callParent();
    },

    getButtonMarginProp: function() {
        return 'margin-left:';
    }
});

MyFileButton.js

Ext.define('Ext.ux.form.MyFileButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.myFileButton',

    childEls: [
        'btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl', 'fileInputEl'
    ],

    inputCls: Ext.baseCSSPrefix + 'form-file-input',

    cls: Ext.baseCSSPrefix + 'form-file-btn',

    preventDefault: false,

    renderTpl: [
        '<span id="{id}-btnWrap" style="position: relative;display: inline-block;overflow: hidden;" class="{baseCls}-wrap',
        '<tpl if="splitCls"> {splitCls}</tpl>',
        '{childElCls}" unselectable="on">',
        '<span id="{id}-btnEl" style="position: relative;display: inline-block;overflow: hidden;" class="{baseCls}-button">',
        '<span id="{id}-btnInnerEl" style="position: relative;display: inline-block;overflow: hidden;" class="{baseCls}-inner {innerCls}',
        '{childElCls}" unselectable="on">',
        '{text}',
        '</span>',
        '<span role="img" id="{id}-btnIconEl"  class="{baseCls}-icon-el {iconCls}',
        '{childElCls} {glyphCls}" unselectable="on" style="',
        '<tpl if="iconUrl">background-image:url({iconUrl});</tpl>',
        '<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
        '<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl">&#160;</tpl>',
        '</span>',
        '</span>',
        '</span>',
        '<input id="{id}-fileInputEl" class="{childElCls} "  style="position:absolute;right: 0px;top: 0px;opacity: 0; filter: alpha(opacity=0);font-size: 200px;"  type="file" size="1" name="{inputName}">'
    ],

    getTemplateArgs: function(){
        var args = this.callParent();
        //args.inputCls = this.inputCls;
        args.inputName = this.inputName;
        return args;
    },

    afterRender: function(){
        var me = this;
        me.callParent(arguments);
        me.fileInputEl.on('change', me.fireChange, me);
    },

    fireChange: function(e){
        this.fireEvent('change', this, e, this.fileInputEl.dom.value);
    },

    /**
     * @private
     * Creates the file input element. It is inserted into the trigger button component, made
     * invisible, and floated on top of the button's other content so that it will receive the
     * button's clicks.
     */
    createFileInput : function(isTemporary) {
        var me = this;
        me.fileInputEl = me.el.createChild({
            name: me.inputName,
            id: !isTemporary ? me.id + '-fileInputEl' : undefined,
            cls: me.childElCls,
            style:"position:absolute;right: 0px;top: 0px;opacity: 0; filter: alpha(opacity=0);font-size: 200px;",
            tag: 'input',
            type: 'file',
            size: 1
        });
        me.fileInputEl.on('change', me.fireChange, me);
    },

    reset: function(remove){
        if (remove) {
            this.fileInputEl.remove();
        }
        this.createFileInput(!remove);
    },

    restoreInput: function(el){
        this.fileInputEl.remove();
        el = Ext.get(el);
        this.el.appendChild(el);
        this.fileInputEl = el;
    },

    onDisable: function(){
        this.callParent();
        this.fileInputEl.dom.disabled = true;
    },

    onEnable : function() {
        this.callParent();
        this.fileInputEl.dom.disabled = false;
    }
});

引入  Ext.require([ 'Ext.ux.form.MyFileButton','Ext.ux.form.MyFileField']);

创建xtype:'myFileField'的组件即可。