BI-34367 布局拖字段问题

dist/bundle.ie.js

@@ -19023,7 +19023,7 @@ BI.prepares.push(function () {
         return _isSupprtFlex;
     };
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
-        if (!BI.isIE() && isSupportFlex()) {
+        if (!BI.isIE() && isSupportFlex() && ob.items && ob.items.length <= 1) {
             return BI.extend(ob, {type: "bi.flex_horizontal"});
         }
         return ob;
@@ -30415,6 +30415,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-center-adapt-layout",
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -30424,92 +30425,33 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options, self = this;
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        return {
-            position: "relative",
+            type: "bi.horizontal",
-            width: "100%",
+            verticalAlign: BI.VerticalAlign.Middle,
-            height: "100%",
+            horizontalAlign: BI.HorizontalAlign.Center,
-            "white-space": "nowrap",
+            columnSize: o.columnSize,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            items: o.items,
-            "border-collapse": "separate"
+            ref: function (_ref) {
-        });
+                self.layout = _ref;
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-        td.element.css({"max-width": o.columnSize[i]});
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
             },
-
+            hgap: o.hgap,
-    appendFragment: function (frag) {
+            vgap: o.vgap,
-        this.$tr.append(frag);
+            lgap: o.lgap,
-        this.element.append(this.$table);
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
         // console.log("center_adapt布局不需要resize");
     },
 
-    _getWrapper: function () {
-        return this.$tr;
-    },
-
     populate: function (items) {
-        BI.CenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);/**
@@ -30889,7 +30831,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
         baseCls: "bi-vertical-adapt-layout",
         columnSize: [],
-        horizontalAlign: BI.HorizontalAlign.Left,
+        scrollx: false,
         hgap: 0,
         vgap: 0,
         lgap: 0,
@@ -30897,85 +30839,27 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         tgap: 0,
         bgap: 0
     },
+
     render: function () {
+        var self = this, o = this.options;
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        return {
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+            type: "bi.horizontal",
-            position: "relative",
+            verticalAlign: BI.VerticalAlign.Middle,
-            width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
+            horizontalAlign: BI.HorizontalAlign.Left,
-            height: "100%",
+            columnSize: o.columnSize,
-            "white-space": "nowrap",
+            items: o.items,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            ref: function (_ref) {
-            "border-collapse": "separate"
+                self.layout = _ref;
-        });
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
             },
-
+            hgap: o.hgap,
-    _getWrapper: function () {
+            vgap: o.vgap,
-        return this.$tr;
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
@@ -30983,8 +30867,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.VerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);/**

dist/bundle.js

@@ -19023,7 +19023,7 @@ BI.prepares.push(function () {
         return _isSupprtFlex;
     };
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
-        if (!BI.isIE() && isSupportFlex()) {
+        if (!BI.isIE() && isSupportFlex() && ob.items && ob.items.length <= 1) {
             return BI.extend(ob, {type: "bi.flex_horizontal"});
         }
         return ob;
@@ -30415,6 +30415,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-center-adapt-layout",
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -30424,92 +30425,33 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options, self = this;
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        return {
-            position: "relative",
+            type: "bi.horizontal",
-            width: "100%",
+            verticalAlign: BI.VerticalAlign.Middle,
-            height: "100%",
+            horizontalAlign: BI.HorizontalAlign.Center,
-            "white-space": "nowrap",
+            columnSize: o.columnSize,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            items: o.items,
-            "border-collapse": "separate"
+            ref: function (_ref) {
-        });
+                self.layout = _ref;
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-        td.element.css({"max-width": o.columnSize[i]});
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
             },
-
+            hgap: o.hgap,
-    appendFragment: function (frag) {
+            vgap: o.vgap,
-        this.$tr.append(frag);
+            lgap: o.lgap,
-        this.element.append(this.$table);
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
         // console.log("center_adapt布局不需要resize");
     },
 
-    _getWrapper: function () {
-        return this.$tr;
-    },
-
     populate: function (items) {
-        BI.CenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);/**
@@ -30889,7 +30831,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
         baseCls: "bi-vertical-adapt-layout",
         columnSize: [],
-        horizontalAlign: BI.HorizontalAlign.Left,
+        scrollx: false,
         hgap: 0,
         vgap: 0,
         lgap: 0,
@@ -30897,85 +30839,27 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         tgap: 0,
         bgap: 0
     },
+
     render: function () {
+        var self = this, o = this.options;
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        return {
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+            type: "bi.horizontal",
-            position: "relative",
+            verticalAlign: BI.VerticalAlign.Middle,
-            width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
+            horizontalAlign: BI.HorizontalAlign.Left,
-            height: "100%",
+            columnSize: o.columnSize,
-            "white-space": "nowrap",
+            items: o.items,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            ref: function (_ref) {
-            "border-collapse": "separate"
+                self.layout = _ref;
-        });
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
             },
-
+            hgap: o.hgap,
-    _getWrapper: function () {
+            vgap: o.vgap,
-        return this.$tr;
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
@@ -30983,8 +30867,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.VerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);/**

dist/core.js

@@ -19023,7 +19023,7 @@ BI.prepares.push(function () {
         return _isSupprtFlex;
     };
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
-        if (!BI.isIE() && isSupportFlex()) {
+        if (!BI.isIE() && isSupportFlex() && ob.items && ob.items.length <= 1) {
             return BI.extend(ob, {type: "bi.flex_horizontal"});
         }
         return ob;
@@ -30415,6 +30415,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-center-adapt-layout",
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -30424,92 +30425,33 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options, self = this;
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        return {
-            position: "relative",
+            type: "bi.horizontal",
-            width: "100%",
+            verticalAlign: BI.VerticalAlign.Middle,
-            height: "100%",
+            horizontalAlign: BI.HorizontalAlign.Center,
-            "white-space": "nowrap",
+            columnSize: o.columnSize,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            items: o.items,
-            "border-collapse": "separate"
+            ref: function (_ref) {
-        });
+                self.layout = _ref;
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-        td.element.css({"max-width": o.columnSize[i]});
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
             },
-
+            hgap: o.hgap,
-    appendFragment: function (frag) {
+            vgap: o.vgap,
-        this.$tr.append(frag);
+            lgap: o.lgap,
-        this.element.append(this.$table);
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
         // console.log("center_adapt布局不需要resize");
     },
 
-    _getWrapper: function () {
-        return this.$tr;
-    },
-
     populate: function (items) {
-        BI.CenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);/**
@@ -30889,7 +30831,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
         baseCls: "bi-vertical-adapt-layout",
         columnSize: [],
-        horizontalAlign: BI.HorizontalAlign.Left,
+        scrollx: false,
         hgap: 0,
         vgap: 0,
         lgap: 0,
@@ -30897,85 +30839,27 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         tgap: 0,
         bgap: 0
     },
+
     render: function () {
+        var self = this, o = this.options;
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        return {
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+            type: "bi.horizontal",
-            position: "relative",
+            verticalAlign: BI.VerticalAlign.Middle,
-            width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
+            horizontalAlign: BI.HorizontalAlign.Left,
-            height: "100%",
+            columnSize: o.columnSize,
-            "white-space": "nowrap",
+            items: o.items,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            ref: function (_ref) {
-            "border-collapse": "separate"
+                self.layout = _ref;
-        });
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
             },
-
+            hgap: o.hgap,
-    _getWrapper: function () {
+            vgap: o.vgap,
-        return this.$tr;
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
@@ -30983,8 +30867,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.VerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);/**

dist/fineui.ie.js

@@ -19265,7 +19265,7 @@ BI.prepares.push(function () {
         return _isSupprtFlex;
     };
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
-        if (!BI.isIE() && isSupportFlex()) {
+        if (!BI.isIE() && isSupportFlex() && ob.items && ob.items.length <= 1) {
             return BI.extend(ob, {type: "bi.flex_horizontal"});
         }
         return ob;
@@ -30657,6 +30657,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-center-adapt-layout",
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -30666,92 +30667,33 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options, self = this;
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        return {
-            position: "relative",
+            type: "bi.horizontal",
-            width: "100%",
+            verticalAlign: BI.VerticalAlign.Middle,
-            height: "100%",
+            horizontalAlign: BI.HorizontalAlign.Center,
-            "white-space": "nowrap",
+            columnSize: o.columnSize,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            items: o.items,
-            "border-collapse": "separate"
+            ref: function (_ref) {
-        });
+                self.layout = _ref;
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-        td.element.css({"max-width": o.columnSize[i]});
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
             },
-
+            hgap: o.hgap,
-    appendFragment: function (frag) {
+            vgap: o.vgap,
-        this.$tr.append(frag);
+            lgap: o.lgap,
-        this.element.append(this.$table);
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
         // console.log("center_adapt布局不需要resize");
     },
 
-    _getWrapper: function () {
-        return this.$tr;
-    },
-
     populate: function (items) {
-        BI.CenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);/**
@@ -31131,7 +31073,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
         baseCls: "bi-vertical-adapt-layout",
         columnSize: [],
-        horizontalAlign: BI.HorizontalAlign.Left,
+        scrollx: false,
         hgap: 0,
         vgap: 0,
         lgap: 0,
@@ -31139,85 +31081,27 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         tgap: 0,
         bgap: 0
     },
+
     render: function () {
+        var self = this, o = this.options;
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        return {
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+            type: "bi.horizontal",
-            position: "relative",
+            verticalAlign: BI.VerticalAlign.Middle,
-            width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
+            horizontalAlign: BI.HorizontalAlign.Left,
-            height: "100%",
+            columnSize: o.columnSize,
-            "white-space": "nowrap",
+            items: o.items,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            ref: function (_ref) {
-            "border-collapse": "separate"
+                self.layout = _ref;
-        });
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
             },
-
+            hgap: o.hgap,
-    _getWrapper: function () {
+            vgap: o.vgap,
-        return this.$tr;
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
@@ -31225,8 +31109,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.VerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);/**

dist/fineui.js

@@ -19265,7 +19265,7 @@ BI.prepares.push(function () {
         return _isSupprtFlex;
     };
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
-        if (!BI.isIE() && isSupportFlex()) {
+        if (!BI.isIE() && isSupportFlex() && ob.items && ob.items.length <= 1) {
             return BI.extend(ob, {type: "bi.flex_horizontal"});
         }
         return ob;
@@ -30657,6 +30657,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-center-adapt-layout",
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -30666,92 +30667,33 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options, self = this;
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        return {
-            position: "relative",
+            type: "bi.horizontal",
-            width: "100%",
+            verticalAlign: BI.VerticalAlign.Middle,
-            height: "100%",
+            horizontalAlign: BI.HorizontalAlign.Center,
-            "white-space": "nowrap",
+            columnSize: o.columnSize,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            items: o.items,
-            "border-collapse": "separate"
+            ref: function (_ref) {
-        });
+                self.layout = _ref;
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-        td.element.css({"max-width": o.columnSize[i]});
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
             },
-
+            hgap: o.hgap,
-    appendFragment: function (frag) {
+            vgap: o.vgap,
-        this.$tr.append(frag);
+            lgap: o.lgap,
-        this.element.append(this.$table);
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
         // console.log("center_adapt布局不需要resize");
     },
 
-    _getWrapper: function () {
-        return this.$tr;
-    },
-
     populate: function (items) {
-        BI.CenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);/**
@@ -31131,7 +31073,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
         baseCls: "bi-vertical-adapt-layout",
         columnSize: [],
-        horizontalAlign: BI.HorizontalAlign.Left,
+        scrollx: false,
         hgap: 0,
         vgap: 0,
         lgap: 0,
@@ -31139,85 +31081,27 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         tgap: 0,
         bgap: 0
     },
+
     render: function () {
+        var self = this, o = this.options;
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        return {
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+            type: "bi.horizontal",
-            position: "relative",
+            verticalAlign: BI.VerticalAlign.Middle,
-            width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
+            horizontalAlign: BI.HorizontalAlign.Left,
-            height: "100%",
+            columnSize: o.columnSize,
-            "white-space": "nowrap",
+            items: o.items,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            ref: function (_ref) {
-            "border-collapse": "separate"
+                self.layout = _ref;
-        });
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
             },
-
+            hgap: o.hgap,
-    _getWrapper: function () {
+            vgap: o.vgap,
-        return this.$tr;
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
@@ -31225,8 +31109,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.VerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);/**

dist/fineui_without_jquery_polyfill.js

@@ -19426,6 +19426,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-center-adapt-layout",
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -19435,92 +19436,33 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options, self = this;
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        return {
-            position: "relative",
+            type: "bi.horizontal",
-            width: "100%",
+            verticalAlign: BI.VerticalAlign.Middle,
-            height: "100%",
+            horizontalAlign: BI.HorizontalAlign.Center,
-            "white-space": "nowrap",
+            columnSize: o.columnSize,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            items: o.items,
-            "border-collapse": "separate"
+            ref: function (_ref) {
-        });
+                self.layout = _ref;
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-        td.element.css({"max-width": o.columnSize[i]});
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
             },
-
+            hgap: o.hgap,
-    appendFragment: function (frag) {
+            vgap: o.vgap,
-        this.$tr.append(frag);
+            lgap: o.lgap,
-        this.element.append(this.$table);
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
         // console.log("center_adapt布局不需要resize");
     },
 
-    _getWrapper: function () {
-        return this.$tr;
-    },
-
     populate: function (items) {
-        BI.CenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);/**
@@ -19900,7 +19842,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
         baseCls: "bi-vertical-adapt-layout",
         columnSize: [],
-        horizontalAlign: BI.HorizontalAlign.Left,
+        scrollx: false,
         hgap: 0,
         vgap: 0,
         lgap: 0,
@@ -19908,85 +19850,27 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         tgap: 0,
         bgap: 0
     },
+
     render: function () {
+        var self = this, o = this.options;
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        return {
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+            type: "bi.horizontal",
-            position: "relative",
+            verticalAlign: BI.VerticalAlign.Middle,
-            width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
+            horizontalAlign: BI.HorizontalAlign.Left,
-            height: "100%",
+            columnSize: o.columnSize,
-            "white-space": "nowrap",
+            items: o.items,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            ref: function (_ref) {
-            "border-collapse": "separate"
+                self.layout = _ref;
-        });
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
             },
-
+            hgap: o.hgap,
-    _getWrapper: function () {
+            vgap: o.vgap,
-        return this.$tr;
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
@@ -19994,8 +19878,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.VerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);/**

src/core/platform/web/config.js

@@ -9,7 +9,7 @@ BI.prepares.push(function () {
         return _isSupprtFlex;
     };
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
-        if (!BI.isIE() && isSupportFlex()) {
+        if (!BI.isIE() && isSupportFlex() && ob.items && ob.items.length <= 1) {
             return BI.extend(ob, {type: "bi.flex_horizontal"});
         }
         return ob;

src/core/wrapper/layout/adapt/adapt.center.js

@@ -8,6 +8,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-center-adapt-layout",
             columnSize: [],
+            scrollx: false,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -17,92 +18,33 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options, self = this;
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        return {
-            position: "relative",
+            type: "bi.horizontal",
-            width: "100%",
+            verticalAlign: BI.VerticalAlign.Middle,
-            height: "100%",
+            horizontalAlign: BI.HorizontalAlign.Center,
-            "white-space": "nowrap",
+            columnSize: o.columnSize,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            items: o.items,
-            "border-collapse": "separate"
+            ref: function (_ref) {
-        });
+                self.layout = _ref;
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
             },
-
+            hgap: o.hgap,
-    _addElement: function (i, item) {
+            vgap: o.vgap,
-        var o = this.options;
+            lgap: o.lgap,
-        var td;
+            rgap: o.rgap,
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
+            tgap: o.tgap,
-        if (!this.hasWidget(this._getChildName(i))) {
+            bgap: o.bgap
-            var w = BI.createWidget(item);
+        };
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-        td.element.css({"max-width": o.columnSize[i]});
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
     },
 
     resize: function () {
         // console.log("center_adapt布局不需要resize");
     },
 
-    _getWrapper: function () {
-        return this.$tr;
-    },
-
     populate: function (items) {
-        BI.CenterAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);

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

@@ -7,7 +7,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     props: {
         baseCls: "bi-vertical-adapt-layout",
         columnSize: [],
-        horizontalAlign: BI.HorizontalAlign.Left,
+        scrollx: false,
         hgap: 0,
         vgap: 0,
         lgap: 0,
@@ -15,85 +15,27 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         tgap: 0,
         bgap: 0
     },
+
     render: function () {
+        var self = this, o = this.options;
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        return {
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+            type: "bi.horizontal",
-            position: "relative",
+            verticalAlign: BI.VerticalAlign.Middle,
-            width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
+            horizontalAlign: BI.HorizontalAlign.Left,
-            height: "100%",
+            columnSize: o.columnSize,
-            "white-space": "nowrap",
+            items: o.items,
-            "border-spacing": "0px",
+            scrollx: o.scrollx,
-            border: "none",
+            ref: function (_ref) {
-            "border-collapse": "separate"
+                self.layout = _ref;
-        });
-        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
-        this.$tr.appendTo(this.$table);
-        this.populate(this.options.items);
-    },
-
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td;
-        var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i];
-        if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI.createWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI.createWidget({
-                type: "bi.default",
-                tagName: "td",
-                attributes: {
-                    width: width
-                },
-                items: [w]
-            });
-            this.addWidget(this._getChildName(i), td);
-        } else {
-            td = this.getWidgetByName(this._getChildName(i));
-            td.element.attr("width", width);
-        }
-
-        if (i === 0) {
-            td.element.addClass("first-element");
-        }
-        td.element.css({
-            position: "relative",
-            height: "100%",
-            "vertical-align": "middle",
-            margin: "0",
-            padding: "0",
-            border: "none"
-        });
-        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) + "px"
-            });
-        }
-        if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px"
-            });
-        }
-        if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
-            w.element.css({
-                "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px"
-            });
-        }
-        if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
-            w.element.css({
-                "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px"
-            });
-        }
-        return td;
-    },
-
-    appendFragment: function (frag) {
-        this.$tr.append(frag);
-        this.element.append(this.$table);
             },
-
+            hgap: o.hgap,
-    _getWrapper: function () {
+            vgap: o.vgap,
-        return this.$tr;
+            lgap: o.lgap,
+            rgap: o.rgap,
+            tgap: o.tgap,
+            bgap: o.bgap
+        };
     },
 
     resize: function () {
@@ -101,8 +43,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     },
 
     populate: function (items) {
-        BI.VerticalAdaptLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate.apply(this, arguments);
-        this._mount();
     }
 });
 BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);