布局demo

demo/js/config.js

@@ -17,108 +17,72 @@ Demo.CONFIG = [{
     pId: 1,
     text: "bi.center_adapt",
     value: "demo.center_adapt"
-}, {
-    pId: 1,
-    text: "bi.float_center_adapt",
-    value: "float_center_adapt"
-}, {
-    pId: 1,
-    text: "bi.absolute_center_adapt",
-    value: "absolute_center_adapt"
-}, {
-    pId: 1,
-    text: "bi.flex_center",
-    value: "flex_center"
-}, {
-    pId: 1,
-    text: "bi.inline_center_adapt",
-    value: "inline_center_adapt"
 }, {
     pId: 1,
     text: "bi.vertical_adapt",
-    value: "vertical_adapt"
-}, {
-    pId: 1,
-    text: "bi.inline_vertical_adapt",
-    value: "inline_vertical_adapt"
+    value: "demo.vertical_adapt"
 }, {
     pId: 1,
     text: "bi.horizontal_adapt",
-    value: "horizontal_adapt"
+    value: "demo.horizontal_adapt"
 }, {
     pId: 1,
     text: "bi.horizontal_auto",
-    value: "horizontal_auto"
+    value: "demo.horizontal_auto"
 }, {
     pId: 1,
     text: "bi.horizontal_float",
-    value: "horizontal_float"
+    value: "demo.horizontal_float"
 }, {
     pId: 1,
     text: "bi.left_right_vertical_adapt",
-    value: "left_right_vertical_adapt"
+    value: "demo.left_right_vertical_adapt"
 }, {
     pId: 1,
     text: "bi.center",
-    value: "center"
+    value: "demo.center_layout"
 }, {
     pId: 1,
     text: "bi.float_center",
-    value: "float_center"
+    value: "demo.float_center"
 }, {
     pId: 1,
     text: "bi.vertical",
-    value: "vertical"
+    value: "demo.vertical"
 }, {
     pId: 1,
     text: "bi.horizontal",
-    value: "horizontal"
+    value: "demo.horizontal"
 }, {
     pId: 1,
     text: "bi.border",
-    value: "border"
-}, {
-    pId: 1,
-    text: "bi.card",
-    value: "card"
+    value: "demo.border"
 }, {
     pId: 1,
     text: "bi.left, bi.right",
-    value: "flow"
-}, {
-    pId: 1,
-    text: "bi.lattice",
-    value: "lattice"
+    value: "demo.flow"
 }, {
     pId: 1,
     text: "bi.inline",
-    value: "inline"
+    value: "demo.inline"
 }, {
     pId: 1,
     text: "bi.htape",
-    value: "htape"
+    value: "demo.htape"
 }, {
     pId: 1,
     text: "bi.vtape",
-    value: "vtape"
+    value: "demo.vtape"
 }, {
     pId: 1,
     text: "bi.grid",
-    value: "grid"
+    value: "demo.grid"
 }, {
     pId: 1,
     text: "bi.table",
-    value: "table"
-}, {
-    pId: 1,
-    text: "bi.division",
-    value: "division"
-}, {
-    pId: 1,
-    text: "bi.window",
-    value: "window"
+    value: "demo.table_layout"
 }, {
     pId: 1,
     text: "bi.td",
-    value: "td"
+    value: "demo.td"
 }];

demo/js/layout/demo.border.js

@@ -0,0 +1,97 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.BorderLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-border"
+    },
+
+    _createNorth: function(){
+        return BI.createWidget({
+            type: "bi.label",
+            text: "North",
+            cls: "layout-bg1",
+            height: 30
+        })
+    },
+
+    _createWest: function(){
+        return BI.createWidget({
+            type: "bi.center",
+            cls: "layout-bg2",
+            items:[{
+                type: "bi.label",
+                text: "West",
+                whiteSpace: "normal"
+            }]
+        })
+    },
+
+    _createCenter: function(){
+        return BI.createWidget({
+            type: "bi.center",
+            cls: "layout-bg3",
+            items: [{
+                type: "bi.label",
+                text: "Center",
+                whiteSpace: "normal"
+            }]
+        })
+    },
+
+    _createEast: function(){
+        return BI.createWidget({
+            type: "bi.center",
+            cls: "layout-bg5",
+            items: [{
+                type: "bi.label",
+                text: "East",
+                whiteSpace: "normal"
+            }]
+        })
+    },
+
+    _createSouth: function(){
+        return BI.createWidget({
+            type: "bi.label",
+            text: "South",
+            cls: "layout-bg6",
+            height: 50
+        })
+    },
+
+    render: function () {
+        return {
+            type: "bi.border",
+            cls: "",
+            items: {
+                north: {
+                    el: this._createNorth(),
+                    height: 30,
+                    top: 20,
+                    left: 20,
+                    right: 20
+                },
+                south: {
+                    el: this._createSouth(),
+                    height: 50,
+                    bottom: 20,
+                    left: 20,
+                    right: 20
+                },
+                west: {
+                    el: this._createWest(),
+                    width: 200,
+                    left: 20
+                },
+                east: {
+                    el: this._createEast(),
+                    width: 300,
+                    right: 20
+                },
+                center: this._createCenter()
+            }
+        }
+    }
+});
+$.shortcut("demo.border", Demo.BorderLayout);

demo/js/layout/demo.center.js

@@ -0,0 +1,35 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.CenterLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-center"
+    },
+    render: function () {
+        return {
+            type: "bi.center",
+            items: [{
+                type: "bi.label",
+                text: "Center 1，这里虽然设置label的高度30，但是最终影响高度的是center布局",
+                cls: "layout-bg1",
+                whiteSpace: "normal"
+            },{
+                type: "bi.label",
+                text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal",
+                cls: "layout-bg2",
+                whiteSpace: "normal"
+            },{
+                type: "bi.label",
+                text: "Center 3",
+                cls: "layout-bg3"
+            },{
+                type: "bi.label",
+                text: "Center 4",
+                cls: "layout-bg5"
+            }],
+            hgap: 20,
+            vgap: 20
+        }
+    }
+});
+$.shortcut("demo.center_layout", Demo.CenterLayout);

demo/js/layout/demo.float_center.js

@@ -0,0 +1,27 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.FloatCenterLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-float-center"
+    },
+    render: function () {
+        return {
+            type: "bi.float_center",
+            items: [{
+                type: "bi.label",
+                text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度",
+                cls: "layout-bg1",
+                whiteSpace: "normal"
+            }, {
+                type: "bi.label",
+                text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度",
+                cls: "layout-bg2",
+                whiteSpace: "normal"
+            }],
+            hgap: 20,
+            vgap: 20
+        }
+    }
+});
+$.shortcut("demo.float_center", Demo.FloatCenterLayout);

demo/js/layout/demo.flow.js

@@ -0,0 +1,85 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.FlowLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-flow"
+    },
+    render: function () {
+        return {
+            type: "bi.center_adapt",
+            items: [{
+                type: "bi.left",
+                items: [{
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-1",
+                    cls: "layout-bg1",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-2",
+                    cls: "layout-bg2",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-3",
+                    cls: "layout-bg3",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-4",
+                    cls: "layout-bg4",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-5",
+                    cls: "layout-bg5",
+                    hgap: 20
+                }],
+                hgap: 20,
+                vgap: 20
+            }, {
+                type: "bi.right",
+                items: [{
+                    type: "bi.label",
+                    height: 30,
+                    text: "Right-1",
+                    cls: "layout-bg1",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Right-2",
+                    cls: "layout-bg2",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Right-3",
+                    cls: "layout-bg3",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Right-4",
+                    cls: "layout-bg4",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Right-5",
+                    cls: "layout-bg5",
+                    hgap: 20
+                }],
+                hgap: 20,
+                vgap: 20
+            }]
+        }
+    }
+});
+$.shortcut("demo.flow", Demo.FlowLayout);

demo/js/layout/demo.grid.js

@@ -0,0 +1,137 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.GridLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-grid"
+    },
+    render: function () {
+        return {
+            type: "bi.grid",
+            columns: 5,
+            rows: 3,
+            items: [{
+                column: 0,
+                row: 0,
+                el: {
+                    type: "bi.label",
+                    text: "column-0, row-0",
+                    cls: "layout-bg1"
+                }
+            }, {
+                column: 1,
+                row: 0,
+                el: {
+                    type: "bi.label",
+                    text: "column-1, row-0",
+                    cls: "layout-bg2"
+                }
+            }, {
+                column: 2,
+                row: 0,
+                el: {
+                    type: "bi.label",
+                    text: "column-2, row-0",
+                    cls: "layout-bg6"
+                }
+            }, {
+                column: 3,
+                row: 0,
+                el: {
+                    type: "bi.label",
+                    text: "column-3, row-0",
+                    cls: "layout-bg3"
+                }
+            }, {
+                column: 4,
+                row: 0,
+                el: {
+                    type: "bi.label",
+                    text: "column-4, row-0",
+                    cls: "layout-bg4"
+                }
+            }, {
+                column: 0,
+                row: 1,
+                el: {
+                    type: "bi.label",
+                    text: "column-0, row-1",
+                    cls: "layout-bg5"
+                }
+            }, {
+                column: 1,
+                row: 1,
+                el: {
+                    type: "bi.label",
+                    text: "column-1, row-1",
+                    cls: "layout-bg6"
+                }
+            }, {
+                column: 2,
+                row: 1,
+                el: {
+                    type: "bi.label",
+                    text: "column-2, row-1",
+                    cls: "layout-bg7"
+                }
+            }, {
+                column: 3,
+                row: 1,
+                el: {
+                    type: "bi.label",
+                    text: "column-3, row-1",
+                    cls: "layout-bg1"
+                }
+            }, {
+                column: 4,
+                row: 1,
+                el: {
+                    type: "bi.label",
+                    text: "column-4, row-1",
+                    cls: "layout-bg3"
+                }
+            }, {
+                column: 0,
+                row: 2,
+                el: {
+                    type: "bi.label",
+                    text: "column-0, row-2",
+                    cls: "layout-bg2"
+                }
+            }, {
+                column: 1,
+                row: 2,
+                el: {
+                    type: "bi.label",
+                    text: "column-1, row-2",
+                    cls: "layout-bg3"
+                }
+            }, {
+                column: 2,
+                row: 2,
+                el: {
+                    type: "bi.label",
+                    text: "column-2, row-2",
+                    cls: "layout-bg4"
+                }
+            }, {
+                column: 3,
+                row: 2,
+                el: {
+                    type: "bi.label",
+                    text: "column-3, row-2",
+                    cls: "layout-bg5"
+                }
+            }, {
+                column: 4,
+                row: 2,
+                el: {
+                    type: "bi.label",
+                    text: "column-4, row-2",
+                    cls: "layout-bg6"
+                }
+            }]
+        }
+    }
+});
+$.shortcut("demo.grid", Demo.GridLayout);

demo/js/layout/demo.horizontal.js

@@ -0,0 +1,50 @@
+/**
+ * Created by User on 2017/3/21.
+ */
+Demo.Horizontal = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-horizontal"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            items: [{
+                type: "bi.horizontal",
+                items: [{
+                    type: "bi.absolute",
+                    items: [{
+                        el: {
+                            type: "bi.text_button",
+                            cls: "layout-bg1",
+                            text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)",
+                            height: 30
+                        },
+                        left: 0,
+                        right: 0
+                    }],
+                    width: 100,
+                    height: 30
+                }, {
+                    type: "bi.absolute",
+                    items: [{
+                        el: {
+                            type: "bi.text_button",
+                            cls: "layout-bg2",
+                            text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)",
+                            height: 30
+                        },
+                        left: 0,
+                        right: 0
+                    }],
+                    width: 200,
+                    height: 30
+                }]
+            }],
+            lgap: 20,
+            rgap: 80,
+            tgap: 80,
+            bgap: 50
+        }
+    }
+});
+$.shortcut("demo.horizontal", Demo.Horizontal);

demo/js/layout/demo.horizontal_adapt.js

@@ -0,0 +1,42 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-horizontal-adapt"
+    },
+
+    _createLayout: function () {
+        return BI.createWidget({
+            type: "bi.horizontal_adapt",
+            vgap: 10,
+            items: [{
+                type: "bi.label",
+                text: "Horizontal Adapt左右自适应",
+                cls: "layout-bg1",
+                width: 300,
+                height: 30
+            }, {
+                type: "bi.label",
+                text: "Horizontal Adapt左右自适应",
+                cls: "layout-bg2",
+                //width: 300,
+                height: 30
+            }]
+        })
+    },
+    
+    render: function () {
+        return {
+            type: "bi.grid",
+            columns: 1,
+            rows: 2,
+            items: [{
+                column: 0,
+                row: 0,
+                el: this._createLayout()
+            }]
+        }
+    }
+});
+$.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt);

demo/js/layout/demo.horizontal_auto.js

@@ -0,0 +1,42 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.HorizontalAuto = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-horizontal-auto"
+    },
+
+    _createLayout: function () {
+        return BI.createWidget({
+            type: "bi.horizontal_auto",
+            vgap: 10,
+            items: [{
+                type: "bi.label",
+                text: "Horizontal Auto左右自适应",
+                cls: "layout-bg1",
+                width: 300,
+                height: 30
+            }, {
+                type: "bi.label",
+                text: "Horizontal Auto左右自适应",
+                cls: "layout-bg2",
+                width: 300,
+                height: 30
+            }]
+        })
+    },
+    
+    render: function () {
+        return {
+            type: "bi.grid",
+            columns: 1,
+            rows: 2,
+            items: [{
+                column: 0,
+                row: 0,
+                el: this._createLayout()
+            }]
+        }
+    }
+});
+$.shortcut("demo.horizontal_auto", Demo.HorizontalAuto);

demo/js/layout/demo.horizontal_float.js

@@ -0,0 +1,35 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.HorizontalFloat = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-horizontal-float"
+    },
+
+    _createLayout: function () {
+        return BI.createWidget({
+            type: "bi.horizontal_float",
+            vgap: 10,
+            items: [{
+                type: "bi.label",
+                text: "Horizontal Float左右自适应",
+                cls: "layout-bg1",
+                width: 100
+            }]
+        })
+    },
+    
+    render: function () {
+        return {
+            type: "bi.grid",
+            columns: 1,
+            rows: 2,
+            items: [{
+                column: 0,
+                row: 0,
+                el: this._createLayout()
+            }]
+        }
+    }
+});
+$.shortcut("demo.horizontal_float", Demo.HorizontalFloat);

demo/js/layout/demo.htape.js

@@ -0,0 +1,38 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.HtapeLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-htape"
+    },
+    render: function () {
+        return {
+            type: "bi.htape",
+            items : [
+                {
+                    width: 100,
+                    el : {
+                        type : 'bi.label',
+                        text : '1',
+                        cls: "layout-bg1"
+                    }
+                }, {
+                    width: 200,
+                    el : {
+                        type : 'bi.label',
+                        text : '2',
+                        cls: "layout-bg2"
+                    }
+                }, {
+                    width: 'fill',
+                    el : {
+                        type : 'bi.label',
+                        text : '3',
+                        cls: "layout-bg3"
+                    }
+                }
+            ]
+        }
+    }
+});
+$.shortcut("demo.htape", Demo.HtapeLayout);

demo/js/layout/demo.inline.js

@@ -0,0 +1,47 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.InlineLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-inline"
+    },
+    render: function () {
+        return {
+            type: "bi.inline",
+            items: [{
+                type: "bi.label",
+                height: 30,
+                text: "Left-1",
+                cls: "layout-bg1",
+                hgap: 200
+            }, {
+                type: "bi.label",
+                height: 30,
+                text: "Left-2",
+                cls: "layout-bg2",
+                hgap: 200
+            }, {
+                type: "bi.label",
+                height: 30,
+                text: "Left-3",
+                cls: "layout-bg3",
+                hgap: 200
+            }, {
+                type: "bi.label",
+                height: 30,
+                text: "Left-4",
+                cls: "layout-bg4",
+                hgap: 200
+            }, {
+                type: "bi.label",
+                height: 30,
+                text: "Left-5",
+                cls: "layout-bg5",
+                hgap: 200
+            }],
+            hgap: 20,
+            vgap: 20
+        }
+    }
+});
+$.shortcut("demo.inline", Demo.InlineLayout);

demo/js/layout/demo.left_right_vertical_adapt.js

@@ -0,0 +1,44 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-left-right-vertical-adapt"
+    },
+    render: function () {
+        return {
+            type: "bi.left_right_vertical_adapt",
+            lhgap: 10,
+            rhgap: 30,
+            items: {
+                left: [{
+                    type: "bi.label",
+                    text: "左边的垂直居中",
+                    cls: "layout-bg1",
+                    width: 100,
+                    height: 30
+                }, {
+                    type: "bi.label",
+                    text: "左边的垂直居中",
+                    cls: "layout-bg2",
+                    width: 100,
+                    height: 30
+                }],
+                right: [{
+                    type: "bi.label",
+                    text: "右边的垂直居中",
+                    cls: "layout-bg1",
+                    width: 100,
+                    height: 30
+                }, {
+                    type: "bi.label",
+                    text: "右边的垂直居中",
+                    cls: "layout-bg2",
+                    width: 100,
+                    height: 30
+                }]
+            }
+        }
+    }
+});
+$.shortcut("demo.left_right_vertical_adapt", Demo.LeftRightVerticalAdaptLayout);

demo/js/layout/demo.table.js

@@ -0,0 +1,162 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.TableLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-table-layout"
+    },
+
+    _createTable1: function () {
+        return {
+            type: "bi.table",
+            items: BI.createItems([
+                [
+                    {
+                        el: {
+                            cls: "layout-bg1"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg2"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg3"
+                        }
+                    }
+                ],
+                [
+                    {
+                        el: {
+                            cls: "layout-bg4"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg5"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg6"
+                        }
+                    }
+                ],
+                [
+                    {
+                        el: {
+                            cls: "layout-bg7"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg8"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg1"
+                        }
+                    }
+                ],
+                [
+                    {
+                        el: {
+                            cls: "layout-bg2"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg3"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg4"
+                        }
+                    }
+                ],
+                [
+                    {
+                        el: {
+                            cls: "layout-bg5"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg6"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg7"
+                        }
+                    }
+                ],
+                [
+                    {
+                        el: {
+                            cls: "layout-bg8"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg1"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg2"
+                        }
+                    }
+                ],
+                [
+                    {
+                        el: {
+                            cls: "layout-bg6"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg7"
+                        }
+                    },
+                    {
+                        el: {
+                            cls: "layout-bg8"
+                        }
+                    }
+                ]
+            ], {
+                type: "bi.layout"
+            }),
+            columnSize: [100, "fill", 200],
+            rowSize: [10, 30, 50, 70, 90, 110, 130],
+            hgap: 20,
+            vgap: 10
+        }
+    },
+    
+    render: function () {
+        return {
+            type: "bi.grid",
+            columns: 1,
+            rows: 1,
+            items: [
+                {
+                    column: 0,
+                    row: 0,
+                    el: this._createTable1()
+                }
+                //, {
+                //    column: 0,
+                //    row: 1,
+                //    el: this._createTable2()
+                //}
+            ]
+        }
+    }
+});
+$.shortcut("demo.table_layout", Demo.TableLayout);

demo/js/layout/demo.td.js

@@ -0,0 +1,59 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.TdLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-td"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            items: [{
+                type: "bi.td",
+                columnSize: [100, 100, ""],
+                items: BI.createItems([
+                    [{
+                        el: {
+                            type: 'bi.label',
+                            text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写',
+                            cls: "layout-bg1"
+                        }
+                    }, {
+                        el: {
+                            type: 'bi.label',
+                            text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写',
+                            cls: "layout-bg2"
+                        }
+                    }, {
+                        el: {
+                            type: 'bi.label',
+                            text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写',
+                            cls: "layout-bg3"
+                        }
+                    }], [{
+                        el: {
+                            type: 'bi.label',
+                            text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写',
+                            cls: "layout-bg5"
+                        }
+                    }, {
+                        el: {
+                            type: 'bi.label',
+                            text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写',
+                            cls: "layout-bg6"
+                        }
+                    }, {
+                        el: {
+                            type: 'bi.label',
+                            text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写',
+                            cls: "layout-bg7"
+                        }
+                    }]
+                ], {
+                    whiteSpace: "normal"
+                })
+            }]
+        }
+    }
+});
+$.shortcut("demo.td", Demo.TdLayout);

demo/js/layout/demo.vertical.js

@@ -0,0 +1,25 @@
+/**
+ * Created by User on 2017/3/21.
+ */
+Demo.VerticalLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-vertical"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            items: [{
+                type: "bi.label",
+                cls: "layout-bg1",
+                text: "这里设置了hgap(水平间距)，vgap(垂直间距)",
+                height: 30
+            }, {
+                type: "bi.label",
+                cls: "layout-bg2",
+                text: "这里设置了hgap(水平间距)，vgap(垂直间距)",
+                height: 30
+            }]
+        }
+    }
+});
+$.shortcut("demo.vertical", Demo.VerticalLayout);

demo/js/layout/demo.vertical_adapt.js

@@ -0,0 +1,42 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-vertical-adapt"
+    },
+
+    _createLayout: function () {
+        return BI.createWidget({
+            type: "bi.vertical_adapt",
+            vgap: 10,
+            items: [{
+                type: "bi.label",
+                text: "Vertical Adapt上下自适应",
+                cls: "layout-bg1",
+                width: 300,
+                height: 30
+            }, {
+                type: "bi.label",
+                text: "Vertical Adapt上下自适应",
+                cls: "layout-bg2",
+                width: 300,
+                height: 30
+            }]
+        })
+    },
+    
+    render: function () {
+        return {
+            type: "bi.grid",
+            columns: 2,
+            rows: 1,
+            items: [{
+                column: 0,
+                row: 0,
+                el: this._createLayout()
+            }]
+        }
+    }
+});
+$.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout);

demo/js/layout/demo.vtape.js

@@ -0,0 +1,38 @@
+/**
+ * Created by User on 2017/3/22.
+ */
+Demo.VtapeLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-vtape"
+    },
+    render: function () {
+        return {
+            type: "bi.vtape",
+            items : [
+                {
+                    height: 100,
+                    el : {
+                        type : 'bi.label',
+                        text : '1',
+                        cls: "layout-bg1"
+                    }
+                }, {
+                    height: 200,
+                    el : {
+                        type : 'bi.label',
+                        text : '2',
+                        cls: "layout-bg2"
+                    }
+                }, {
+                    height: 'fill',
+                    el : {
+                        type : 'bi.label',
+                        text : '3',
+                        cls: "layout-bg3"
+                    }
+                }
+            ]
+        }
+    }
+});
+$.shortcut("demo.vtape", Demo.VtapeLayout);

dist/core.css

@@ -9807,7 +9807,7 @@ textarea::-webkit-scrollbar-thumb {
 /**** custom color(自定义颜色,用于特定场景) ****/
 @font-face {
   font-family: 'bi';
-  src: url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.svg#svgFontName') format('svg');
+  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg');
   
   /*  iOS 4.1- */
 }

dist/core.js

@@ -24841,7 +24841,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
         var self = this, o = this.options;
         this.left = BI.createWidget({
             type: "bi.vertical",
-            items: items,
+            items: [item],
             hgap: o.hgap,
             vgap: o.vgap,
             tgap: o.tgap,
@@ -24856,7 +24856,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
             items: [this.left]
         });
 
-        return left;
+        return this.left;
     },
 
     populate: function (items) {

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

@@ -39,7 +39,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
         var self = this, o = this.options;
         this.left = BI.createWidget({
             type: "bi.vertical",
-            items: items,
+            items: [item],
             hgap: o.hgap,
             vgap: o.vgap,
             tgap: o.tgap,
@@ -54,7 +54,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
             items: [this.left]
         });
 
-        return left;
+        return this.left;
     },
 
     populate: function (items) {

src/css/utils/widget.css

@@ -3,7 +3,7 @@
 /**** custom color(自定义颜色,用于特定场景) ****/
 @font-face {
   font-family: 'bi';
-  src: url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.svg#svgFontName') format('svg');
+  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg');
   
   /*  iOS 4.1- */
 }