KERNEL-14035 refactor: layout相关es6

src/core/index.js

@@ -16,6 +16,7 @@ import * as constant from "./constant";
 import * as logic from "./logic";
 import { Element } from "./element";
 import * as utils from "./utils";
+import * as wrapper from "./wrapper";
 
 export * from "./decorator";
 export * from "./2.base";
@@ -31,6 +32,7 @@ export * from "./h";
 export * from "./constant";
 export * from "./logic";
 export * from "./utils";
+export * from "./wrapper";
 
 export {
     StyleLoaderManager,
@@ -60,4 +62,5 @@ Object.assign(BI, {
     useInWorker,
     ...h,
     ...utils,
+    ...wrapper,
 });

src/core/wrapper/index.js

@@ -0,0 +1,2 @@
+export { Layout } from "./layout";
+export * from "./layout/index";

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

@@ -1,47 +1,54 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isFunction } from "../../../2.base";
+
 /**
  * absolute实现的居中布局
- * @class BI.AbsoluteCenterLayout
- * @extends BI.Layout
+ * @class AbsoluteCenterLayout
+ * @extends Layout
  */
-BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteCenterLayout extends Layout {
+    static xtype ="bi.absolute_center_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-c-a",
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
         w.element.css({
             position: "absolute",
             left: this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
             right: this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
             top: this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
             bottom: this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
-            margin: "auto"
+            margin: "auto",
         });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.AbsoluteCenterLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout);
+}

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

@@ -1,26 +1,35 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign } from "../../../constant";
+
 /**
- * absolute实现的居中布局
- * @class BI.AbsoluteHorizontalLayout
- * @extends BI.Layout
+ * absolute实现的水平布局
+ * @class AbsoluteHorizontalLayout
+ * @extends Layout
  */
-BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteHorizontalLayout extends Layout {
+    static xtype = "bi.absolute_horizontal_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-h-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
+            horizontalAlign: HorizontalAlign.Center,
             rowSize: [],
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.AbsoluteHorizontalLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.vtape",
             horizontalAlign: o.horizontalAlign,
@@ -29,8 +38,8 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -41,14 +50,13 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout);
+}

src/core/wrapper/layout/adapt/absolute.leftrightvertical.js

@@ -1,8 +1,16 @@
-BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isArray, each, map, stripEL } from "../../../2.base";
+import { VerticalAlign } from "../../../constant";
+
+@shortcut()
+export class AbsoluteLeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_left_right_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-lr-v-a",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: {},
             llgap: 0,
             lrgap: 0,
@@ -15,32 +23,34 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             items: this._formatItems(o.items),
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var self = this, o = this.options;
-        var left, right;
-        if (BI.isArray(items)) {
-            BI.each(items, function (i, item) {
+    _formatItems(items) {
+        const o = this.options;
+        let left, right;
+        if (isArray(items)) {
+            each(items, (i, item) => {
                 if (item.left) {
                     left = item.left;
                 }
@@ -49,85 +59,92 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 }
             });
         }
-        var leftItems = left || items.left || [];
-        var rightItems = right || items.right || [];
-        leftItems = BI.map(leftItems, function (i, item) {
-            var json = {
-                el: BI.stripEL(item),
-                width: item.width
+        let leftItems = left || items.left || [];
+        let rightItems = right || items.right || [];
+        leftItems = map(leftItems, (i, item) => {
+            const json = {
+                el: stripEL(item),
+                width: item.width,
             };
-            if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
+            if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             }
-            if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
+            if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             }
+            
             return json;
         });
-        rightItems = BI.map(rightItems, function (i, item) {
-            var json = {
-                el: BI.stripEL(item),
-                width: item.width
+        rightItems = map(rightItems, (i, item) => {
+            const json = {
+                el: stripEL(item),
+                width: item.width,
             };
-            if (o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.tgap = o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
+            if (o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.tgap = o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             }
-            if (o.rhgap + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
+            if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
+            if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.rvgap + o.rbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.bgap = o.rvgap + o.rbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
+            if (o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.bgap = o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             }
+            
             return json;
         });
+        
         return leftItems.concat({}, rightItems);
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.absolute_left_right_vertical_adapt", BI.AbsoluteLeftRightVerticalAdaptLayout);
+}
+
+@shortcut()
+export class AbsoluteRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_right_vertical_adapt";
 
-BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props () {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-r-v-a",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: [],
             lgap: 0,
             rgap: 0,
             hgap: 0,
             tgap: 0,
             bgap: 0,
-            vgap: 0
+            vgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.AbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render () {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             items: [{}].concat(o.items),
@@ -139,21 +156,20 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    resize: function () {
+    resize () {
         this.layout.stroke([{}].concat(this.options.items));
-    },
+    }
 
-    addItem: function () {
+    addItem () {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate (items) {
         this.layout.populate([{}].concat(items));
     }
-});
-BI.shortcut("bi.absolute_right_vertical_adapt", BI.AbsoluteRightVerticalAdaptLayout);
+}

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

@@ -1,26 +1,35 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { VerticalAlign } from "../../../constant";
+
 /**
  * absolute实现的居中布局
- * @class BI.AbsoluteVerticalLayout
- * @extends BI.Layout
+ * @class AbsoluteVerticalLayout
+ * @extends Layout
  */
-BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteVerticalLayout extends Layout {
+    static xtype = "bi.absolute_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-v-a",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.AbsoluteVerticalLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
             verticalAlign: o.verticalAlign,
@@ -29,8 +38,8 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -41,14 +50,13 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout);
+}

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

@@ -1,13 +1,21 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 自适应水平和垂直方向都居中容器
- * @class BI.CenterAdaptLayout
- * @extends BI.Layout
+ * @class CenterAdaptLayout
+ * @extends Layout
  */
-BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class CenterAdaptLayout extends Layout {
+    static xtype = "bi.center_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-c-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
+            horizontalAlign: HorizontalAlign.Center,
             columnSize: [],
             scrollx: false,
             hgap: 0,
@@ -15,23 +23,25 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.horizontal",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             horizontalAlign: o.horizontalAlign,
             columnSize: o.columnSize,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
             items: o.items,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -42,14 +52,13 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);
+}

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

@@ -1,8 +1,9 @@
+import { shortcut } from "../../../decorator";
+
 /**
  * 水平方向居中容器
- * @class BI.HorizontalAdaptLayout
- * @extends BI.Layout
  */
-BI.HorizontalAdaptLayout = function () {
-};
-BI.shortcut("bi.horizontal_adapt", BI.HorizontalAdaptLayout);
+@shortcut()
+export class HorizontalAdaptLayout {
+    static xtype = "bi.horizontal_adapt";
+}

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

@@ -1,15 +1,23 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isArray, each } from "../../../2.base";
+import { HorizontalAlign } from "../../../constant";
+
 /**
  * 左右分离，垂直方向居中容器
  *          items:{
                 left: [{el:{type:"bi.button"}}],
                 right:[{el:{type:"bi.button"}}]
             }
- * @class BI.LeftRightVerticalAdaptLayout
- * @extends BI.Layout
+ * @class LeftRightVerticalAdaptLayout
+ * @extends Layout
  */
-BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class LeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.left_right_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-lr-v-a",
             items: {},
             llgap: 0,
@@ -23,14 +31,15 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.LeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var leftRight = this._getLeftRight(o.items);
-        var layoutArray = [];
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        const leftRight = this._getLeftRight(o.items);
+        const layoutArray = [];
         if (leftRight.left || "left" in o.items) {
             layoutArray.push({
                 type: "bi.left",
@@ -39,8 +48,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 items: [{
                     el: {
                         type: "bi.vertical_adapt",
-                        ref: function (_ref) {
-                            self.left = _ref;
+                        ref: _ref => {
+                            this.left = _ref;
                         },
                         height: "100%",
                         items: leftRight.left || o.items.left,
@@ -49,9 +58,9 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                         rgap: o.lrgap,
                         tgap: o.ltgap,
                         bgap: o.lbgap,
-                        vgap: o.lvgap
-                    }
-                }]
+                        vgap: o.lvgap,
+                    },
+                }],
             });
         }
         if (leftRight.right || "right" in o.items) {
@@ -62,8 +71,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 items: [{
                     el: {
                         type: "bi.vertical_adapt",
-                        ref: function (_ref) {
-                            self.right = _ref;
+                        ref: _ref => {
+                            this.right = _ref;
                         },
                         height: "100%",
                         items: leftRight.right || o.items.right,
@@ -72,18 +81,19 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                         rgap: o.rrgap,
                         tgap: o.rtgap,
                         bgap: o.rbgap,
-                        vgap: o.rvgap
-                    }
-                }]
+                        vgap: o.rvgap,
+                    },
+                }],
             });
         }
+        
         return layoutArray;
-    },
+    }
 
-    _getLeftRight: function (items) {
-        var left, right;
-        if (BI.isArray(items)) {
-            BI.each(items, function (i, item) {
+    _getLeftRight(items) {
+        let left, right;
+        if (isArray(items)) {
+            each(items, (i, item) => {
                 if (item.left) {
                     left = item.left;
                 }
@@ -92,35 +102,37 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 }
             });
         }
+        
         return {
-            left: left,
-            right: right
+            left,
+            right,
         };
-    },
+    }
 
-    resize: function () {
-        var leftRight = this._getLeftRight(this.options.items);
+    resize() {
+        const leftRight = this._getLeftRight(this.options.items);
         this.left.stroke(leftRight.left || this.options.items.left);
         this.right.stroke(leftRight.right || this.options.items.right);
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        var leftRight = this._getLeftRight(items);
+    populate(items) {
+        const leftRight = this._getLeftRight(items);
         this.left.populate(leftRight.left || items.left);
         this.right.populate(leftRight.right || items.right);
     }
-});
-BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout);
+}
 
+@shortcut()
+export class LeftVerticalAdaptLayout extends Layout {
+    static xtype = "bi.left_vertical_adapt";
 
-BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-l-v-a",
             items: [],
             columnSize: [],
@@ -129,16 +141,18 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
             hgap: 0,
             tgap: 0,
             bgap: 0,
-            vgap: 0
+            vgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.LeftVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.vertical_adapt",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             columnSize: o.columnSize,
@@ -152,28 +166,30 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
     }
-});
-BI.shortcut("bi.left_vertical_adapt", BI.LeftVerticalAdaptLayout);
+}
 
-BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class RightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.right_vertical_adapt";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-r-v-a",
             items: [],
             columnSize: [],
@@ -182,18 +198,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             hgap: 0,
             tgap: 0,
             bgap: 0,
-            vgap: 0
+            vgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.vertical_adapt",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
-            horizontalAlign: BI.HorizontalAlign.Right,
+            horizontalAlign: HorizontalAlign.Right,
             items: o.items,
             columnSize: o.columnSize,
             hgap: o.hgap,
@@ -206,21 +224,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate(items);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);
+}

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

@@ -1,78 +1,91 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isFunction, some, isNull } from "../../../2.base";
+import { Widget } from "../../../4.widget";
+import { _lazyCreateWidget } from "../../../5.inject";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 使用display:table和display:table-cell实现的horizontal布局
- * @class BI.TableAdaptLayout
- * @extends BI.Layout
+ * @class TableAdaptLayout
+ * @extends Layout
  */
-BI.TableAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class TableAdaptLayout extends Layout {
+    static xtype = "bi.table_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-t-a",
             columnSize: [],
-            verticalAlign: BI.VerticalAlign.Top,
-            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.TableAdaptLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.$table = BI.Widget._renderEngine.createElement("<div>").css({
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.$table = Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto",
-            height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
-            "white-space": "nowrap"
+            width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto",
+            height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto",
+            "white-space": "nowrap",
         });
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _hasFill: function () {
-        var o = this.options;
+    _hasFill() {
+        const o = this.options;
         if (o.columnSize.length > 0) {
             return o.columnSize.indexOf("fill") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.width === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td, width = "";
-        var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+    _addElement(i, item) {
+        const o = this.options;
+        let td, width = "";
+        let w;
+        const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
         if (columnSize > 0) {
             width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
         }
-        if ((BI.isNull(columnSize) || columnSize === "") && this._hasFill()) {
+        if ((isNull(columnSize) || columnSize === "") && this._hasFill()) {
             width = 2;
         }
         if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI._lazyCreateWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI._lazyCreateWidget({
+            w = _lazyCreateWidget(item);
+            w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" });
+            td = _lazyCreateWidget({
                 type: "bi.default",
-                width: width,
-                items: [w]
+                width,
+                items: [w],
             });
             this.addWidget(this._getChildName(i), td);
         } else {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        if (o.verticalAlign === BI.VerticalAlign.Stretch) {
-            var top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
+        if (o.verticalAlign === VerticalAlign.Stretch) {
+            const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
                 bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
-            w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
+            w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`);
         }
         // 对于表现为td的元素设置最大宽度，有几点需要注意
         // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
@@ -81,7 +94,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         if (columnSize > 0) {
             td.element.css({
                 "max-width": width,
-                "min-width": width
+                "min-width": width,
             });
         }
         if (i === 0) {
@@ -91,20 +104,20 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
             position: "relative",
             display: "table-cell",
             "vertical-align": o.verticalAlign,
-            height: "100%"
+            height: "100%",
         });
         this._handleGap(w, item, i);
+        
         return td;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$table.append(frag);
         this.element.append(this.$table);
-    },
+    }
 
-    populate: function (items) {
-        BI.TableAdaptLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.table_adapt", BI.TableAdaptLayout);
+}

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

@@ -1,13 +1,20 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 垂直方向居中容器
- * @class BI.VerticalAdaptLayout
- * @extends BI.Layout
+ * @class VerticalAdaptLayout
+ * @extends Layout
  */
-BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: {
+@shortcut()
+export class VerticalAdaptLayout extends Layout {
+    static xtype = "bi.vertical_adapt";
+
+    props = {
         baseCls: "bi-v-a",
-        horizontalAlign: BI.HorizontalAlign.Left,
-        verticalAlign: BI.VerticalAlign.Middle,
+        horizontalAlign: HorizontalAlign.Left,
+        verticalAlign: VerticalAlign.Middle,
         columnSize: [],
         scrollx: false,
         hgap: 0,
@@ -15,12 +22,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         lgap: 0,
         rgap: 0,
         tgap: 0,
-        bgap: 0
-    },
+        bgap: 0,
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.horizontal",
             horizontalAlign: o.horizontalAlign,
@@ -30,8 +38,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -42,14 +50,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);
+}

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

@@ -1,44 +1,50 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isFunction } from "../../../2.base";
+
 /**
  * 水平方向居中自适应容器
- * @class BI.HorizontalAutoLayout
- * @extends BI.Layout
+ * @class HorizontalAutoLayout
+ * @extends Layout
  */
-BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.HorizontalAutoLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HorizontalAutoLayout extends Layout {
+    static xtype = "bi.horizontal_auto";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-o",
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.HorizontalAutoLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.HorizontalAutoLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
         w.element.css({
             position: "relative",
-            margin: "0px auto"
+            margin: "0px auto",
         });
         this._handleGap(w, item, null, i);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.HorizontalAutoLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout);
+}

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

@@ -0,0 +1,13 @@
+export { AbsoluteCenterLayout } from "./absolute.center";
+export { AbsoluteHorizontalLayout } from "./absolute.horizontal";
+export { AbsoluteLeftRightVerticalAdaptLayout, AbsoluteRightVerticalAdaptLayout } from "./absolute.leftrightvertical";
+export { AbsoluteVerticalLayout } from "./absolute.vertical";
+export { CenterAdaptLayout } from "./adapt.center";
+export { HorizontalAdaptLayout } from "./adapt.horizontal";
+export { LeftRightVerticalAdaptLayout, LeftVerticalAdaptLayout, RightVerticalAdaptLayout } from "./adapt.leftrightvertical";
+export { TableAdaptLayout } from "./adapt.table";
+export { VerticalAdaptLayout } from "./adapt.vertical";
+export { HorizontalAutoLayout } from "./auto.horizontal";
+export { InlineCenterAdaptLayout } from "./inline.center";
+export { InlineHorizontalAdaptLayout } from "./inline.horizontal";
+export { InlineVerticalAdaptLayout } from "./inline.vertical";

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

@@ -1,35 +1,43 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineCenterAdaptLayout
- * @extends BI.Layout
+ * @class InlineCenterAdaptLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineCenterAdaptLayout extends Layout {
+    static xtype = "bi.inline_center_adapt";
 
-    props: function () {
-        return BI.extend(BI.InlineCenterAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i-c-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.inline",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -44,14 +52,13 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);
+}

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

@@ -1,35 +1,43 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineHorizontalAdaptLayout
- * @extends BI.Layout
+ * @class InlineHorizontalAdaptLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineHorizontalAdaptLayout extends Layout {
+    static xtype = "bi.inline_horizontal_adapt";
 
-    props: function () {
-        return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i-h-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.inline",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -44,14 +52,13 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout);
+}

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

@@ -1,35 +1,43 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineVerticalAdaptLayout
- * @extends BI.Layout
+ * @class InlineVerticalAdaptLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineVerticalAdaptLayout extends Layout {
+    static xtype = "bi.inline_vertical_adapt";
 
-    props: function () {
-        return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i-v-a",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.inline",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -44,14 +52,13 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);
+}

src/core/wrapper/layout/index.js

@@ -0,0 +1,17 @@
+export { AbsoluteLayout } from "./layout.absolute";
+export { AdaptiveLayout } from "./layout.adaptive";
+export { BorderLayout } from "./layout.border";
+export { CardLayout } from "./layout.card";
+export { DefaultLayout } from "./layout.default";
+export { DivisionLayout } from "./layout.division";
+export { FloatLeftLayout, FloatRightLayout } from "./layout.flow";
+export { GridLayout } from "./layout.grid";
+export { HorizontalLayout } from "./layout.horizontal";
+export { InlineLayout } from "./layout.inline";
+export { LatticeLayout } from "./layout.lattice";
+export { TableLayout } from "./layout.table";
+export { HTapeLayout, VTapeLayout } from "./layout.tape";
+export { TdLayout } from "./layout.td";
+export { VerticalLayout } from "./layout.vertical";
+export { WindowLayout } from "./layout.window";
+export * from "./adapt";

src/core/wrapper/layout/layout.absolute.js

@@ -1,115 +1,119 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, map, parseFloat, isKey, pick, isNotNull, isNumber } from "../../2.base";
+
 /**
  * 固定子组件上下左右的布局容器
- * @class BI.AbsoluteLayout
- * @extends BI.Layout
  */
-BI.AbsoluteLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteLayout extends Layout {
+    static xtype = "bi.absolute";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs",
             hgap: null,
             vgap: null,
             lgap: null,
             rgap: null,
             tgap: null,
-            bgap: null
+            bgap: null,
         });
-    },
-    render: function () {
-        BI.AbsoluteLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments);
-        var left = 0, right = 0, top = 0, bottom = 0;
-        var offsets = BI.pick(item, ["top", "right", "bottom", "left"]);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let left = 0, right = 0, top = 0, bottom = 0;
+        let offsets = pick(item, ["top", "right", "bottom", "left"]);
 
-        if (BI.isKey(item.inset)) {
-            var insets = BI.map((item.inset + "").split(" "), function (i, str) {
-                return BI.parseFloat(str);
-            });
+        if (isKey(item.inset)) {
+            const insets = map((`${item.inset}`).split(" "), (i, str) => parseFloat(str));
             switch (insets.length) {
-                case 1:
-                    offsets = {top: insets[0], bottom: insets[0], left: insets[0], right: insets[0]}
-                    break;
-                case 2:
-                    offsets = {top: insets[0], bottom: insets[0], left: insets[1], right: insets[1]}
-                    break;
-                case 3:
-                    offsets = {top: insets[0], left: insets[1], right: insets[1], bottom: insets[2]}
-                    break
-                case 4:
-                default:
-                    offsets = {top: insets[0], right: insets[1], bottom: insets[2], left: insets[3]}
-                    break;
+            case 1:
+                offsets = { top: insets[0], bottom: insets[0], left: insets[0], right: insets[0] };
+                break;
+            case 2:
+                offsets = { top: insets[0], bottom: insets[0], left: insets[1], right: insets[1] };
+                break;
+            case 3:
+                offsets = { top: insets[0], left: insets[1], right: insets[1], bottom: insets[2] };
+                break;
+            case 4:
+            default:
+                offsets = { top: insets[0], right: insets[1], bottom: insets[2], left: insets[3] };
+                break;
             }
         }
-        if (BI.isNotNull(offsets.left)) {
-            w.element.css({left: BI.isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left});
+        if (isNotNull(offsets.left)) {
+            w.element.css({ left: isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left });
             left += offsets.left;
         }
-        if (BI.isNotNull(offsets.right)) {
-            w.element.css({right: BI.isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right});
+        if (isNotNull(offsets.right)) {
+            w.element.css({ right: isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right });
             right += offsets.right;
         }
-        if (BI.isNotNull(offsets.top)) {
-            w.element.css({top: BI.isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top});
+        if (isNotNull(offsets.top)) {
+            w.element.css({ top: isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top });
             top += offsets.top;
         }
-        if (BI.isNotNull(offsets.bottom)) {
-            w.element.css({bottom: BI.isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom});
+        if (isNotNull(offsets.bottom)) {
+            w.element.css({ bottom: isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom });
             bottom += offsets.bottom;
         }
 
-        if (BI.isNotNull(o.hgap)) {
+        if (isNotNull(o.hgap)) {
             left += o.hgap;
-            w.element.css({left: this._optimiseGap(left)});
+            w.element.css({ left: this._optimiseGap(left) });
             right += o.hgap;
-            w.element.css({right: this._optimiseGap(right)});
+            w.element.css({ right: this._optimiseGap(right) });
         }
-        if (BI.isNotNull(o.vgap)) {
+        if (isNotNull(o.vgap)) {
             top += o.vgap;
-            w.element.css({top: this._optimiseGap(top)});
+            w.element.css({ top: this._optimiseGap(top) });
             bottom += o.vgap;
-            w.element.css({bottom: this._optimiseGap(bottom)});
+            w.element.css({ bottom: this._optimiseGap(bottom) });
         }
 
-        if (BI.isNotNull(o.lgap)) {
+        if (isNotNull(o.lgap)) {
             left += o.lgap;
-            w.element.css({left: this._optimiseGap(left)});
+            w.element.css({ left: this._optimiseGap(left) });
         }
-        if (BI.isNotNull(o.rgap)) {
+        if (isNotNull(o.rgap)) {
             right += o.rgap;
-            w.element.css({right: this._optimiseGap(right)});
+            w.element.css({ right: this._optimiseGap(right) });
         }
-        if (BI.isNotNull(o.tgap)) {
+        if (isNotNull(o.tgap)) {
             top += o.tgap;
-            w.element.css({top: this._optimiseGap(top)});
+            w.element.css({ top: this._optimiseGap(top) });
         }
-        if (BI.isNotNull(o.bgap)) {
+        if (isNotNull(o.bgap)) {
             bottom += o.bgap;
-            w.element.css({bottom: this._optimiseGap(bottom)});
+            w.element.css({ bottom: this._optimiseGap(bottom) });
         }
 
-        if (BI.isNotNull(item.width)) {
-            w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
+        if (isNotNull(item.width)) {
+            w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width });
         }
-        if (BI.isNotNull(item.height)) {
-            w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
+        if (isNotNull(item.height)) {
+            w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height });
         }
-        w.element.css({position: "absolute"});
+        w.element.css({ position: "absolute" });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.absolute", BI.AbsoluteLayout);
+}

src/core/wrapper/layout/layout.adaptive.js

@@ -1,63 +1,70 @@
-BI.AdaptiveLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AdaptiveLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isNumber, isNotNull, isFunction } from "../../2.base";
+
+@shortcut()
+export class AdaptiveLayout extends Layout {
+    static xtype = "bi.adaptive";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-adaptive",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.AdaptiveLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.AdaptiveLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative"});
-        if (BI.isNotNull(item.left)) {
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
+        w.element.css({ position: "relative" });
+        if (isNotNull(item.left)) {
             w.element.css({
-                left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left
+                left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left,
             });
         }
-        if (BI.isNotNull(item.right)) {
+        if (isNotNull(item.right)) {
             w.element.css({
-                right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right
+                right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right,
             });
         }
-        if (BI.isNotNull(item.top)) {
+        if (isNotNull(item.top)) {
             w.element.css({
-                top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top
+                top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top,
             });
         }
-        if (BI.isNotNull(item.bottom)) {
+        if (isNotNull(item.bottom)) {
             w.element.css({
-                bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom
+                bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom,
             });
         }
 
         this._handleGap(w, item);
 
-        if (BI.isNotNull(item.width)) {
-            w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
+        if (isNotNull(item.width)) {
+            w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width });
         }
-        if (BI.isNotNull(item.height)) {
-            w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
+        if (isNotNull(item.height)) {
+            w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.adaptive", BI.AdaptiveLayout);
+}

src/core/wrapper/layout/layout.border.js

@@ -1,42 +1,51 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isNotNull, isFunction } from "../../2.base";
+import { _lazyCreateWidget } from "../../5.inject";
+
 /**
  * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应
  *
- * @class BI.BorderLayout
- * @extends BI.Layout
+ * @class BorderLayout
+ * @extends Layout
  */
-BI.BorderLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.BorderLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class BorderLayout extends Layout {
+    static xtype = "bi.border";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-border-layout",
-            items: {}
+            items: {},
         });
-    },
-    render: function () {
-        BI.BorderLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (regions) {
-        var item;
-        var top = 0;
-        var bottom = 0;
-        var left = 0;
-        var right = 0;
+    stroke(regions) {
+        let item;
+        let top = 0;
+        let bottom = 0;
+        let left = 0;
+        let right = 0;
         if ("north" in regions) {
-            item = regions["north"];
-            if (item != null) {
+            item = regions.north;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("north"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("north"), w);
                     }
                     this.getWidgetByName(this._getChildName("north")).element.height(this._optimiseGap(item.height))
@@ -45,18 +54,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             top: this._optimiseGap(item.top || 0),
                             left: this._optimiseGap(item.left || 0),
                             right: this._optimiseGap(item.right || 0),
-                            bottom: "initial"
+                            bottom: "initial",
                         });
                 }
                 top = (item.height || 0) + (item.top || 0) + (item.bottom || 0);
             }
         }
         if ("south" in regions) {
-            item = regions["south"];
-            if (item != null) {
+            item = regions.south;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("south"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("south"), w);
                     }
                     this.getWidgetByName(this._getChildName("south")).element.height(this._optimiseGap(item.height))
@@ -65,18 +74,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             bottom: this._optimiseGap(item.bottom || 0),
                             left: this._optimiseGap(item.left || 0),
                             right: this._optimiseGap(item.right || 0),
-                            top: "initial"
+                            top: "initial",
                         });
                 }
                 bottom = (item.height || 0) + (item.top || 0) + (item.bottom || 0);
             }
         }
         if ("west" in regions) {
-            item = regions["west"];
-            if (item != null) {
+            item = regions.west;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("west"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("west"), w);
                     }
                     this.getWidgetByName(this._getChildName("west")).element.width(this._optimiseGap(item.width))
@@ -85,18 +94,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             left: this._optimiseGap(item.left || 0),
                             top: this._optimiseGap(top),
                             bottom: this._optimiseGap(bottom),
-                            right: "initial"
+                            right: "initial",
                         });
                 }
                 left = (item.width || 0) + (item.left || 0) + (item.right || 0);
             }
         }
         if ("east" in regions) {
-            item = regions["east"];
-            if (item != null) {
+            item = regions.east;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("east"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("east"), w);
                     }
                     this.getWidgetByName(this._getChildName("east")).element.width(this._optimiseGap(item.width))
@@ -105,17 +114,17 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             right: this._optimiseGap(item.right || 0),
                             top: this._optimiseGap(top),
                             bottom: this._optimiseGap(bottom),
-                            left: "initial"
+                            left: "initial",
                         });
                 }
                 right = (item.width || 0) + (item.left || 0) + (item.right || 0);
             }
         }
         if ("center" in regions) {
-            item = regions["center"];
-            if (item != null) {
+            item = regions.center;
+            if (isNotNull(item)) {
                 if (!this.hasWidget(this._getChildName("center"))) {
-                    var w = BI._lazyCreateWidget(item);
+                    const w = _lazyCreateWidget(item);
                     this.addWidget(this._getChildName("center"), w);
                 }
                 this.getWidgetByName(this._getChildName("center")).element
@@ -124,19 +133,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                         top: this._optimiseGap(top),
                         bottom: this._optimiseGap(bottom),
                         left: this._optimiseGap(left),
-                        right: this._optimiseGap(right)
+                        right: this._optimiseGap(right),
                     });
             }
         }
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.BorderLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.border", BI.BorderLayout);
+}

src/core/wrapper/layout/layout.card.js

@@ -1,211 +1,215 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, each, isNotNull, isFunction, findIndex, isWidget, some, map, isKey } from "../../2.base";
+import { _lazyCreateWidget } from "../../5.inject";
+import { Events } from "../../constant";
+import { Action } from "../../action";
+
 /**
  * 卡片布局，可以做到当前只显示一个组件，其他的都隐藏
- * @class BI.CardLayout
- * @extends BI.Layout
+ * @class CardLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {String} options.defaultShowName 默认展示的子组件名
  */
-BI.CardLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.CardLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class CardLayout extends Layout {
+    static xtype = "bi.card";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-card-layout",
-            items: []
+            items: [],
         });
-    },
+    }
 
-    render: function () {
-        BI.CardLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
+    stroke(items) {
+        const o = this.options;
         this.showIndex = void 0;
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                if (!self.hasWidget(item.cardName)) {
-                    var w = BI._lazyCreateWidget(item);
-                    w.on(BI.Events.DESTROY, function () {
-                        var index = BI.findIndex(o.items, function (i, tItem) {
-                            return tItem.cardName == item.cardName;
-                        });
+                let w;
+                if (!this.hasWidget(item.cardName)) {
+                    w = _lazyCreateWidget(item);
+                    w.on(Events.DESTROY, () => {
+                        const index = findIndex(o.items, (i, tItem) => tItem.cardName === item.cardName);
                         if (index > -1) {
                             o.items.splice(index, 1);
                         }
                     });
-                    self.addWidget(self._getChildName(item.cardName), w);
+                    this.addWidget(this._getChildName(item.cardName), w);
                 } else {
-                    var w = self.getWidgetByName(self._getChildName(item.cardName));
+                    w = this.getWidgetByName(this._getChildName(item.cardName));
                 }
                 w.element.css({
                     position: "relative",
                     top: "0",
                     left: "0",
                     width: "100%",
-                    height: "100%"
+                    height: "100%",
                 });
                 w.setVisible(false);
             }
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("Card布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    empty: function () {
-        BI.CardLayout.superclass.empty.apply(this, arguments);
+    empty(...args) {
+        super.empty(...args);
         this.options.items = [];
-    },
+    }
 
-    populate: function (items) {
-        BI.CardLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
         this.options.defaultShowName && this.showCardByName(this.options.defaultShowName);
-    },
+    }
 
-    isCardExisted: function (cardName) {
-        return BI.some(this.options.items, function (i, item) {
-            return item.cardName == cardName && item.el;
-        });
-    },
+    isCardExisted(cardName) {
+        return some(this.options.items, (i, item) => item.cardName === cardName && item.el);
+    }
 
-    getCardByName: function (cardName) {
+    getCardByName(cardName) {
         if (!this.isCardExisted(cardName)) {
             throw new Error("cardName不存在", cardName);
         }
+        
         return this._children[this._getChildName(cardName)];
-    },
+    }
 
-    _deleteCardByName: function (cardName) {
+    _deleteCardByName(cardName) {
         delete this._children[this._getChildName(cardName)];
-        var index = BI.findIndex(this.options.items, function (i, item) {
-            return item.cardName == cardName;
-        });
+        const index = findIndex(this.options.items, (i, item) => item.cardName === cardName);
         if (index > -1) {
             this.options.items.splice(index, 1);
         }
-    },
+    }
 
-    deleteCardByName: function (cardName) {
+    deleteCardByName(cardName) {
         if (!this.isCardExisted(cardName)) {
             throw new Error("cardName不存在", cardName);
         }
 
-        var child = this._children[this._getChildName(cardName)];
+        const child = this._children[this._getChildName(cardName)];
         this._deleteCardByName(cardName);
         child && child._destroy();
-    },
+    }
 
-    addCardByName: function (cardName, cardItem) {
+    addCardByName(cardName, cardItem) {
         if (this.isCardExisted(cardName)) {
             throw new Error("cardName 已存在", cardName);
         }
-        var widget = BI._lazyCreateWidget(cardItem, this);
+        const widget = _lazyCreateWidget(cardItem, this);
         widget.element.css({
             position: "relative",
             top: "0",
             left: "0",
             width: "100%",
-            height: "100%"
+            height: "100%",
         }).appendTo(this.element);
         widget.invisible();
         this.addWidget(this._getChildName(cardName), widget);
-        this.options.items.push({el: cardItem, cardName: cardName});
+        this.options.items.push({ el: cardItem, cardName });
+        
         return widget;
-    },
+    }
 
-    showCardByName: function (name, action, callback) {
-        var self = this;
+    showCardByName(name, action, callback) {
         // name不存在的时候全部隐藏
-        var exist = this.isCardExisted(name);
-        if (this.showIndex != null) {
+        const exist = this.isCardExisted(name);
+        if (isNotNull(this.showIndex)) {
             this.lastShowIndex = this.showIndex;
         }
         this.showIndex = name;
-        var flag = false;
-        BI.each(this.options.items, function (i, item) {
-            var el = self._children[self._getChildName(item.cardName)];
+        let flag = false;
+        each(this.options.items, (i, item) => {
+            const el = this._children[this._getChildName(item.cardName)];
             if (el) {
-                if (name != item.cardName) {
+                if (name !== item.cardName) {
                     // 动画效果只有在全部都隐藏的时候才有意义,且只要执行一次动画操作就够了
-                    !flag && !exist && (BI.Action && action instanceof BI.Action) ? (action.actionBack(el), flag = true) : el.invisible();
+                    !flag && !exist && (Action && action instanceof Action) ? (action.actionBack(el), flag = true) : el.invisible();
                 } else {
-                    (BI.Action && action instanceof BI.Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback());
+                    (Action && action instanceof Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback());
                 }
             }
         });
-    },
+    }
 
-    showLastCard: function () {
-        var self = this;
+    showLastCard() {
         this.showIndex = this.lastShowIndex;
-        BI.each(this.options.items, function (i, item) {
-            self._children[self._getChildName(item.cardName)].setVisible(self.showIndex == i);
+        each(this.options.items, (i, item) => {
+            this._children[this._getChildName(item.cardName)].setVisible(this.showIndex === i);
         });
-    },
+    }
 
-    setDefaultShowName: function (name) {
+    setDefaultShowName(name) {
         this.options.defaultShowName = name;
+        
         return this;
-    },
+    }
 
-    getDefaultShowName: function () {
+    getDefaultShowName() {
         return this.options.defaultShowName;
-    },
+    }
 
-    getAllCardNames: function () {
-        return BI.map(this.options.items, function (i, item) {
-            return item.cardName;
-        });
-    },
+    getAllCardNames() {
+        return map(this.options.items, (i, item) => item.cardName);
+    }
 
-    getShowingCard: function () {
-        if (!BI.isKey(this.showIndex)) {
+    getShowingCard() {
+        if (!isKey(this.showIndex)) {
             return void 0;
         }
+        
         return this.getWidgetByName(this._getChildName(this.showIndex));
-    },
+    }
 
-    deleteAllCard: function () {
-        var self = this;
-        BI.each(this.getAllCardNames(), function (i, name) {
-            self.deleteCardByName(name);
+    deleteAllCard() {
+        each(this.getAllCardNames(), (i, name) => {
+            this.deleteCardByName(name);
         });
-    },
+    }
 
-    hideAllCard: function () {
-        var self = this;
-        BI.each(this.options.items, function (i, item) {
-            self._children[self._getChildName(item.cardName)].invisible();
+    hideAllCard() {
+        each(this.options.items, (i, item) => {
+            this._children[this._getChildName(item.cardName)].invisible();
         });
-    },
+    }
 
-    isAllCardHide: function () {
-        var self = this;
-        var flag = true;
-        BI.some(this.options.items, function (i, item) {
-            if (self._children[self._getChildName(item.cardName)].isVisible()) {
+    isAllCardHide() {
+        let flag = true;
+        some(this.options.items, (i, item) => {
+            if (this._children[this._getChildName(item.cardName)].isVisible()) {
                 flag = false;
+                
                 return false;
             }
         });
+        
         return flag;
-    },
+    }
 
-    removeWidget: function (nameOrWidget) {
-        var removeName, self = this;
-        if (BI.isWidget(nameOrWidget)) {
-            BI.each(this._children, function (name, child) {
+    removeWidget(nameOrWidget) {
+        let removeName;
+        if (isWidget(nameOrWidget)) {
+            each(this._children, (name, child) => {
                 if (child === nameOrWidget) {
                     removeName = name;
                 }
@@ -217,5 +221,4 @@ BI.CardLayout = BI.inherit(BI.Layout, {
             this._deleteCardByName(removeName);
         }
     }
-});
-BI.shortcut("bi.card", BI.CardLayout);
+}

src/core/wrapper/layout/layout.default.js

@@ -1,39 +1,47 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction } from "../../2.base";
+
 /**
  * 默认的布局方式
  *
- * @class BI.DefaultLayout
- * @extends BI.Layout
+ * @class DefaultLayout
+ * @extends Layout
  */
-BI.DefaultLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.DefaultLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class DefaultLayout extends Layout {
+    static xtype = "bi.default";
+
+    props() {
+        return extend(super.props(...arguments), {
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.DefaultLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var w = BI.DefaultLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
         this._handleGap(w, item);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.DefaultLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.default", BI.DefaultLayout);
+}

src/core/wrapper/layout/layout.division.js

@@ -1,36 +1,46 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, makeArray, each, isArray } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+
 /**
  * 分隔容器的控件，按照宽度和高度所占比平分整个容器
  *
- * @class BI.DivisionLayout
- * @extends BI.Layout
+ * @class DivisionLayout
+ * @extends Layout
  */
-BI.DivisionLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.DivisionLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class DivisionLayout extends Layout {
+    static xtype = "bi.division";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-division",
             columns: null,
             rows: null,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.DivisionLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var o = this.options, self = this;
-        var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
-        var map = BI.makeArray(rows), widths = {}, heights = {};
+    stroke(items) {
+        const o = this.options;
+        const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
+        const map = makeArray(rows), widths = {}, heights = {};
 
         function firstElement (item, cls) {
             item.addClass(cls);
@@ -45,9 +55,9 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, cls) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, cls);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, cls);
             } else if (item.el) {
                 firstObject(item.el, cls);
@@ -56,12 +66,12 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        BI.each(map, function (i) {
-            map[i] = BI.makeArray(columns);
+        each(map, i => {
+            map[i] = makeArray(columns);
         });
-        BI.each(items, function (i, item) {
-            if (BI.isArray(item)) {
-                BI.each(item, function (j, el) {
+        each(items, (i, item) => {
+            if (isArray(item)) {
+                each(item, (j, el) => {
                     widths[i] = (widths[i] || 0) + item.width;
                     heights[j] = (heights[j] || 0) + item.height;
                     map[i][j] = el;
@@ -73,56 +83,56 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
             heights[item.column] = (heights[item.column] || 0) + item.height;
             map[item.row][item.column] = item;
         });
-        for (var i = 0; i < rows; i++) {
-            var totalW = 0;
-            for (var j = 0; j < columns; j++) {
+        for (let i = 0; i < rows; i++) {
+            let totalW = 0;
+            for (let j = 0; j < columns; j++) {
+                let w;
                 if (!map[i][j]) {
-                    throw new Error("item(" + i + "" + j + ") 必须", map);
+                    throw new Error(`item(${i}${j}) 必须`, map);
                 }
-                if (!this.hasWidget(this._getChildName(i + "_" + j))) {
-                    var w = BI._lazyCreateWidget(map[i][j]);
-                    this.addWidget(this._getChildName(i + "_" + j), w);
+                if (!this.hasWidget(this._getChildName(`${i}_${j}`))) {
+                    w = _lazyCreateWidget(map[i][j]);
+                    this.addWidget(this._getChildName(`${i}_${j}`), w);
                 } else {
-                    w = this.getWidgetByName(this._getChildName(i + "_" + j));
+                    w = this.getWidgetByName(this._getChildName(`${i}_${j}`));
                 }
-                var left = totalW * 100 / widths[i];
-                w.element.css({position: "absolute", left: left + "%"});
+                const left = totalW * 100 / widths[i];
+                w.element.css({ position: "absolute", left: `${left}%` });
                 if (j > 0) {
-                    var lastW = this.getWidgetByName(this._getChildName(i + "_" + (j - 1)));
-                    lastW.element.css({right: (100 - left) + "%"});
+                    const lastW = this.getWidgetByName(this._getChildName(`${i}_${j - 1}`));
+                    lastW.element.css({ right: `${100 - left}%` });
                 }
-                if (j == o.columns - 1) {
-                    w.element.css({right: "0%"});
+                if (j === o.columns - 1) {
+                    w.element.css({ right: "0%" });
                 }
-                first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1));
+                first(w, this.getRowColumnCls(i, j, rows - 1, columns - 1));
                 totalW += map[i][j].width;
             }
         }
-        for (var j = 0; j < o.columns; j++) {
-            var totalH = 0;
-            for (var i = 0; i < o.rows; i++) {
-                var w = this.getWidgetByName(this._getChildName(i + "_" + j));
-                var top = totalH * 100 / heights[j];
-                w.element.css({top: top + "%"});
+        for (let j = 0; j < o.columns; j++) {
+            let totalH = 0;
+            for (let i = 0; i < o.rows; i++) {
+                const w = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                const top = totalH * 100 / heights[j];
+                w.element.css({ top: `${top}%` });
                 if (i > 0) {
-                    var lastW = this.getWidgetByName(this._getChildName((i - 1) + "_" + j));
-                    lastW.element.css({bottom: (100 - top) + "%"});
+                    const lastW = this.getWidgetByName(this._getChildName(`${i - 1}_${j}`));
+                    lastW.element.css({ bottom: `${100 - top}%` });
                 }
-                if (i == o.rows - 1) {
-                    w.element.css({bottom: "0%"});
+                if (i === o.rows - 1) {
+                    w.element.css({ bottom: "0%" });
                 }
                 totalH += map[i][j].height;
             }
         }
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.DivisionLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.division", BI.DivisionLayout);
+}

src/core/wrapper/layout/layout.flow.js

@@ -1,183 +1,196 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isNotNull, isNumber } from "../../2.base";
+import { pixFormat } from "../../constant";
+
 /**
  * 靠左对齐的自由浮动布局
- * @class BI.FloatLeftLayout
- * @extends BI.Layout
+ * @class FloatLeftLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.FloatLeftLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatLeftLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatLeftLayout extends Layout {
+    static xtype = "bi.left";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-left clearfix",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FloatLeftLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
         if (o.innerHgap !== 0) {
             this.element.css({
                 paddingLeft: this._optimiseGap(o.innerHgap),
-                paddingRight: this._optimiseGap(o.innerHgap)
-            })
+                paddingRight: this._optimiseGap(o.innerHgap),
+            });
         }
         if (o.innerVgap !== 0) {
             this.element.css({
                 paddingTop: this._optimiseGap(o.innerVgap),
-                paddingBottom: this._optimiseGap(o.innerVgap)
-            })
+                paddingBottom: this._optimiseGap(o.innerVgap),
+            });
         }
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", float: "left"});
-        if (BI.isNotNull(item.left)) {
-            w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        w.element.css({ position: "relative", "float": "left" });
+        if (isNotNull(item.left)) {
+            w.element.css({ left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left });
         }
-        if (BI.isNotNull(item.right)) {
-            w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
+        if (isNotNull(item.right)) {
+            w.element.css({ right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right });
         }
-        if (BI.isNotNull(item.top)) {
-            w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
+        if (isNotNull(item.top)) {
+            w.element.css({ top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top });
         }
-        if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom});
+        if (isNotNull(item.bottom)) {
+            w.element.css({ bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom });
         }
         if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
+            const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-top": this._optimiseGap(top)
+                "margin-top": this._optimiseGap(top),
             });
         }
         if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
+            const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-left": this._optimiseGap(left)
+                "margin-left": this._optimiseGap(left),
             });
         }
         if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
+            const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-right": this._optimiseGap(right)
+                "margin-right": this._optimiseGap(right),
             });
         }
         if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-bottom": this._optimiseGap(bottom)
+                "margin-bottom": this._optimiseGap(bottom),
             });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatLeftLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.left", BI.FloatLeftLayout);
+}
 
 /**
  * 靠右对齐的自由浮动布局
- * @class BI.FloatRightLayout
- * @extends BI.Layout
+ * @class FloatRightLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.FloatRightLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatRightLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatRightLayout extends Layout {
+    static xtype = "bi.right";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-right clearfix",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FloatRightLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
         if (o.innerHgap !== 0) {
             this.element.css({
                 paddingLeft: this._optimiseGap(o.innerHgap),
-                paddingRight: this._optimiseGap(o.innerHgap)
-            })
+                paddingRight: this._optimiseGap(o.innerHgap),
+            });
         }
         if (o.innerVgap !== 0) {
             this.element.css({
                 paddingTop: this._optimiseGap(o.innerVgap),
-                paddingBottom: this._optimiseGap(o.innerVgap)
-            })
+                paddingBottom: this._optimiseGap(o.innerVgap),
+            });
         }
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FloatRightLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", float: "right"});
-        if (BI.isNotNull(item.left)) {
-            w.element.css({left: BI.pixFormat(item.left)});
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        w.element.css({ position: "relative", "float": "right" });
+        if (isNotNull(item.left)) {
+            w.element.css({ left: pixFormat(item.left) });
         }
-        if (BI.isNotNull(item.right)) {
-            w.element.css({right: BI.pixFormat(item.right)});
+        if (isNotNull(item.right)) {
+            w.element.css({ right: pixFormat(item.right) });
         }
-        if (BI.isNotNull(item.top)) {
-            w.element.css({top: BI.pixFormat(item.top)});
+        if (isNotNull(item.top)) {
+            w.element.css({ top: pixFormat(item.top) });
         }
-        if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: BI.pixFormat(item.bottom)});
+        if (isNotNull(item.bottom)) {
+            w.element.css({ bottom: pixFormat(item.bottom) });
         }
         if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
+            const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-top": this._optimiseGap(top)
+                "margin-top": this._optimiseGap(top),
             });
         }
         if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
+            const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-left": this._optimiseGap(left)
+                "margin-left": this._optimiseGap(left),
             });
         }
         if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
+            const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-right": this._optimiseGap(right)
+                "margin-right": this._optimiseGap(right),
             });
         }
         if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-bottom": this._optimiseGap(bottom)
+                "margin-bottom": this._optimiseGap(bottom),
             });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatRightLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.right", BI.FloatRightLayout);
+}

src/core/wrapper/layout/layout.grid.js

@@ -1,38 +1,42 @@
-/**
- * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应
- *
- * @class BI.BorderLayout
- * @extends BI.Layout
- */
-BI.GridLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.GridLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isArray, each } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+
+@shortcut()
+export class GridLayout extends Layout {
+    static xtype = "bi.grid";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-grid",
             columns: null,
             rows: null,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.GridLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
-        var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
-        var width = 100 / columns, height = 100 / rows;
-        var els = [];
-        for (var i = 0; i < rows; i++) {
+    stroke(items) {
+        const o = this.options;
+        const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
+        const width = 100 / columns, height = 100 / rows;
+        const els = [];
+        for (let i = 0; i < rows; i++) {
             els[i] = [];
         }
 
@@ -49,9 +53,9 @@ BI.GridLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, row, col) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, row, col);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, row, col);
             } else if (item.el) {
                 firstObject(item.el, row, col);
@@ -60,46 +64,46 @@ BI.GridLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        BI.each(items, function (i, item) {
-            if (BI.isArray(item)) {
-                BI.each(item, function (j, el) {
-                    els[i][j] = BI._lazyCreateWidget(el);
+        each(items, (i, item) => {
+            if (isArray(item)) {
+                each(item, (j, el) => {
+                    els[i][j] = _lazyCreateWidget(el);
                 });
+                
                 return;
             }
-            els[item.row][item.column] = BI._lazyCreateWidget(item);
+            els[item.row][item.column] = _lazyCreateWidget(item);
         });
-        for (var i = 0; i < rows; i++) {
-            for (var j = 0; j < columns; j++) {
+        for (let i = 0; i < rows; i++) {
+            for (let j = 0; j < columns; j++) {
                 if (!els[i][j]) {
-                    els[i][j] = BI._lazyCreateWidget({
-                        type: "bi.layout"
+                    els[i][j] = _lazyCreateWidget({
+                        type: "bi.layout",
                     });
                 }
-                first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1));
+                first(els[i][j], this.getRowColumnCls(i, j, rows - 1, columns - 1));
                 els[i][j].element.css({
                     position: "absolute",
-                    top: height * i + "%",
-                    left: width * j + "%",
-                    right: (100 - (width * (j + 1))) + "%",
-                    bottom: (100 - (height * (i + 1))) + "%"
+                    top: `${height * i}%`,
+                    left: `${width * j}%`,
+                    right: `${100 - (width * (j + 1))}%`,
+                    bottom: `${100 - (height * (i + 1))}%`,
                 });
-                this.addWidget(this._getChildName(i + "_" + j), els[i][j]);
+                this.addWidget(this._getChildName(`${i}_${j}`), els[i][j]);
             }
         }
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("grid布局不需要resize")
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.GridLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.grid", BI.GridLayout);
+}

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

@@ -1,8 +1,6 @@
-/**
- * 水平布局
- * @class BI.HorizontalLayout
- * @extends BI.Layout
- */
-BI.HorizontalLayout = function () {
-};
-BI.shortcut("bi.horizontal", BI.HorizontalLayout);
+import { shortcut } from "../../decorator";
+
+@shortcut()
+export class HorizontalLayout {
+    static xtype = "bi.horizontal";
+}

src/core/wrapper/layout/layout.inline.js

@@ -1,19 +1,26 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isNull } from "../../2.base";
+import { pixFormat, HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineLayout
- * @extends BI.Layout
+ * @class InlineLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineLayout extends Layout {
+    static xtype = "bi.inline";
 
-    props: function () {
-        return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
             columnSize: [],
             hgap: 0,
             vgap: 0,
@@ -21,80 +28,80 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            items: []
+            items: [],
         });
-    },
+    }
 
-    render: function () {
-        BI.InlineLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
+    render() {
+        super.render(...arguments);
+        const o = this.options;
         this.element.css({
-            textAlign: o.horizontalAlign
+            textAlign: o.horizontalAlign,
         });
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
-        var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
         if (o.columnSize.length > 0) {
             if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                 columnSize = null;
             }
         }
         if (columnSize > 0) {
-            w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : BI.pixFormat(columnSize));
+            w.element.width(columnSize < 1 ? (`${(columnSize * 100).toFixed(1)}%`) : pixFormat(columnSize));
         }
         w.element.css({
             position: "relative",
-            "vertical-align": o.verticalAlign
+            "vertical-align": o.verticalAlign,
         });
         w.element.addClass("i-item");
         if (columnSize === "fill" || columnSize === "") {
-            var length  = 0, gap = o.hgap + o.innerHgap;
-            var fillCount = 0, autoCount = 0;
-            for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
-                var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
+            let length = 0, gap = o.hgap + o.innerHgap;
+            let fillCount = 0, autoCount = 0;
+            for (let k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
+                let cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
                 if (cz === "fill") {
                     fillCount++;
                     cz = 0;
-                } else if (cz === "" || BI.isNull(cz)) {
+                } else if (cz === "" || isNull(cz)) {
                     autoCount++;
                     cz = 0;
                 }
                 gap += o.hgap + o.lgap + o.rgap + this._optimiseItemLgap(o.items[k]) + this._optimiseItemRgap(o.items[k]) + this._optimiseItemHgap(o.items[k]);
                 length += cz;
             }
-            length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : BI.pixFormat(length);
-            gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
+            length = length > 0 && length < 1 ? `${(length * 100).toFixed(1)}%` : pixFormat(length);
+            gap = gap > 0 && gap < 1 ? `${(gap * 100).toFixed(1)}%` : pixFormat(gap);
             if (columnSize === "fill") {
-                w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
+                w.element.css("min-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`);
             }
-            if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
+            if (o.horizontalAlign === HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
                 if (columnSize === "fill") {
-                    w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
+                    w.element.css("max-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`);
                 } else {
-                    w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
+                    w.element.css("max-width", `calc((100% - ${length} - ${gap})${autoCount > 1 ? `/${autoCount}` : ""})`);
                 }
             }
         }
         this._handleGap(w, item, i);
-        if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
-            var top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
+        if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) {
+            const top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
                 bottom = o.innerVgap + o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
-            var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : BI.pixFormat(top + bottom);
-            w.element.css("height", "calc(100% - " + gap + ")");
+            const gap = (top + bottom) > 0 && (top + bottom) < 1 ? `${((top + bottom) * 100).toFixed(1)}%` : pixFormat(top + bottom);
+            w.element.css("height", `calc(100% - ${gap})`);
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.InlineLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.inline", BI.InlineLayout);
+}

src/core/wrapper/layout/layout.lattice.js

@@ -1,43 +1,52 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, sum } from "../../2.base";
+
 /**
  * 靠左对齐的自由浮动布局
- * @class BI.LatticeLayout
- * @extends BI.Layout
+ * @class LatticeLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.LatticeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.LatticeLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-lattice clearfix"
+@shortcut()
+export class LatticeLayout extends Layout {
+    static xtype = "bi.lattice";
+
+    props() {
+        return extend(super.props(...arguments), {
+            baseCls: "bi-lattice clearfix",
             // columnSize: [0.2, 0.2, 0.6],
         });
-    },
-    render: function () {
-        BI.LatticeLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.LatticeLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let width;
         if (o.columnSize && o.columnSize[i]) {
-            var width = o.columnSize[i] / BI.sum(o.columnSize) * 100 + "%";
+            width = `${o.columnSize[i] / sum(o.columnSize) * 100}%`;
         } else {
-            var width = 1 / this.options.items.length * 100 + "%";
+            width = `${1 / this.options.items.length * 100}%`;
         }
-        w.element.css({position: "relative", float: "left", width: width});
+        w.element.css({ position: "relative", "float": "left", width });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.LatticeLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.lattice", BI.LatticeLayout);
+}

src/core/wrapper/layout/layout.table.js

@@ -1,36 +1,46 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, range, isArray, map, reduce, isEmpty, formatEL } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应
  *
- * @class BI.TableLayout
- * @extends BI.Layout
+ * @class TableLayout
+ * @extends Layout
  */
-BI.TableLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.TableLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class TableLayout extends Layout {
+    static xtype = "bi.table";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-t",
             // scrolly: true,
             columnSize: [],
             rowSize: [],
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
             // rowSize: 30,  // or [30,30,30]
             hgap: 0,
             vgap: 0,
             items: [],
         });
-    },
-    render: function () {
-        BI.TableLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
 
-        var columnSize = o.columnSize.length > 0 ? o.columnSize : BI.range(items[0].length).fill("");
+        const columnSize = o.columnSize.length > 0 ? o.columnSize : range(items[0].length).fill("");
 
         if (columnSize.length > 0) {
-            var template = [];
-            for (var i = 0; i < columnSize.length; i++) {
+            const template = [];
+            for (let i = 0; i < columnSize.length; i++) {
                 if (columnSize[i] === "") {
                     template.push("auto");
                 } else if (columnSize[i] === "fill") {
@@ -41,9 +51,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
             }
             this.element.css({
                 "grid-template-columns": template.join(" "),
-                "grid-template-rows": BI.isArray(o.rowSize) ? BI.map(o.rowSize, function (i, size) {
-                    return self._optimiseGap(size);
-                }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
+                "grid-template-rows": isArray(o.rowSize) ? map(o.rowSize, (i, size) => this._optimiseGap(size)).join(" ") : range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
                 "grid-row-gap": this._optimiseGap(o.vgap),
                 "grid-column-gap": this._optimiseGap(o.hgap),
             });
@@ -51,15 +59,15 @@ BI.TableLayout = BI.inherit(BI.Layout, {
         
         return {
             type: "bi.default",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref(_ref) {
+                this.layout = _ref;
             },
             items: this._formatItems(items),
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options, self = this;
+    _formatItems(items) {
+        const o = this.options;
 
         function firstElement (item, cls) {
             item.addClass(cls);
@@ -74,9 +82,9 @@ BI.TableLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, cls) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 return firstElement(item.element, cls);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 return firstElement(item.el.element, cls);
             } else if (item.el) {
                 return firstObject(item.el, cls);
@@ -91,30 +99,27 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                 columnSize: ["fill"],
                 horizontalAlign: o.horizontalAlign,
                 verticalAlign: o.verticalAlign,
-                items: [BI.formatEL(item)],
+                items: [formatEL(item)],
             };
         }
 
-        return BI.reduce(items, function (rowItems, result, rowIndex) {
-            return result.concat(BI.map(rowItems, function (colIndex, item) {
-                var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
-                if (BI.isEmpty(item)) {
-                    return first(wrapLayout({
-                        type: "bi.layout",
-                    }), cls);
-                }
+        return reduce(items, (rowItems, result, rowIndex) => result.concat(map(rowItems, (colIndex, item) => {
+            const cls = this.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
+            if (isEmpty(item)) {
+                return first(wrapLayout({
+                    type: "bi.layout",
+                }), cls);
+            }
                 
-                return first(wrapLayout(item), cls);
-            }));
-        }, []);
-    },
+            return first(wrapLayout(item), cls);
+        })), []);
+    }
 
-    resize: function () {
+    resize() {
         // console.log("table布局不需要resize");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
-    },
-});
-BI.shortcut("bi.table", BI.TableLayout);
+    }
+}

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

@@ -1,13 +1,22 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, compact, each, isEmptyObject, isNumber, isNull, any, backAny } from "../../2.base";
+import { _lazyCreateWidget } from "../../5.inject";
+import { HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * 水平tape布局
- * @class BI.HTapeLayout
- * @extends BI.Layout
+ * @class HTapeLayout
+ * @extends Layout
  */
-BI.HTapeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.HTapeLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HTapeLayout extends Layout {
+    static xtype = "bi.htape";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-tape",
-            verticalAlign: BI.VerticalAlign.Top,
+            verticalAlign: VerticalAlign.Top,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -15,37 +24,39 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             columnSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.HTapeLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
-        items = BI.compact(items);
-        BI.each(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+    stroke(items) {
+        const o = this.options;
+        items = compact(items);
+        each(items, (i, item) => {
+            let w;
+            if (isEmptyObject(item)) {
                 return;
             }
-            if (!self.hasWidget(self._getChildName(i))) {
-                var w = BI._lazyCreateWidget(item);
-                self.addWidget(self._getChildName(i), w);
+            if (!this.hasWidget(this._getChildName(i))) {
+                w = _lazyCreateWidget(item);
+                this.addWidget(this._getChildName(i), w);
             } else {
-                w = self.getWidgetByName(self._getChildName(i));
+                w = this.getWidgetByName(this._getChildName(i));
             }
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (o.columnSize.length > 0) {
                 if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                     columnSize = item.width;
@@ -53,90 +64,92 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
             }
             w.element.css({
                 position: "absolute",
-                top: self._optimiseGap(self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
-                bottom: self._optimiseGap(self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
-                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
+                top: this._optimiseGap(this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
+                bottom: this._optimiseGap(this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
+                width: isNumber(columnSize) ? this._optimiseGap(columnSize) : "",
             });
-            if (o.verticalAlign === BI.VerticalAlign.Middle) {
+            if (o.verticalAlign === VerticalAlign.Middle) {
                 w.element.css({
                     marginTop: "auto",
-                    marginBottom: "auto"
+                    marginBottom: "auto",
                 });
-            } else if (o.verticalAlign === BI.VerticalAlign.Bottom) {
+            } else if (o.verticalAlign === VerticalAlign.Bottom) {
                 w.element.css({
-                    marginTop: "auto"
+                    marginTop: "auto",
                 });
             }
         });
 
-        var left = {}, right = {};
+        const left = {}, right = {};
         left[0] = o.innerHgap;
         right[items.length - 1] = o.innerHgap;
 
-        BI.any(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        any(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            const w = this.getWidgetByName(this._getChildName(i));
+            let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (o.columnSize.length > 0) {
                 if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                     columnSize = item.width;
                 }
             }
-            if (BI.isNull(left[i])) {
-                var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
-                left[i] = left[i - 1] + preColumnSize + self._optimiseItemLgap(items[i - 1]) + self._optimiseItemRgap(items[i - 1]) + 2 * self._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
+            if (isNull(left[i])) {
+                const preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
+                left[i] = left[i - 1] + preColumnSize + this._optimiseItemLgap(items[i - 1]) + this._optimiseItemRgap(items[i - 1]) + 2 * this._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
             }
             w.element.css({
-                left: self._optimiseGap(left[i] + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.hgap + o.lgap)
+                left: this._optimiseGap(left[i] + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.hgap + o.lgap),
             });
 
-            if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
+            if (isNull(columnSize) || columnSize === "" || columnSize === "fill") {
                 return true;
             }
         });
-        BI.backAny(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        backAny(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
-            if (BI.isNull(right[i])) {
-                var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
-                right[i] = right[i + 1] + nextColumnSize + self._optimiseItemLgap(items[i + 1]) + self._optimiseItemRgap(items[i + 1]) + 2 * self._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
+            const w = this.getWidgetByName(this._getChildName(i));
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            if (isNull(right[i])) {
+                const nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
+                right[i] = right[i + 1] + nextColumnSize + this._optimiseItemLgap(items[i + 1]) + this._optimiseItemRgap(items[i + 1]) + 2 * this._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
             }
             w.element.css({
-                right: self._optimiseGap(right[i] + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.hgap + o.rgap)
+                right: this._optimiseGap(right[i] + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.hgap + o.rgap),
             });
 
-            if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
+            if (isNull(columnSize) || columnSize === "" || columnSize === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.HTapeLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.htape", BI.HTapeLayout);
+}
 
 /**
  * 垂直tape布局
- * @class BI.VTapeLayout
- * @extends BI.Layout
+ * @class VTapeLayout
+ * @extends Layout
  */
-BI.VTapeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.VTapeLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VTapeLayout extends Layout {
+    static xtype = "bi.vtape";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-v-tape",
-            horizontalAlign: BI.HorizontalAlign.Left,
+            horizontalAlign: HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -144,33 +157,35 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             rowSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.VTapeLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        super.render(...arguments);
         this.populate(this.options.items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
-        items = BI.compact(items);
-        BI.each(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+    stroke(items) {
+        const o = this.options;
+        items = compact(items);
+        each(items, (i, item) => {
+            let w;
+            if (isEmptyObject(item)) {
                 return;
             }
-            if (!self.hasWidget(self._getChildName(i))) {
-                var w = BI._lazyCreateWidget(item);
-                self.addWidget(self._getChildName(i), w);
+            if (!this.hasWidget(this._getChildName(i))) {
+                w = _lazyCreateWidget(item);
+                this.addWidget(this._getChildName(i), w);
             } else {
-                w = self.getWidgetByName(self._getChildName(i));
+                w = this.getWidgetByName(this._getChildName(i));
             }
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
             if (o.rowSize.length > 0) {
                 if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                     rowSize = item.height;
@@ -178,76 +193,75 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
             }
             w.element.css({
                 position: "absolute",
-                left: self._optimiseGap(self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
-                right: self._optimiseGap(self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
-                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
+                left: this._optimiseGap(this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
+                right: this._optimiseGap(this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
+                height: isNumber(rowSize) ? this._optimiseGap(rowSize) : "",
             });
-            if (o.horizontalAlign === BI.HorizontalAlign.Center) {
+            if (o.horizontalAlign === HorizontalAlign.Center) {
                 w.element.css({
                     marginLeft: "auto",
-                    marginRight: "auto"
+                    marginRight: "auto",
                 });
-            } else if (o.horizontalAlign === BI.HorizontalAlign.Right) {
+            } else if (o.horizontalAlign === HorizontalAlign.Right) {
                 w.element.css({
-                    marginLeft: "auto"
+                    marginLeft: "auto",
                 });
             }
         });
 
-        var top = {}, bottom = {};
+        const top = {}, bottom = {};
         top[0] = o.innerVgap;
         bottom[items.length - 1] = o.innerVgap;
 
-        BI.any(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        any(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            const w = this.getWidgetByName(this._getChildName(i));
+            let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
             if (o.rowSize.length > 0) {
                 if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                     rowSize = item.height;
                 }
             }
-            if (BI.isNull(top[i])) {
-                var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
-                top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
+            if (isNull(top[i])) {
+                const preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
+                top[i] = top[i - 1] + preRowSize + this._optimiseItemTgap(items[i - 1]) + this._optimiseItemBgap(items[i - 1]) + 2 * this._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap)
+                top: this._optimiseGap(top[i] + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.vgap + o.tgap),
             });
 
-            if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
+            if (isNull(rowSize) || rowSize === "" || rowSize === "fill") {
                 return true;
             }
         });
-        BI.backAny(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        backAny(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
-            if (BI.isNull(bottom[i])) {
-                var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
-                bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
+            const w = this.getWidgetByName(this._getChildName(i));
+            const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            if (isNull(bottom[i])) {
+                const nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
+                bottom[i] = bottom[i + 1] + nextRowSize + this._optimiseItemTgap(items[i + 1]) + this._optimiseItemBgap(items[i + 1]) + 2 * this._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap)
+                bottom: this._optimiseGap(bottom[i] + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.vgap + o.bgap),
             });
 
-            if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
+            if (isNull(rowSize) || rowSize === "" || rowSize === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.VTapeLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.vtape", BI.VTapeLayout);
+}

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

@@ -1,45 +1,56 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isOdd, some, isNumber, isNull } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+import { HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * td布局
- * @class BI.TdLayout
- * @extends BI.Layout
+ * @class TdLayout
+ * @extends Layout
  */
-BI.TdLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class TdLayout extends Layout {
+    static xtype = "bi.td";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-td",
             columnSize: [],
             rowSize: [],
-            verticalAlign: BI.VerticalAlign.Middle,
-            horizontalAlign: BI.HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             tgap: 0,
             bgap: 0,
             lgap: 0,
             rgap: 0,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.TdLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.$table = Widget._renderEngine.createElement("<table>").attr({ cellspacing: 0, cellpadding: 0 }).css({
             position: "relative",
-            width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch) ? "100%" : "auto",
-            height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
+            width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch) ? "100%" : "auto",
+            height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
-            "border-collapse": "separate"
+            "border-collapse": "separate",
         });
         this.rows = 0;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (idx, arr) {
-        var o = this.options;
+    _addElement(idx, arr) {
+        const o = this.options;
 
         function firstElement (item, row, col) {
             if (row === 0) {
@@ -48,28 +59,28 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             if (col === 0) {
                 item.addClass("first-col");
             }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
+            item.addClass(isOdd(row + 1) ? "odd-row" : "even-row");
+            item.addClass(isOdd(col + 1) ? "odd-col" : "even-col");
             item.addClass("center-element");
         }
 
         function firstObject (item, row, col) {
-            var cls = "";
+            let cls = "";
             if (row === 0) {
                 cls += " first-row";
             }
             if (col === 0) {
                 cls += " first-col";
             }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+            isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
+            isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
+            item.cls = `${(item.cls || "") + cls} center-element`;
         }
 
         function first (item, row, col) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, row, col);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, row, col);
             } else if (item.el) {
                 firstObject(item.el, row, col);
@@ -78,30 +89,30 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        var height = BI.isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]));
-        var tr = BI._lazyCreateWidget({
+        const height = isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]));
+        const tr = _lazyCreateWidget({
             type: "bi.default",
             tagName: "tr",
-            height: height,
+            height,
             css: {
                 "max-height": height,
-                "min-height": height
-            }
+                "min-height": height,
+            },
         });
 
-        for (var i = 0; i < arr.length; i++) {
-            var w = BI._lazyCreateWidget(arr[i]);
-            if (o.verticalAlign === BI.VerticalAlign.Stretch) {
-                var top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]),
+        for (let i = 0; i < arr.length; i++) {
+            const w = _lazyCreateWidget(arr[i]);
+            if (o.verticalAlign === VerticalAlign.Stretch) {
+                const top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]),
                     bottom = o.vgap + o.bgap + this._optimiseItemBgap(arr[i]) + this._optimiseItemVgap(arr[i]);
-                w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
+                w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`);
             }
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            var item = arr[i];
+            w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" });
+            const item = arr[i];
             this._handleGap(w, item, i);
             first(w, this.rows++, i);
-            var width = "";
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            let width = "";
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize > 0) {
                 width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
             }
@@ -109,20 +120,21 @@ BI.TdLayout = BI.inherit(BI.Layout, {
                 if (o.columnSize.length > 0) {
                     return o.columnSize.indexOf("fill") >= 0;
                 }
-                return BI.some(arr, function (i, item) {
+                
+                return some(arr, (i, item) => {
                     if (item.width === "fill") {
                         return true;
                     }
                 });
             }
-            if ((BI.isNull(columnSize) || columnSize === "") && hasFill()) {
+            if ((isNull(columnSize) || columnSize === "") && hasFill()) {
                 width = 2;
             }
-            var td = BI._lazyCreateWidget({
+            const td = _lazyCreateWidget({
                 type: "bi.default",
-                width: width,
+                width,
                 tagName: "td",
-                items: [w]
+                items: [w],
             });
             // 对于表现为td的元素设置最大宽度，有几点需要注意
             // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
@@ -131,7 +143,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             if (columnSize > 0) {
                 td.element.css({
                     "max-width": width,
-                    "min-width": width
+                    "min-width": width,
                 });
             }
             td.element.css({
@@ -139,30 +151,30 @@ BI.TdLayout = BI.inherit(BI.Layout, {
                 "vertical-align": o.verticalAlign,
                 margin: "0",
                 padding: "0",
-                border: "none"
+                border: "none",
             });
             tr.addItem(td);
         }
         this.addWidget(this._getChildName(idx), tr);
+        
         return tr;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$table.append(frag);
         this.element.append(this.$table);
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("td布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.TdLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.td", BI.TdLayout);
+}

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

@@ -1,54 +1,63 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction } from "../../2.base";
+import { HorizontalAlign } from "../../constant";
+
 /**
  * 垂直布局
- * @class BI.VerticalLayout
- * @extends BI.Layout
+ * @class VerticalLayout
+ * @extends Layout
  */
-BI.VerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.VerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VerticalLayout extends Layout {
+    static xtype = "bi.vertical";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-v",
-            horizontalAlign: BI.HorizontalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            scrolly: true
+            scrolly: true,
         });
-    },
-    render: function () {
-        BI.VerticalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.VerticalLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         this._handleGap(w, item, null, i);
-        if (o.horizontalAlign === BI.HorizontalAlign.Center) {
+        if (o.horizontalAlign === HorizontalAlign.Center) {
             w.element.css({
                 marginLeft: "auto",
-                marginRight: "auto"
+                marginRight: "auto",
             });
-        } else if (o.horizontalAlign === BI.HorizontalAlign.Right) {
+        } else if (o.horizontalAlign === HorizontalAlign.Right) {
             w.element.css({
-                marginLeft: "auto"
+                marginLeft: "auto",
             });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.VerticalLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.vertical", BI.VerticalLayout);
+}

src/core/wrapper/layout/layout.window.js

@@ -1,11 +1,20 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, makeArray, isNumber, isNull } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+
 /**
  *
- * @class BI.WindowLayout
- * @extends BI.Layout
+ * @class WindowLayout
+ * @extends Layout
  */
-BI.WindowLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.WindowLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class WindowLayout extends Layout {
+    static xtype = "bi.window";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-window",
             columns: 3,
             rows: 2,
@@ -17,30 +26,31 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
             bgap: 0,
             columnSize: [],
             rowSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.WindowLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var o = this.options, self = this;
-        if (BI.isNumber(o.rowSize)) {
-            o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length);
+    stroke(items) {
+        const o = this.options;
+        if (isNumber(o.rowSize)) {
+            o.rowSize = makeArray(o.items.length, 1 / o.items.length);
         }
-        if (BI.isNumber(o.columnSize)) {
-            o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length);
+        if (isNumber(o.columnSize)) {
+            o.columnSize = makeArray(o.items[0].length, 1 / o.items[0].length);
         }
 
         function firstElement (item, cls) {
@@ -56,9 +66,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, row, col) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, row, col);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, row, col);
             } else if (item.el) {
                 firstObject(item.el, row, col);
@@ -67,108 +77,111 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        for (var i = 0; i < o.rows; i++) {
-            for (var j = 0; j < o.columns; j++) {
+        for (let i = 0; i < o.rows; i++) {
+            for (let j = 0; j < o.columns; j++) {
                 if (!o.items[i][j]) {
                     throw new Error("构造错误", o.items);
                 }
-                if (!this.hasWidget(this._getChildName(i + "_" + j))) {
-                    var w = BI._lazyCreateWidget(o.items[i][j]);
-                    w.element.css({position: "absolute"});
-                    this.addWidget(this._getChildName(i + "_" + j), w);
+                if (!this.hasWidget(this._getChildName(`${i}_${j}`))) {
+                    const w = _lazyCreateWidget(o.items[i][j]);
+                    w.element.css({ position: "absolute" });
+                    this.addWidget(this._getChildName(`${i}_${j}`), w);
                 }
             }
         }
-        var left = {}, right = {}, top = {}, bottom = {};
+        const left = {}, right = {}, top = {}, bottom = {};
         left[0] = 0;
         top[0] = 0;
         right[o.columns - 1] = 0;
         bottom[o.rows - 1] = 0;
         // 从上到下
-        for (var i = 0; i < o.rows; i++) {
-            for (var j = 0; j < o.columns; j++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(top[i])) {
+        for (let i = 0; i < o.rows; i++) {
+            for (let j = 0; j < o.columns; j++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(top[i])) {
                     top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap);
                 }
-                var t = this._optimiseGap(top[i] + o.vgap + o.tgap), h = "";
-                if (BI.isNumber(o.rowSize[i])) {
+                const t = this._optimiseGap(top[i] + o.vgap + o.tgap);
+                let h = "";
+                if (isNumber(o.rowSize[i])) {
                     h = this._optimiseGap(o.rowSize[i]);
                 }
-                wi.element.css({top: t, height: h});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ top: t, height: h });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.rowSize[i])) {
+            if (!isNumber(o.rowSize[i])) {
                 break;
             }
         }
         // 从下到上
-        for (var i = o.rows - 1; i >= 0; i--) {
-            for (var j = 0; j < o.columns; j++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(bottom[i])) {
+        for (let i = o.rows - 1; i >= 0; i--) {
+            for (let j = 0; j < o.columns; j++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(bottom[i])) {
                     bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap);
                 }
-                var b = this._optimiseGap(bottom[i] + o.vgap + o.bgap), h = "";
-                if (BI.isNumber(o.rowSize[i])) {
+                const b = this._optimiseGap(bottom[i] + o.vgap + o.bgap);
+                let h = "";
+                if (isNumber(o.rowSize[i])) {
                     h = this._optimiseGap(o.rowSize[i]);
                 }
-                wi.element.css({bottom: b, height: h});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ bottom: b, height: h });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.rowSize[i])) {
+            if (!isNumber(o.rowSize[i])) {
                 break;
             }
         }
         // 从左到右
-        for (var j = 0; j < o.columns; j++) {
-            for (var i = 0; i < o.rows; i++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(left[j])) {
+        for (let j = 0; j < o.columns; j++) {
+            for (let i = 0; i < o.rows; i++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(left[j])) {
                     left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap);
                 }
-                var l = this._optimiseGap(left[j] + o.hgap + o.lgap), w = "";
-                if (BI.isNumber(o.columnSize[j])) {
+                const l = this._optimiseGap(left[j] + o.hgap + o.lgap);
+                let w = "";
+                if (isNumber(o.columnSize[j])) {
                     w = this._optimiseGap(o.columnSize[j]);
                 }
-                wi.element.css({left: l, width: w});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ left: l, width: w });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.columnSize[j])) {
+            if (!isNumber(o.columnSize[j])) {
                 break;
             }
         }
         // 从右到左
-        for (var j = o.columns - 1; j >= 0; j--) {
-            for (var i = 0; i < o.rows; i++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(right[j])) {
+        for (let j = o.columns - 1; j >= 0; j--) {
+            for (let i = 0; i < o.rows; i++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(right[j])) {
                     right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap);
                 }
-                var r = this._optimiseGap(right[j] + o.hgap + o.rgap), w = "";
-                if (BI.isNumber(o.columnSize[j])) {
+                const r = this._optimiseGap(right[j] + o.hgap + o.rgap);
+                let w = "";
+                if (isNumber(o.columnSize[j])) {
                     w = this._optimiseGap(o.columnSize[j]);
                 }
-                wi.element.css({right: r, width: w});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ right: r, width: w });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.columnSize[j])) {
+            if (!isNumber(o.columnSize[j])) {
                 break;
             }
         }
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("window布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.WindowLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.window", BI.WindowLayout);
+}