www.gusucode.com > 中小型Java游戏实例 国外Java源代码源码程序 > 可上传图片的Java版htmlarea编辑器改进版/htmleditor/htmleditor/htmleditor/WebRoot/JS/BrowseButton.js

    /**
 * 国外网友loeppky所做,用于浏览文件
 */
Ext.namespace('Ext.ux.form');
Ext.ux.form.BrowseButton = Ext.extend(Ext.Button, {
    inputFileName: 'file',
    debug: false,
    FLOAT_EL_WIDTH: 60,
    FLOAT_EL_HEIGHT: 18,
    buttonCt: null,
    clipEl: null,
    floatEl: null,
    inputFileEl: null,
    originalHandler: null,
    originalScope: null,
    initComponent: function(){
        Ext.ux.form.BrowseButton.superclass.initComponent.call(this);
        this.originalHandler = this.handler;
        this.originalScope = this.scope;
        this.handler = null;
        this.scope = null;
    },
    onRender: function(ct, position){
        Ext.ux.form.BrowseButton.superclass.onRender.call(this, ct, position); // render the Ext.Button
        this.buttonCt = this.el.child('.x-btn-center em');
        this.buttonCt.position('relative'); // this is important!
        var styleCfg = {
            position: 'absolute',
            overflow: 'hidden',
            top: '0px', // default
            left: '0px' // default
        };
        if (Ext.isIE) {
            Ext.apply(styleCfg, {
                left: '-3px',
                top: '-3px'
            });
        }
        else 
            if (Ext.isGecko) {
                Ext.apply(styleCfg, {
                    left: '-3px',
                    top: '-3px'
                });
            }
            else 
                if (Ext.isSafari) {
                    Ext.apply(styleCfg, {
                        left: '-4px',
                        top: '-2px'
                    });
                }
        this.clipEl = this.buttonCt.createChild({
            tag: 'div',
            style: styleCfg
        });
        this.setClipSize();
        this.clipEl.on({
            'mousemove': this.onButtonMouseMove,
            'mouseover': this.onButtonMouseMove,
            scope: this
        });
        
        this.floatEl = this.clipEl.createChild({
            tag: 'div',
            style: {
                position: 'absolute',
                width: this.FLOAT_EL_WIDTH + 'px',
                height: this.FLOAT_EL_HEIGHT + 'px',
                overflow: 'hidden'
            }
        });
        
        
        if (this.debug) {
            this.clipEl.applyStyles({
                'background-color': 'green'
            });
            this.floatEl.applyStyles({
                'background-color': 'red'
            });
        }
        else {
            this.floatEl.setOpacity(0.0);
        }
        var buttonEl = this.el.child(this.buttonSelector);
        buttonEl.on('focus', this.onButtonFocus, this);
        if (Ext.isIE) {
            this.el.on('keydown', this.onButtonKeyDown, this);
        }
        
        this.createInputFile();
    },
    setClipSize: function(){
        if (this.clipEl) {
            var width = this.buttonCt.getWidth();
            var height = this.buttonCt.getHeight();
            if (width === 0 || height === 0) {
                this.setClipSize.defer(100, this);
            }
            else {
                if (Ext.isIE) {
                    width = width + 5;
                    height = height + 5;
                }
                else 
                    if (Ext.isGecko) {
                        width = width + 6;
                        height = height + 6;
                    }
                    else 
                        if (Ext.isSafari) {
                            width = width + 6;
                            height = height + 6;
                        }
                this.clipEl.setSize(width, height);
            }
        }
    },
    createInputFile: function(){
        this.floatEl.select('em').each(function(el){
            el.remove();
        });
        this.inputFileEl = this.floatEl.createChild({
            tag: 'input',
            type: 'file',
            size: 1,
            name: this.inputFileName || Ext.id(this.el),
            tabindex: this.tabIndex,
            style: {
                position: 'absolute',
                cursor: 'pointer',
                right: '0px',
                top: '0px'
            }
        });
        this.inputFileEl = this.inputFileEl.child('input') || this.inputFileEl;
        this.inputFileEl.on({
            'click': this.onInputFileClick,
            'change': this.onInputFileChange,
            'focus': this.onInputFileFocus,
            'select': this.onInputFileFocus,
            'blur': this.onInputFileBlur,
            scope: this
        });
        if (this.tooltip) {
            if (typeof this.tooltip == 'object') {
                Ext.QuickTips.register(Ext.apply({
                    target: this.inputFileEl
                }, this.tooltip));
            }
            else {
                this.inputFileEl.dom[this.tooltipType] = this.tooltip;
            }
        }
    },
    onButtonFocus: function(e){
        if (this.inputFileEl) {
            this.inputFileEl.focus();
            e.stopEvent();
        }
    },
    onButtonKeyDown: function(e){
        if (this.inputFileEl && e.getKey() == Ext.EventObject.SPACE) {
            this.inputFileEl.dom.click();
            e.stopEvent();
        }
    },
    onButtonMouseMove: function(e){
        var xy = e.getXY();
        xy[0] -= this.FLOAT_EL_WIDTH / 2;
        xy[1] -= this.FLOAT_EL_HEIGHT / 2;
        this.floatEl.setXY(xy);
    },
    onInputFileFocus: function(e){
        if (!this.isDisabled) {
            this.el.addClass("x-btn-over");
        }
    },
    onInputFileBlur: function(e){
        this.el.removeClass("x-btn-over");
    },
    onInputFileClick: function(e){
        e.stopPropagation();
    },
    onInputFileChange: function(){
        if (this.originalHandler) {
            this.originalHandler.call(this.originalScope, this);
        }
    },
    detachInputFile: function(noCreate){
        var result = this.inputFileEl;
        
        if (typeof this.tooltip == 'object') {
            Ext.QuickTips.unregister(this.inputFileEl);
        }
        else {
            this.inputFileEl.dom[this.tooltipType] = null;
        }
        this.inputFileEl.removeAllListeners();
        this.inputFileEl = null;
        
        if (!noCreate) {
            this.createInputFile();
        }
        return result;
    },
    getInputFile: function(){
        return this.inputFileEl;
    },
    disable: function(){
        Ext.ux.form.BrowseButton.superclass.disable.call(this);
        this.inputFileEl.dom.disabled = true;
    },
    enable: function(){
        Ext.ux.form.BrowseButton.superclass.enable.call(this);
        this.inputFileEl.dom.disabled = false;
    }
});

Ext.reg('browsebutton', Ext.ux.form.BrowseButton);