BI-34288 horizontal配置vertical_adapt/horizontal_adapt/center_adapt与demo

demo/js/core/layout/demo.horizontal.js

@@ -7,7 +7,11 @@ Demo.Horizontal = BI.inherit(BI.Widget, {
     },
     render: function () {
         return {
+            type: "bi.vertical",
+            vgap: 10,
+            items: [{
                 type: "bi.horizontal",
+                height: 150,
                 hgap: 10,
                 items: [{
                     type: "bi.label",
@@ -35,6 +39,87 @@ Demo.Horizontal = BI.inherit(BI.Widget, {
                     width: 300,
                     height: 30
                 }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.horizontal",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Middle,
+                horizontalAlign: BI.HorizontalAlign.Left,
+                vgap: 10,
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal实现的vertical_adapt垂直居中",
+                    cls: "layout-bg1",
+                    width: 300,
+                    height: 30
+                }, {
+                    type: "bi.label",
+                    text: "以horizontal实现的vertical_adapt垂直居中",
+                    cls: "layout-bg2",
+                    width: 300,
+                    height: 30
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.horizontal",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Top,
+                horizontalAlign: BI.HorizontalAlign.Center,
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)",
+                    cls: "layout-bg1",
+                    width: 300,
+                    height: 30
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.horizontal",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Top,
+                horizontalAlign: BI.HorizontalAlign.Center,
+                columnSize: [300, "fill"],
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal代替horizontal_adapt实现的用于水平适应布局",
+                    cls: "layout-bg1",
+                    height: 30
+                }, {
+                    type: "bi.label",
+                    text: "以horizontal代替horizontal_adapt实现的水平自适应列",
+                    cls: "layout-bg2",
+                    height: 30
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.center_adapt",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Middle,
+                horizontalAlign: BI.HorizontalAlign.Center,
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal代替center_adapt实现的水平垂直居中",
+                    width: 300,
+                    height: 100,
+                    cls: "layout-bg1"
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }]
         };
     }
 });

dist/bundle.ie.js

@@ -31262,7 +31262,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
- * 自适应水平和垂直方向都居中容器
+ * 使用display:table和display:table-cell实现的horizontal布局
  * @class BI.TableCenterAdaptLayout
  * @extends BI.Layout
  */
@@ -31271,6 +31271,8 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-table-center-adapt-layout",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31280,12 +31282,13 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: "100%",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
-            height: "100%",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "white-space": "nowrap"
         });
         this.populate(this.options.items);
@@ -31309,7 +31312,7 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        td.element.css({"max-width": o.columnSize[i]});
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -32748,8 +32751,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -32759,10 +32762,13 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
@@ -32792,7 +32798,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.attr("width", width);
         }
-
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }

dist/bundle.js

@@ -31262,7 +31262,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
- * 自适应水平和垂直方向都居中容器
+ * 使用display:table和display:table-cell实现的horizontal布局
  * @class BI.TableCenterAdaptLayout
  * @extends BI.Layout
  */
@@ -31271,6 +31271,8 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-table-center-adapt-layout",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31280,12 +31282,13 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: "100%",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
-            height: "100%",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "white-space": "nowrap"
         });
         this.populate(this.options.items);
@@ -31309,7 +31312,7 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        td.element.css({"max-width": o.columnSize[i]});
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -32748,8 +32751,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -32759,10 +32762,13 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
@@ -32792,7 +32798,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.attr("width", width);
         }
-
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }

dist/core.js

@@ -31262,7 +31262,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
- * 自适应水平和垂直方向都居中容器
+ * 使用display:table和display:table-cell实现的horizontal布局
  * @class BI.TableCenterAdaptLayout
  * @extends BI.Layout
  */
@@ -31271,6 +31271,8 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-table-center-adapt-layout",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31280,12 +31282,13 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: "100%",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
-            height: "100%",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "white-space": "nowrap"
         });
         this.populate(this.options.items);
@@ -31309,7 +31312,7 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        td.element.css({"max-width": o.columnSize[i]});
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -32748,8 +32751,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -32759,10 +32762,13 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
@@ -32792,7 +32798,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.attr("width", width);
         }
-
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }

dist/demo.js

@@ -5973,7 +5973,11 @@ Demo.Horizontal = BI.inherit(BI.Widget, {
     },
     render: function () {
         return {
+            type: "bi.vertical",
+            vgap: 10,
+            items: [{
                 type: "bi.horizontal",
+                height: 150,
                 hgap: 10,
                 items: [{
                     type: "bi.label",
@@ -6001,6 +6005,87 @@ Demo.Horizontal = BI.inherit(BI.Widget, {
                     width: 300,
                     height: 30
                 }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.horizontal",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Middle,
+                horizontalAlign: BI.HorizontalAlign.Left,
+                vgap: 10,
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal实现的vertical_adapt垂直居中",
+                    cls: "layout-bg1",
+                    width: 300,
+                    height: 30
+                }, {
+                    type: "bi.label",
+                    text: "以horizontal实现的vertical_adapt垂直居中",
+                    cls: "layout-bg2",
+                    width: 300,
+                    height: 30
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.horizontal",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Top,
+                horizontalAlign: BI.HorizontalAlign.Center,
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)",
+                    cls: "layout-bg1",
+                    width: 300,
+                    height: 30
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.horizontal",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Top,
+                horizontalAlign: BI.HorizontalAlign.Center,
+                columnSize: [300, "fill"],
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal代替horizontal_adapt实现的用于水平适应布局",
+                    cls: "layout-bg1",
+                    height: 30
+                }, {
+                    type: "bi.label",
+                    text: "以horizontal代替horizontal_adapt实现的水平自适应列",
+                    cls: "layout-bg2",
+                    height: 30
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }, {
+                type: "bi.center_adapt",
+                height: 150,
+                verticalAlign: BI.VerticalAlign.Middle,
+                horizontalAlign: BI.HorizontalAlign.Center,
+                items: [{
+                    type: "bi.label",
+                    text: "以horizontal代替center_adapt实现的水平垂直居中",
+                    width: 300,
+                    height: 100,
+                    cls: "layout-bg1"
+                }]
+            }, {
+                type: "bi.layout",
+                height: 1,
+                cls: "bi-border-bottom bi-high-light-border"
+            }]
         };
     }
 });

dist/fineui.ie.js

@@ -31504,7 +31504,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
- * 自适应水平和垂直方向都居中容器
+ * 使用display:table和display:table-cell实现的horizontal布局
  * @class BI.TableCenterAdaptLayout
  * @extends BI.Layout
  */
@@ -31513,6 +31513,8 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-table-center-adapt-layout",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31522,12 +31524,13 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: "100%",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
-            height: "100%",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "white-space": "nowrap"
         });
         this.populate(this.options.items);
@@ -31551,7 +31554,7 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        td.element.css({"max-width": o.columnSize[i]});
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -32990,8 +32993,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -33001,10 +33004,13 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
@@ -33034,7 +33040,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.attr("width", width);
         }
-
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }

dist/fineui.js

@@ -31504,7 +31504,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
- * 自适应水平和垂直方向都居中容器
+ * 使用display:table和display:table-cell实现的horizontal布局
  * @class BI.TableCenterAdaptLayout
  * @extends BI.Layout
  */
@@ -31513,6 +31513,8 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-table-center-adapt-layout",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -31522,12 +31524,13 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: "100%",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
-            height: "100%",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "white-space": "nowrap"
         });
         this.populate(this.options.items);
@@ -31551,7 +31554,7 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        td.element.css({"max-width": o.columnSize[i]});
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -32990,8 +32993,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -33001,10 +33004,13 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
@@ -33034,7 +33040,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.attr("width", width);
         }
-
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }

dist/fineui_without_jquery_polyfill.js

@@ -20273,7 +20273,7 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
     }
 });
 BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
- * 自适应水平和垂直方向都居中容器
+ * 使用display:table和display:table-cell实现的horizontal布局
  * @class BI.TableCenterAdaptLayout
  * @extends BI.Layout
  */
@@ -20282,6 +20282,8 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TableCenterAdaptLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-table-center-adapt-layout",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -20291,12 +20293,13 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.TableCenterAdaptLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: "100%",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
-            height: "100%",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "white-space": "nowrap"
         });
         this.populate(this.options.items);
@@ -20320,7 +20323,7 @@ BI.TableCenterAdaptLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        td.element.css({"max-width": o.columnSize[i]});
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }
@@ -21759,8 +21762,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -21770,10 +21773,13 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
@@ -21803,7 +21809,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.attr("width", width);
         }
-
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }

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

@@ -8,8 +8,8 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.HorizontalLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-horizontal-layout",
             verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: BI.HorizontalAlign.Left,
             columnSize: [],
-            scrollx: true,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -19,10 +19,13 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
+        var o = this.options;
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
         this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
+            height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto",
+            width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
@@ -52,7 +55,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.attr("width", width);
         }
-
+        td.element.css({"max-width": o.columnSize[i] + "px"});
         if (i === 0) {
             td.element.addClass("first-element");
         }