fineui/src/base/single/button/buttons/button.js

function isVertical(position) {
    return position === "top" || position === "bottom";
}

/**
 * 文字类型的按钮
 * @class BI.Button
 * @extends BI.BasicButton
 *
 * @cfg {JSON} options 配置属性
 * @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景
 */
BI.Button = BI.inherit(BI.BasicButton, {

    _const: {
        iconWidth: 16
    },

    _defaultConfig: function (props) {
        var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);


        return BI.extend(conf, {
            baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
            attributes: {
                tabIndex: 1
            },
            minWidth: (props.block === true || props.clear === true) ? 0 : 80,
            // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
            height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
            shadow: props.clear !== true,
            isShadowShowingOnSelected: true,
            readonly: true,
            iconCls: "",
            level: "common",
            block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制
            clear: false, // 是否去掉边框和背景
            ghost: false, // 是否幽灵显示, 即正常状态无背景
            textAlign: "center",
            whiteSpace: "nowrap",
            textWidth: null,
            textHeight: null,
            hgap: props.clear ? 0 : 10,
            vgap: 0,
            tgap: 0,
            bgap: 0,
            lgap: 0,
            rgap: 0,
            iconGap: 4,
            iconPosition: "left",
            iconSize: props.iconSize || 12
        });
    },

    render: function () {
        var o = this.options, self = this;

        // 由于button默认情况下有个边框，所以要主动算行高
        var lineHeight, textHeight = o.textHeight;
        if (BI.isNumber(o.height)) {
            if(!isVertical(o.iconPosition)) {
                if (o.clear || o.block) {
                    lineHeight = o.height;
                } else {
                    lineHeight = o.height - 2;
                }
            } else {
                lineHeight = textHeight;
            }
        }
        if (!textHeight) {
            if (o.whiteSpace === "nowrap") {
                textHeight = lineHeight;
            }
        }
        if (BI.isKey(o.iconCls)) {
            this.icon = BI.createWidget({
                type: "bi.icon_label",
                cls: o.iconCls,
                width: o.iconWidth,
                height: o.iconHeight,
                lineHeight: o.iconHeight,
                iconWidth: o.iconWidth,
                iconHeight: o.iconHeight,
                css: {
                    fontSize: o.iconSize + "px"
                }
            });
            this.text = BI.createWidget({
                type: "bi.label",
                text: o.text,
                textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
                textHeight: textHeight,
                height: lineHeight,
                value: o.value
            });
            var layoutType = "bi.horizontal";
            var gapContainer = {
                lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0,
                rgap: o.iconPosition === "right" ? o.iconGap : 0,
                tgap: o.iconPosition === "top" ? o.iconGap : 0,
                bgap: o.iconPosition === "bottom" ? o.iconGap : 0
            };
            var items = [this.icon, BI.extend({el: this.text}, gapContainer)];
            if (isVertical(o.iconPosition)) {
                layoutType = "bi.vertical";
            }
            if (o.iconPosition === "right" || o.iconPosition === "bottom") {
                items = [BI.extend({el: this.text}, gapContainer), this.icon];
            }
            BI.createWidget({
                type: "bi.center_adapt",
                element: this,
                hgap: o.hgap,
                vgap: o.vgap,
                items: [{
                    type: layoutType,
                    horizontalAlign: "center",
                    verticalAlign: "middle",
                    items: items
                }]
            });
        } else {
            this.text = BI.createWidget({
                type: "bi.label",
                height: o.height,
                textAlign: o.textAlign,
                whiteSpace: o.whiteSpace,
                textWidth: o.textWidth,
                textHeight: textHeight,
                hgap: o.hgap,
                vgap: o.vgap,
                tgap: o.tgap,
                bgap: o.bgap,
                lgap: o.lgap,
                rgap: o.rgap,
                element: this,
                text: o.text,
                value: o.value
            });
        }
        if (o.block === true) {
            this.element.addClass("block");
        }
        if (o.clear === true) {
            this.element.addClass("clear");
        }
        if (o.ghost === true) {
            this.element.addClass("ghost");
        }
        if (o.minWidth > 0) {
            this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
        }
    },

    doClick: function () {
        BI.Button.superclass.doClick.apply(this, arguments);
        if (this.isValid()) {
            this.fireEvent(BI.Button.EVENT_CHANGE, this);
        }
    },

    _setEnable: function (enable) {
        BI.Button.superclass._setEnable.apply(this, arguments);
        if (enable === true) {
            this.element.attr("tabIndex", 1);
        } else if (enable === false) {
            this.element.removeAttr("tabIndex");
        }
    },

    setText: function (text) {
        BI.Button.superclass.setText.apply(this, arguments);
        this.text.setText(text);
    },

    setValue: function (text) {
        BI.Button.superclass.setValue.apply(this, arguments);
        if (!this.isReadOnly()) {
            this.text.setValue(text);
        }
    },

    doRedMark: function () {
        this.text.doRedMark.apply(this.text, arguments);
    },

    unRedMark: function () {
        this.text.unRedMark.apply(this.text, arguments);
    },

    doHighLight: function () {
        this.text.doHighLight.apply(this.text, arguments);
    },

    unHighLight: function () {
        this.text.unHighLight.apply(this.text, arguments);
    }
});
BI.shortcut("bi.button", BI.Button);
BI.Button.EVENT_CHANGE = "EVENT_CHANGE";