优化布局

src/core/platform/web/config.js

@@ -21,6 +21,18 @@ BI.prepares.push(function () {
         // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况）
         // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景
         if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
+            var justOneItem = (ob.items && ob.items.length <= 1);
+            // 在这种情况下，也可以通过flex支持该布局
+            if (supportFlex) {
+                // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
+                if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) {
+                    return BI.extend({}, ob, {
+                        type: "bi.flex_horizontal",
+                        horizontalAlign: !justOneItem && ob.horizontalAlign === BI.HorizontalAlign.Center
+                            ? BI.HorizontalAlign.Left : ob.horizontalAlign
+                    });
+                }
+            }
             return BI.extend({}, ob, {type: "bi.table_adapt"});
         }
         if (supportFlex) {

src/core/wrapper/layout/flex/flex.horizontal.js

@@ -36,16 +36,16 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         });
         if (o.columnSize[i] !== "auto") {
             if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.columnSize[i] > 0) {
             w.element.width(o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.columnSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

src/core/wrapper/layout/flex/flex.vertical.js

@@ -35,16 +35,16 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         });
         if (o.rowSize[i] !== "auto") {
             if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.rowSize[i] > 0) {
             w.element.height(o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.rowSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@@ -37,16 +37,16 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
         });
         if (o.columnSize[i] !== "auto") {
             if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.columnSize[i] > 0) {
             w.element.width(o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.columnSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@@ -37,16 +37,16 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
         });
         if (o.rowSize[i] !== "auto") {
             if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") {
-                w.element.addClass("fill");
+                w.element.addClass("f-f");
             } else {
-                w.element.addClass("shrink-none");
+                w.element.addClass("f-s-n");
             }
         }
         if (o.rowSize[i] > 0) {
             w.element.height(o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit));
         }
         if (o.rowSize[i] === "fill") {
-            w.element.addClass("fill");
+            w.element.addClass("f-f");
         }
         if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             w.element.css({

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

@@ -7,20 +7,14 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     props: function () {
         return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-td",
-            columnSize: [200, 200, 200],
+            columnSize: [],
             hgap: 0,
             vgap: 0,
-            items: [[
+            tgap: 0,
-                {
+            bgap: 0,
-                    el: {text: "label1"}
+            lgap: 0,
-                },
+            rgap: 0,
-                {
+            items: []
-                    el: {text: "label2"}
-                },
-                {
-                    el: {text: "label3"}
-                }
-            ]]
         });
     },
     render: function () {
@@ -85,22 +79,31 @@ BI.TdLayout = BI.inherit(BI.Layout, {
         for (var i = 0; i < arr.length; i++) {
             var w = BI._lazyCreateWidget(arr[i]);
             w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            if (arr[i].lgap) {
+            var item = arr[i];
-                w.element.css({"margin-left": arr[i].lgap / BI.pixRatio + BI.pixUnit});
+            if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
+                w.element.css({
+                    "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
-            if (arr[i].rgap) {
+            if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-                w.element.css({"margin-right": arr[i].rgap / BI.pixRatio + BI.pixUnit});
+                w.element.css({
+                    "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
-            if (arr[i].tgap) {
+            if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-                w.element.css({"margin-top": arr[i].tgap / BI.pixRatio + BI.pixUnit});
+                w.element.css({
+                    "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
-            if (arr[i].bgap) {
+            if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-                w.element.css({"margin-bottom": arr[i].bgap / BI.pixRatio + BI.pixUnit});
+                w.element.css({
+                    "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
+                });
             }
             first(w, this.rows++, i);
             var td = BI._lazyCreateWidget({
                 type: "bi.default",
-                width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : o.columnSize[i],
+                width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i],
                 tagName: "td",
                 items: [w]
             });

src/less/core/wrapper/flex.horizontal.less

@@ -122,14 +122,14 @@
     justify-content: flex-end;
   }
 
-  > .shrink-none {
+  > .f-s-n {
     -webkit-flex-shrink: 0;
     -moz-flex-shrink: 0;
     -ms-flex-shrink: 0;
     flex-shrink: 0;
   }
 
-  > .fill {
+  > .f-f {
     -webkit-flex-grow: 1;
     -moz-flex-grow: 1;
     -ms-flex-grow: 1;

src/less/core/wrapper/flex.vertical.less

@@ -121,14 +121,14 @@
     justify-content: flex-end;
   }
 
-  > .shrink-none {
+  > .f-s-n {
     -webkit-flex-shrink: 0;
     -moz-flex-shrink: 0;
     -ms-flex-shrink: 0;
     flex-shrink: 0;
   }
 
-  > .fill {
+  > .f-f {
     -webkit-flex-grow: 1;
     -moz-flex-grow: 1;
     -ms-flex-grow: 1;

src/less/core/wrapper/flex.wrapper.horizontal.less

@@ -129,14 +129,14 @@
       justify-content: flex-end;
     }
 
-    > .shrink-none {
+    > .f-s-n {
       -webkit-flex-shrink: 0;
       -moz-flex-shrink: 0;
       -ms-flex-shrink: 0;
       flex-shrink: 0;
     }
 
-    > .fill {
+    > .f-f {
       -webkit-flex-grow: 1;
       -moz-flex-grow: 1;
       -ms-flex-grow: 1;

src/less/core/wrapper/flex.wrapper.vertical.less

@@ -129,14 +129,14 @@
       justify-content: flex-end;
     }
 
-    > .shrink-none {
+    > .f-s-n {
       -webkit-flex-shrink: 0;
       -moz-flex-shrink: 0;
       -ms-flex-shrink: 0;
       flex-shrink: 0;
     }
 
-    > .fill {
+    > .f-f {
       -webkit-flex-grow: 1;
       -moz-flex-grow: 1;
       -ms-flex-grow: 1;