Pull request #2583: 无JIRA任务 feature: 增加IE9支持的vertical_fill动态布局

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit 'fab836ba8a6a1a18891ed19dece8ed97eb8323fd':
  feature: 增加IE9支持的vertical_fill动态布局

src/core/platform/web/config.js

@@ -156,12 +156,32 @@ BI.prepares.push(function () {
                 scrolly: false
             }, ob, {type: "bi.flex_vertical"});
         }
-        return BI.extend({}, ob, {
-            type: "bi.td",
-            items: BI.map(ob.items, function (i, item) {
-                return [item];
-            })
-        });
+        if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
+            // 有滚动条，降级到table布局处理
+            return BI.extend({}, ob, {
+                type: "bi.td",
+                items: BI.map(ob.items, function (i, item) {
+                    return [item];
+                })
+            });
+        }
+        var hasAuto = false;
+        if (ob.rowSize && ob.rowSize.length > 0) {
+            if (ob.rowSize.indexOf("") >= 0) {
+                hasAuto = true;
+            }
+        } else {
+            BI.each(ob.items, function (i, item) {
+                if (BI.isNull(item.height) || item.height === "") {
+                    hasAuto = true;
+                }
+            });
+        }
+        if (hasAuto) {
+            // 有自动高的时候
+            return BI.extend({}, ob, {type: "bi.vtape_auto"});
+        }
+        return BI.extend({}, ob, {type: "bi.vtape"});
     });
     BI.Plugin.configWidget("bi.horizontal_sticky", function (ob) {
         if (!isSupportSticky) {

src/core/wrapper/layout.js

@@ -289,7 +289,7 @@ BI.Layout = BI.inherit(BI.Widget, {
     },
 
     _optimiseGap: function (gap) {
-        return gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
+        return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
     },
 
     _handleGap: function (w, item, hIndex, vIndex) {

src/core/wrapper/layout/fill/auto.vtape.js

@@ -0,0 +1,116 @@
+BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
+    props: function () {
+        return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), {
+            baseCls: "bi-auto-htape",
+            horizontalAlign: BI.HorizontalAlign.Stretch,
+            verticalAlign: BI.VerticalAlign.Stretch,
+            hgap: 0,
+            vgap: 0,
+            lgap: 0,
+            rgap: 0,
+            tgap: 0,
+            bgap: 0,
+            rowSize: [],
+            items: []
+        });
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: "bi.vtape",
+            ref: function (_ref) {
+                self.layout = _ref;
+            },
+            items: o.items,
+            horizontalAlign: o.horizontalAlign,
+            verticalAlign: o.verticalAlign,
+            rowSize: o.rowSize,
+            hgap: o.hgap,
+            vgap: o.vgap,
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap,
+            innerHgap: o.innerHgap,
+            innerVgap: o.innerVgap,
+        };
+    },
+
+    _handleResize: function () {
+        var self = this, o = this.options;
+        var items = o.items;
+        var top = {}, bottom = {};
+        top[0] = o.innerVgap;
+        bottom[items.length - 1] = o.innerVgap;
+
+        BI.any(items, function (i, item) {
+            if (BI.isEmptyObject(item)) {
+                return true;
+            }
+            var w = self.layout.getWidgetByName(self._getChildName(i));
+            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            if (o.rowSize.length > 0) {
+                if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
+                    rowSize = item.height;
+                }
+            }
+            if (BI.isNull(top[i])) {
+                var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
+                if (preRowSize === "") {
+                    preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height();
+                }
+                top[i] = top[i - 1] + preRowSize + (items[i - 1].tgap || 0) + (items[i - 1].bgap || 0) + 2 * (items[i - 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
+            }
+            w.element.css({
+                top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap)
+            });
+
+            if (rowSize === "fill") {
+                return true;
+            }
+        });
+        BI.backAny(items, function (i, item) {
+            if (BI.isEmptyObject(item)) {
+                return true;
+            }
+            var w = self.layout.getWidgetByName(self._getChildName(i));
+            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            if (BI.isNull(bottom[i])) {
+                var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
+                if (nextRowSize === "") {
+                    nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height();
+                }
+                bottom[i] = bottom[i + 1] + nextRowSize + (items[i + 1].tgap || 0) + (items[i + 1].bgap || 0) + 2 * (items[i + 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
+            }
+            w.element.css({
+                bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
+            });
+
+            if (rowSize === "fill") {
+                return true;
+            }
+        });
+    },
+
+    mounted: function () {
+        if (window.MutationObserver) {
+            this.mutationObserver = new window.MutationObserver(this._handleResize.bind(this));
+            this.mutationObserver.observe(this.element[0], {
+                attributes: true,
+                childList: true,
+                subtree: true
+            });
+        }
+        this._handleResize();
+    },
+
+    resize: function () {
+        this.layout.resize();
+    },
+
+    populate: function (items) {
+        this.layout.populate.apply(this.layout, arguments);
+    }
+});
+BI.shortcut("bi.vtape_auto", BI.AutoVerticalTapeLayout);

src/core/wrapper/layout/layout.tape.js

@@ -45,10 +45,17 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
             } else {
                 w = self.getWidgetByName(self._getChildName(i));
             }
+            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            if (o.columnSize.length > 0) {
+                if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
+                    columnSize = item.width;
+                }
+            }
             w.element.css({
                 position: "absolute",
                 top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.innerVgap + o.vgap + o.tgap),
-                bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.innerVgap + o.vgap + o.bgap)
+                bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.innerVgap + o.vgap + o.bgap),
+                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
             });
             if (o.verticalAlign === BI.VerticalAlign.Middle) {
                 w.element.css({
@@ -82,8 +89,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
                 left[i] = left[i - 1] + preColumnSize + (items[i - 1].lgap || 0) + (items[i - 1].rgap || 0) + 2 * (items[i - 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
             }
             w.element.css({
-                left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
-                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
+                left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap)
             });
 
             if (columnSize === "" || columnSize === "fill") {
@@ -101,8 +107,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
                 right[i] = right[i + 1] + nextColumnSize + (items[i + 1].lgap || 0) + (items[i + 1].rgap || 0) + 2 * (items[i + 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
             }
             w.element.css({
-                right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap),
-                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
+                right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap)
             });
 
             if (columnSize === "" || columnSize === "fill") {
@@ -165,10 +170,17 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
             } else {
                 w = self.getWidgetByName(self._getChildName(i));
             }
+            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            if (o.rowSize.length > 0) {
+                if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
+                    rowSize = item.height;
+                }
+            }
             w.element.css({
                 position: "absolute",
                 left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.innerHgap + o.hgap + o.lgap),
-                right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.innerHgap + o.hgap + o.rgap)
+                right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.innerHgap + o.hgap + o.rgap),
+                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
             });
             if (o.horizontalAlign === BI.HorizontalAlign.Center) {
                 w.element.css({
@@ -202,8 +214,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
                 top[i] = top[i - 1] + preRowSize + (items[i - 1].tgap || 0) + (items[i - 1].bgap || 0) + 2 * (items[i - 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
-                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
+                top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap)
             });
 
             if (rowSize === "" || rowSize === "fill") {
@@ -221,8 +232,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
                 bottom[i] = bottom[i + 1] + nextRowSize + (items[i + 1].tgap || 0) + (items[i + 1].bgap || 0) + 2 * (items[i + 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
-                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
+                bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap)
             });
 
             if (rowSize === "" || rowSize === "fill") {

src/core/wrapper/layout/layout.td.js

@@ -78,7 +78,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        var height = o.rowSize[idx] === "" ? "" : this._optimiseGap(o.rowSize[idx]);
+        var height = o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]);
         var tr = BI._lazyCreateWidget({
             type: "bi.default",
             tagName: "tr",