(function () { 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: 18 }, _defaultConfig: function (props) { var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); var adaptiveHeight = 0; if (isVertical(props.iconPosition)) { // 图标高度和文字高度默认相等 adaptiveHeight += (props.textHeight || 16) * 2; adaptiveHeight += props.iconGap || 0; var tGap = props.tgap || props.vgap || 2; var bGap = props.bgap || props.vgap || 2; adaptiveHeight += (tGap + bGap); } 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, height: isVertical(props.iconPosition) ? adaptiveHeight : 24, shadow: props.clear !== true, isShadowShowingOnSelected: true, readonly: true, iconCls: "", level: "common", block: false, // 是否块状显示,即不显示边框,没有最小宽度的限制 clear: false, // 是否去掉边框和背景 ghost: false, // 是否幽灵显示, 即正常状态无背景 loading: false, // 是否处于加载中 light: false, // 是否使用浅色 plain: false, // 是否是朴素按钮,和 clear 的区别是 plain 有悬浮效果 textAlign: "center", whiteSpace: "nowrap", textWidth: null, textHeight: null, hgap: props.clear ? 0 : 10, vgap: 0, tgap: 0, bgap: 0, lgap: 0, rgap: 0, iconGap: 0, iconPosition: "left" }); }, render: function () { var o = this.options; // 由于button默认情况下有个边框,所以要主动算行高 var lineHeight, textHeight = o.textHeight; if (BI.isNumber(o.height)) { if (!isVertical(o.iconPosition)) { if (o.clear || o.block || o.light) { 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: this._const.iconWidth, height: lineHeight, lineHeight: lineHeight, // 不设置,自定义按钮无法居中 iconWidth: o.iconWidth, iconHeight: o.iconHeight }); 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.plain === true) { this.element.addClass("plain"); } if (o.loading === true) { this.element.addClass("loading"); } if (o.light === true) { this.element.addClass("light"); } 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"); } }, setLoading: function (loading) { if (loading) { this.element.addClass("loading"); } else { this.element.removeClass("loading"); } }, 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); } }, setIcon: function (cls) { var o = this.options; if (this.icon && o.iconCls !== cls) { this.icon.element.removeClass(o.iconCls).addClass(cls); o.iconCls = cls; } }, 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"; }());