You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.7 KiB
95 lines
3.7 KiB
/** |
|
* 内联布局 |
|
* @class BI.InlineLayout |
|
* @extends BI.Layout |
|
* |
|
* @cfg {JSON} options 配置属性 |
|
* @cfg {Number} [hgap=0] 水平间隙 |
|
* @cfg {Number} [vgap=0] 垂直间隙 |
|
*/ |
|
BI.InlineLayout = BI.inherit(BI.Layout, { |
|
|
|
props: function () { |
|
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), { |
|
baseCls: "bi-i", |
|
horizontalAlign: BI.HorizontalAlign.Left, |
|
verticalAlign: BI.VerticalAlign.Top, |
|
columnSize: [], |
|
hgap: 0, |
|
vgap: 0, |
|
lgap: 0, |
|
rgap: 0, |
|
tgap: 0, |
|
bgap: 0, |
|
items: [] |
|
}); |
|
}, |
|
|
|
render: function () { |
|
BI.InlineLayout.superclass.render.apply(this, arguments); |
|
var o = this.options; |
|
this.element.css({ |
|
textAlign: o.horizontalAlign |
|
}); |
|
this.populate(o.items); |
|
}, |
|
|
|
_addElement: function (i, item) { |
|
var o = this.options; |
|
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments); |
|
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; |
|
if (o.columnSize.length > 0) { |
|
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { |
|
columnSize = null; |
|
} |
|
} |
|
if (columnSize > 0) { |
|
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit)); |
|
} |
|
w.element.css({ |
|
position: "relative", |
|
"vertical-align": o.verticalAlign, |
|
"min-width": "auto", |
|
"max-width": "auto" |
|
}); |
|
w.element.addClass("i-item"); |
|
if (columnSize === "fill" || columnSize === "") { |
|
var length = o.hgap; |
|
var fillCount = 0, autoCount = 0; |
|
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { |
|
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; |
|
if (cz === "fill") { |
|
fillCount++; |
|
cz = 0; |
|
} else if (cz === "" || BI.isNull(cz)) { |
|
autoCount++; |
|
cz = 0; |
|
} |
|
length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz; |
|
} |
|
if (columnSize === "fill") { |
|
w.element.css("min-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); |
|
} |
|
if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) { |
|
if (columnSize === "fill") { |
|
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); |
|
} else { |
|
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")"); |
|
} |
|
} |
|
} |
|
this._handleGap(w, item, i); |
|
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { |
|
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), |
|
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); |
|
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")"); |
|
} |
|
return w; |
|
}, |
|
|
|
populate: function (items) { |
|
BI.InlineLayout.superclass.populate.apply(this, arguments); |
|
this._mount(); |
|
} |
|
}); |
|
BI.shortcut("bi.inline", BI.InlineLayout);
|
|
|