|
|
|
import { shortcut } from "../../../decorator";
|
|
|
|
import { Layout } from "../../layout";
|
|
|
|
import { extend, isFunction, some, isNull } from "../../../2.base";
|
|
|
|
import { Widget } from "../../../4.widget";
|
|
|
|
import { _lazyCreateWidget } from "../../../5.inject";
|
|
|
|
import { HorizontalAlign, VerticalAlign } from "../../../constant";
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 使用display:table和display:table-cell实现的horizontal布局
|
|
|
|
* @class TableAdaptLayout
|
|
|
|
* @extends Layout
|
|
|
|
*/
|
|
|
|
@shortcut()
|
|
|
|
export class TableAdaptLayout extends Layout {
|
|
|
|
static xtype = "bi.table_adapt";
|
|
|
|
|
|
|
|
props() {
|
|
|
|
return extend(super.props(...arguments), {
|
|
|
|
baseCls: "bi-t-a",
|
|
|
|
columnSize: [],
|
|
|
|
verticalAlign: VerticalAlign.Top,
|
|
|
|
horizontalAlign: HorizontalAlign.Left,
|
|
|
|
hgap: 0,
|
|
|
|
vgap: 0,
|
|
|
|
lgap: 0,
|
|
|
|
rgap: 0,
|
|
|
|
tgap: 0,
|
|
|
|
bgap: 0,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
super.render(...arguments);
|
|
|
|
const o = this.options;
|
|
|
|
this.$table = Widget._renderEngine.createElement("<div>").css({
|
|
|
|
position: "relative",
|
|
|
|
display: "table",
|
|
|
|
width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto",
|
|
|
|
height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto",
|
|
|
|
"white-space": "nowrap",
|
|
|
|
});
|
|
|
|
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
|
|
|
|
this.populate(newValue);
|
|
|
|
}) : o.items;
|
|
|
|
this.populate(items);
|
|
|
|
}
|
|
|
|
|
|
|
|
_hasFill() {
|
|
|
|
const o = this.options;
|
|
|
|
if (o.columnSize.length > 0) {
|
|
|
|
return o.columnSize.indexOf("fill") >= 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
return some(o.items, (i, item) => {
|
|
|
|
if (item.width === "fill") {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_addElement(i, item) {
|
|
|
|
const o = this.options;
|
|
|
|
let td, width = "";
|
|
|
|
let w;
|
|
|
|
const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
|
|
|
|
if (columnSize > 0) {
|
|
|
|
width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
|
|
|
|
}
|
|
|
|
if ((isNull(columnSize) || columnSize === "") && this._hasFill()) {
|
|
|
|
width = 2;
|
|
|
|
}
|
|
|
|
if (!this.hasWidget(this._getChildName(i))) {
|
|
|
|
w = _lazyCreateWidget(item);
|
|
|
|
w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" });
|
|
|
|
td = _lazyCreateWidget({
|
|
|
|
type: "bi.default",
|
|
|
|
width,
|
|
|
|
items: [w],
|
|
|
|
});
|
|
|
|
this.addWidget(this._getChildName(i), td);
|
|
|
|
} else {
|
|
|
|
td = this.getWidgetByName(this._getChildName(i));
|
|
|
|
td.element.width(width);
|
|
|
|
}
|
|
|
|
if (o.verticalAlign === VerticalAlign.Stretch) {
|
|
|
|
const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
|
|
|
|
bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
|
|
|
|
w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`);
|
|
|
|
}
|
|
|
|
// 对于表现为td的元素设置最大宽度,有几点需要注意
|
|
|
|
// 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
|
|
|
|
// 2、不能给多个td设置最大宽度,这样只会平分宽度
|
|
|
|
// 3、多百分比宽度就算了
|
|
|
|
if (columnSize > 0) {
|
|
|
|
td.element.css({
|
|
|
|
"max-width": width,
|
|
|
|
"min-width": width,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (i === 0) {
|
|
|
|
td.element.addClass("first-element");
|
|
|
|
}
|
|
|
|
td.element.css({
|
|
|
|
position: "relative",
|
|
|
|
display: "table-cell",
|
|
|
|
"vertical-align": o.verticalAlign,
|
|
|
|
height: "100%",
|
|
|
|
});
|
|
|
|
this._handleGap(w, item, i);
|
|
|
|
|
|
|
|
return td;
|
|
|
|
}
|
|
|
|
|
|
|
|
appendFragment(frag) {
|
|
|
|
this.$table.append(frag);
|
|
|
|
this.element.append(this.$table);
|
|
|
|
}
|
|
|
|
|
|
|
|
populate(...args) {
|
|
|
|
super.populate(...args);
|
|
|
|
this._mount();
|
|
|
|
}
|
|
|
|
}
|