diff --git a/src/base/0.base.js b/src/base/0.base.js
index e4daef1cf..a2cffed9b 100644
--- a/src/base/0.base.js
+++ b/src/base/0.base.js
@@ -7,7 +7,7 @@ import {
     PopoverController,
     ResizeController,
     TooltipsController,
-    StyleLoaderManager,
+    StyleLoaderManager
 } from "../core";
 
 const Resizers = new ResizeController();
@@ -20,7 +20,7 @@ const Drawers = new DrawerController();
 const Broadcasts = new BroadcastController();
 const StyleLoaders = new StyleLoaderManager();
 
-export {     
+export {
     Resizers,
     Layers,
     Maskers,
diff --git a/src/core/wrapper/layout/fill/auto.vtape.js b/src/core/wrapper/layout/fill/auto.vtape.js
index efc784f5d..aa6c2eb9b 100644
--- a/src/core/wrapper/layout/fill/auto.vtape.js
+++ b/src/core/wrapper/layout/fill/auto.vtape.js
@@ -1,9 +1,17 @@
-BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, any, isEmptyObject, isNull, backAny } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class AutoVerticalTapeLayout extends Layout {
+    static xtype = "bi.vtape_auto";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-auto-htape",
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -11,16 +19,17 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             rowSize: [],
-            items: []
+            items: [],
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.vtape",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -35,65 +44,65 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _handleResize: function () {
-        var self = this, o = this.options;
-        var items = o.items;
-        var top = {}, bottom = {};
+    _handleResize() {
+        const o = this.options;
+        const items = o.items;
+        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.layout.getWidgetByName(self._getChildName(i));
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            const w = this.layout.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;
+            if (isNull(top[i])) {
+                let preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
                 if (preRowSize === "") {
-                    preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height();
+                    preRowSize = this.layout.getWidgetByName(this._getChildName(i - 1)).element.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;
+                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 (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.layout.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;
+            const w = this.layout.getWidgetByName(this._getChildName(i));
+            const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            if (isNull(bottom[i])) {
+                let nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
                 if (nextRowSize === "") {
-                    nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height();
+                    nextRowSize = this.layout.getWidgetByName(this._getChildName(i + 1)).element.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;
+                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 (rowSize === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    mounted: function () {
+    mounted() {
         if (window.ResizeObserver) {
             this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this));
             this.resizeObserver.observe(this.element[0]);
@@ -103,23 +112,22 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
             this.mutationObserver.observe(this.element[0], {
                 attributes: true,
                 childList: true,
-                subtree: true
+                subtree: true,
             });
         }
         this._handleResize();
-    },
+    }
 
-    destroyed: function () {
+    destroyed() {
         this.resizeObserver && this.resizeObserver.unobserve(this.element[0]);
         this.mutationObserver && this.mutationObserver.disconnect();
-    },
+    }
 
-    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.vtape_auto", BI.AutoVerticalTapeLayout);
+}
diff --git a/src/core/wrapper/layout/fill/fill.horizontal.js b/src/core/wrapper/layout/fill/fill.horizontal.js
index 72ce8d393..88cc76e7d 100644
--- a/src/core/wrapper/layout/fill/fill.horizontal.js
+++ b/src/core/wrapper/layout/fill/fill.horizontal.js
@@ -1,6 +1,9 @@
+import { shortcut } from "@/core/decorator";
+
 /**
  * 横向填满布局
  */
-BI.HorizontalFillLayout = function () {
-};
-BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout);
+@shortcut()
+export class HorizontalFillLayout {
+    static xtype = "bi.horizontal_fill";
+}
diff --git a/src/core/wrapper/layout/fill/fill.vertical.js b/src/core/wrapper/layout/fill/fill.vertical.js
index 9acd9c307..66fbafa7d 100644
--- a/src/core/wrapper/layout/fill/fill.vertical.js
+++ b/src/core/wrapper/layout/fill/fill.vertical.js
@@ -1,6 +1,9 @@
+import { shortcut } from "@/core/decorator";
+
 /**
  * 纵向填满布局
  */
-BI.VerticalFillLayout = function () {
-};
-BI.shortcut("bi.vertical_fill", BI.VerticalFillLayout);
+@shortcut()
+export class VerticalFillLayout {
+    static xtype = "bi.vertical_fill";
+}
diff --git a/src/core/wrapper/layout/fill/float.fill.horizontal.js b/src/core/wrapper/layout/fill/float.fill.horizontal.js
index 512ffb627..cd3475ad8 100644
--- a/src/core/wrapper/layout/fill/float.fill.horizontal.js
+++ b/src/core/wrapper/layout/fill/float.fill.horizontal.js
@@ -1,9 +1,18 @@
-BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, any, isEmptyObject, isNull, backAny, isFunction, compact, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class FloatHorizontalFillLayout extends Layout {
+    static xtype = "bi.horizontal_float_fill";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-float-fill clearfix",
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -11,134 +20,136 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             columnSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.FloatHorizontalFillLayout.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);
-        var rank = 0;
+    stroke(items) {
+        const o = this.options;
+        items = compact(items);
+        let rank = 0;
 
-        function createWidget (i, item, desc) {
-            if (o.verticalAlign !== BI.VerticalAlign.Stretch) {
-                var w = BI._lazyCreateWidget({
+        const createWidget = (i, item, desc) => {
+            let w;
+            if (o.verticalAlign !== VerticalAlign.Stretch) {
+                w = _lazyCreateWidget({
                     type: "bi.vertical_adapt",
-                    horizontalAlign: BI.HorizontalAlign.Stretch,
+                    horizontalAlign: HorizontalAlign.Stretch,
                     verticalAlign: o.verticalAlign,
                     columnSize: ["fill"],
-                    items: [item]
+                    items: [item],
                 });
             } else {
-                var w = BI._lazyCreateWidget(item);
+                w = _lazyCreateWidget(item);
             }
-            if (o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
+            if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
                 w.element.css({
-                    "margin-top": self._optimiseGap(o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item))
+                    "margin-top": this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
                 });
             }
             if (desc) {
-                if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item))
+                        "margin-right": this._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
-                if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-left": self._optimiseGap(o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item))
+                        "margin-left": this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
             } else {
-                if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item))
+                        "margin-left": this._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
-                if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-right": self._optimiseGap(o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item))
+                        "margin-right": this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
             }
-            if (o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
+            if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
                 w.element.css({
-                    "margin-bottom": self._optimiseGap(o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item))
+                    "margin-bottom": this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
                 });
             }
-            var top = o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item),
-                bottom = o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
-            if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
+            const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
+                bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) {
                 w.element.css({
-                    height: "calc(100% - " + self._optimiseGap(top + bottom) + ")"
+                    height: `calc(100% - ${this._optimiseGap(top + bottom)})`,
                 });
             }
             w.element.css({
-                position: "relative"
+                position: "relative",
             });
+            
             return w;
-        }
+        };
 
-        BI.any(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        any(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize === "fill") {
                 return true;
             }
-            var w = createWidget(i, item);
-            self.addWidget(self._getChildName(rank++), w);
+            const w = createWidget(i, item);
+            this.addWidget(this._getChildName(rank++), w);
             w.element.css({
-                float: "left"
+                "float": "left",
             });
         });
-        BI.backAny(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        backAny(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize === "fill") {
                 return true;
             }
-            var w = createWidget(i, item, true);
-            self.addWidget(self._getChildName(rank++), w);
+            const w = createWidget(i, item, true);
+            this.addWidget(this._getChildName(rank++), w);
             w.element.css({
-                float: "right"
+                "float": "right",
             });
         });
-        BI.each(items, function (i, item) {
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+        each(items, (i, item) => {
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize === "fill") {
-                var w = createWidget(i, item);
-                self.addWidget(self._getChildName(rank++), w);
+                const w = createWidget(i, item);
+                this.addWidget(this._getChildName(rank++), w);
             }
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("填充布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatHorizontalFillLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.horizontal_float_fill", BI.FloatHorizontalFillLayout);
+}
diff --git a/src/core/wrapper/layout/fill/index.js b/src/core/wrapper/layout/fill/index.js
new file mode 100644
index 000000000..aefc020d1
--- /dev/null
+++ b/src/core/wrapper/layout/fill/index.js
@@ -0,0 +1,4 @@
+export { AutoVerticalTapeLayout } from "./auto.vtape";
+export { HorizontalFillLayout } from "./fill.horizontal";
+export { VerticalFillLayout } from "./fill.vertical";
+export { FloatHorizontalFillLayout } from "./float.fill.horizontal";
diff --git a/src/core/wrapper/layout/flex/flex.center.js b/src/core/wrapper/layout/flex/flex.center.js
index 8944b3add..caec5842e 100644
--- a/src/core/wrapper/layout/flex/flex.center.js
+++ b/src/core/wrapper/layout/flex/flex.center.js
@@ -1,30 +1,40 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexCenterLayout
- * @extends BI.Layout
+ * @class FlexCenterLayout
+ * @extends Layout
  */
-BI.FlexCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexCenterLayout extends Layout {
+    static xtype = "bi.flex_center_adapt";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-c",
-            verticalAlign: BI.VerticalAlign.Middle,
-            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Center,
             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.flex_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -39,16 +49,15 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
             bgap: o.bgap,
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);
+}
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.center.js b/src/core/wrapper/layout/flex/flex.horizontal.center.js
index 220f1f394..ffc0d6aac 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.center.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.center.js
@@ -1,15 +1,23 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexHorizontalCenter
- * @extends BI.Layout
+ * @class FlexHorizontalCenter
+ * @extends Layout
  */
-BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexHorizontalCenter extends Layout {
+    static xtype = "bi.flex_horizontal_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-h-c",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrolly: false,
             hgap: 0,
@@ -17,15 +25,17 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
             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.flex_vertical",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -40,17 +50,20 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
             bgap: o.bgap,
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
-BI.shortcut("bi.flex_horizontal_center_adapt", BI.FlexHorizontalCenter);
+}
+
+@shortcut()
+export class FlexHorizontalCenterAdapt extends FlexHorizontalCenter {
+    static xtype = "bi.flex_horizontal_center_adapt";
+}
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index 75326335b..7489d30a7 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexHorizontalLayout
- * @extends BI.Layout
+ * @class FlexHorizontalLayout
+ * @extends Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexHorizontalLayout extends Layout {
+    static xtype = "bi.flex_horizontal";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-h",
-            verticalAlign: BI.VerticalAlign.Top,
-            horizontalAlign: BI.HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
+            verticalAlign: VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -18,52 +26,54 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
         }
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        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 || o.columnSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.width === "fill" || item.width === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexHorizontalLayout.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;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (columnSize !== "auto") {
             if (columnSize === "fill" || columnSize === "") {
-                if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) {
+                if (o.horizontalAlign !== HorizontalAlign.Stretch) {
                     if (o.scrollable === true || o.scrollx === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -93,12 +103,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, i);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);
+}
diff --git a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
index b52b1e456..db2aeadc7 100644
--- a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
@@ -1,6 +1,13 @@
-BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, isArray, each, map, stripEL } from "@/core/2.base";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class FlexLeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.flex_left_right_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-lr-v-c",
             columnSize: [],
             items: {},
@@ -15,33 +22,35 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var items = this._formatItems(o.items);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        const items = this._formatItems(o.items);
+        
         return {
             type: "bi.flex_vertical_adapt",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []),
-            items: items,
+            items,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
             innerHgap: o.innerHgap,
-            innerVgap: o.innerVgap
+            innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _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;
                 }
@@ -50,32 +59,34 @@ BI.FlexLeftRightVerticalAdaptLayout = 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)
+        let leftItems = left || items.left || [];
+        const rightItems = right || items.right || [];
+        leftItems = map(leftItems, (i, item) => {
+            const json = {
+                el: stripEL(item),
             };
-            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;
         });
+        
         return leftItems.concat({
             el: {
                 type: "bi.flex_vertical_adapt",
                 columnSize: o.columnSize.slice(leftItems.length),
                 css: {
-                    "margin-left": "auto"
+                    "margin-left": "auto",
                 },
                 hgap: o.rhgap,
                 vgap: o.rvgap,
@@ -83,22 +94,21 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 rgap: o.rrgap,
                 tgap: o.rtgap,
                 bgap: o.rbgap,
-                items: rightItems
-            }
+                items: 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.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/flex/flex.vertical.center.js b/src/core/wrapper/layout/flex/flex.vertical.center.js
index cf2e55077..a4a830862 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.center.js
@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalCenter
- * @extends BI.Layout
+ * @class FlexVerticalCenter
+ * @extends Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexVerticalCenter extends Layout {
+    static xtype = "bi.flex_vertical_adapt";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-v-c",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             scrollx: false,
             hgap: 0,
@@ -18,15 +26,17 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
             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.flex_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             horizontalAlign: o.horizontalAlign,
@@ -41,17 +51,20 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
             hgap: o.hgap,
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
-BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);
+}
+
+@shortcut()
+export class FlexVerticalCenterAdapt extends FlexVerticalCenter {
+    static xtype = "bi.flex_vertical_center_adapt"
+}
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
index 1c56586cc..7847d7009 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -1,15 +1,21 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalLayout
- * @extends BI.Layout
+ * @class FlexVerticalLayout
+ * @extends Layout
  */
-BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexVerticalLayout extends Layout {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-v",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrolly: true,
             hgap: 0,
@@ -17,52 +23,54 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        this.element.addClass(`h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
         }
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _hasFill: function () {
-        var o = this.options;
+    _hasFill() {
+        const o = this.options;
         if (o.rowSize.length > 0) {
             return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.height === "fill" || item.height === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
-        var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement.apply(this, arguments);
+        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 = null;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (rowSize !== "auto") {
             if (rowSize === "fill" || rowSize === "") {
-                if (o.verticalAlign !== BI.VerticalAlign.Stretch) {
+                if (o.verticalAlign !== VerticalAlign.Stretch) {
                     if (o.scrollable === true || o.scrolly === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -92,12 +100,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, null, i);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate.apply(this, arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);
+}
diff --git a/src/core/wrapper/layout/flex/index.js b/src/core/wrapper/layout/flex/index.js
new file mode 100644
index 000000000..1625f8ad0
--- /dev/null
+++ b/src/core/wrapper/layout/flex/index.js
@@ -0,0 +1,7 @@
+export { FlexCenterLayout } from "./flex.center";
+export { FlexHorizontalCenter, FlexHorizontalCenterAdapt } from "./flex.horizontal.center";
+export { FlexHorizontalLayout } from "./flex.horizontal";
+export { FlexLeftRightVerticalAdaptLayout } from "./flex.leftrightvertical.center";
+export { FlexVerticalCenter, FlexVerticalCenterAdapt } from "./flex.vertical.center";
+export { FlexVerticalLayout } from "./flex.vertical";
+export * from "./wrapper";
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
index ee44e9823..347ab62a9 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexWrapperCenterLayout
- * @extends BI.Layout
+ * @class FlexWrapperCenterLayout
+ * @extends Layout
  */
-BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperCenterLayout extends Layout {
+    static xtype = "bi.flex_scrollable_center_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-c",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             scrollx: false,
             scrollable: true,
@@ -19,15 +27,17 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
             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.flex_scrollable_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -40,16 +50,15 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             lgap: o.lgap,
             rgap: o.rgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout);
+}
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
index 1735c25ff..c15e28369 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalCenter
- * @extends BI.Layout
+ * @class FlexVerticalCenter
+ * @extends Layout
  */
-BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperHorizontalCenter extends Layout {
+    static xtype = "bi.flex_scrollable_horizontal_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-v-c",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrollable: true,
             scrolly: false,
@@ -19,15 +27,17 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
             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.flex_scrollable_vertical",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -40,17 +50,20 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             tgap: o.tgap,
             bgap: o.bgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
-BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);
+}
+
+@shortcut()
+export class FlexWrapperHorizontalCenterAdapt extends FlexWrapperHorizontalCenter {
+    static xtype = "bi.flex_scrollable_horizontal_center_adapt";
+}
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index fa90b0543..4e3cee14a 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -1,16 +1,25 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { Widget } from "@/core/4.widget";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexHorizontalLayout
- * @extends BI.Layout
+ * @class FlexHorizontalLayout
+ * @extends Layout
  */
-BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperHorizontalLayout extends Layout {
+    static xtype = "bi.flex_scrollable_horizontal";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-h",
-            verticalAlign: BI.VerticalAlign.Top,
-            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
             columnSize: [],
             scrollable: null,
             scrollx: true,
@@ -19,47 +28,49 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
+        this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-h-w v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
+        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 || o.columnSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.width === "fill" || item.width === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexWrapperHorizontalLayout.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;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (columnSize !== "auto") {
             if (columnSize === "fill" || columnSize === "") {
-                if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) {
+                if (o.horizontalAlign !== HorizontalAlign.Stretch) {
                     if (o.scrollable === true || o.scrollx === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -91,21 +102,21 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, i);
+        
         return w;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$wrapper.append(frag);
         this.element.append(this.$wrapper);
-    },
+    }
 
-    _getWrapper: function () {
+    _getWrapper() {
         return this.$wrapper;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);
+}
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
index 5b9e7e11d..98c340452 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalCenter
- * @extends BI.Layout
+ * @class FlexVerticalCenter
+ * @extends Layout
  */
-BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperVerticalCenter extends Layout {
+    static xtype = "bi.flex_scrollable_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-v-c",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             scrollx: false,
             scrollable: true,
@@ -19,15 +27,17 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
             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.flex_scrollable_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             horizontalAlign: o.horizontalAlign,
@@ -40,17 +50,20 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             lgap: o.lgap,
             rgap: o.rgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
-BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);
+}
+
+@shortcut()
+export class FlexWrapperVerticalCenterAdapt extends FlexWrapperVerticalCenter {
+    static xtype = "bi.flex_scrollable_vertical_center_adapt";
+}
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
index 76beeb601..f557ba543 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@@ -1,16 +1,25 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { Widget } from "@/core/4.widget";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexWrapperVerticalLayout
- * @extends BI.Layout
+ * @class FlexWrapperVerticalLayout
+ * @extends Layout
  */
-BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperVerticalLayout extends Layout {
+    static xtype = "bi.flex_scrollable_vertical";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-v",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrollable: null,
             scrolly: true,
@@ -19,47 +28,49 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
+        this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-v-w h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
+        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.rowSize.length > 0) {
             return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.height === "fill" || item.height === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
-        var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        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 = null;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (rowSize !== "auto") {
             if (rowSize === "fill" || rowSize === "") {
-                if (o.verticalAlign !== BI.VerticalAlign.Stretch) {
+                if (o.verticalAlign !== VerticalAlign.Stretch) {
                     if (o.scrollable === true || o.scrolly === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -91,21 +102,21 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, null, i);
+        
         return w;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$wrapper.append(frag);
         this.element.append(this.$wrapper);
-    },
+    }
 
-    _getWrapper: function () {
+    _getWrapper() {
         return this.$wrapper;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);
+}
diff --git a/src/core/wrapper/layout/flex/wrapper/index.js b/src/core/wrapper/layout/flex/wrapper/index.js
new file mode 100644
index 000000000..5257a1b70
--- /dev/null
+++ b/src/core/wrapper/layout/flex/wrapper/index.js
@@ -0,0 +1,5 @@
+export { FlexWrapperCenterLayout } from "./flex.wrapper.center";
+export { FlexWrapperHorizontalCenter, FlexWrapperHorizontalCenterAdapt } from "./flex.wrapper.horizontal.center";
+export { FlexWrapperHorizontalLayout } from "./flex.wrapper.horizontal";
+export { FlexWrapperVerticalCenter, FlexWrapperVerticalCenterAdapt } from "./flex.wrapper.vertical.center";
+export { FlexWrapperVerticalLayout } from "./flex.wrapper.vertical";
diff --git a/src/core/wrapper/layout/float/float.absolute.center.js b/src/core/wrapper/layout/float/float.absolute.center.js
index 08cc5b326..6aefbc1ac 100644
--- a/src/core/wrapper/layout/float/float.absolute.center.js
+++ b/src/core/wrapper/layout/float/float.absolute.center.js
@@ -1,36 +1,42 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction } from "@/core/2.base";
+import { Layout } from "../../layout";
+
 /**
  * absolute实现的居中布局
- * @class BI.FloatAbsoluteCenterLayout
- * @extends BI.Layout
+ * @class FloatAbsoluteCenterLayout
+ * @extends Layout
  */
-BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatAbsoluteCenterLayout extends Layout {
+    static xtype = "bi.absolute_center_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-c-fl",
         });
-    },
+    }
 
-    render: function () {
-        BI.FloatAbsoluteCenterLayout.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.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
         w.element.addClass("bi-abs-c-item").css({
             position: "absolute",
         });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.absolute_center_float", BI.FloatAbsoluteCenterLayout);
+}
diff --git a/src/core/wrapper/layout/float/float.absolute.horizontal.js b/src/core/wrapper/layout/float/float.absolute.horizontal.js
index b9aae3708..8d2757217 100644
--- a/src/core/wrapper/layout/float/float.absolute.horizontal.js
+++ b/src/core/wrapper/layout/float/float.absolute.horizontal.js
@@ -1,23 +1,32 @@
+import { shortcut } from "@/core/decorator";
+import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * absolute实现的居中布局
- * @class BI.FloatAbsoluteHorizontalLayout
- * @extends BI.Layout
+ * @class FloatAbsoluteHorizontalLayout
+ * @extends Layout
  */
-BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatAbsoluteHorizontalLayout extends Layout {
+    static xtype = "bi.absolute_horizontal_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-h-fl",
-            horizontalAlign: BI.HorizontalAlign.Center,
+            horizontalAlign: HorizontalAlign.Center,
             rowSize: [],
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.FloatAbsoluteHorizontalLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.vtape",
             horizontalAlign: o.horizontalAlign,
@@ -26,8 +35,8 @@ BI.FloatAbsoluteHorizontalLayout = 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: "50%",
             vgap: o.vgap,
@@ -39,34 +48,35 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options;
-        if (o.horizontalAlign === BI.HorizontalAlign.Left) {
+    _formatItems(items) {
+        const o = this.options;
+        if (o.horizontalAlign === HorizontalAlign.Left) {
             return items;
         }
-        var cls = o.horizontalAlign === BI.HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item";
-        return BI.map(items, function (i, item) {
-            if (!item || BI.isEmptyObject(item)) {
+        const cls = o.horizontalAlign === HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item";
+        
+        return map(items, (i, item) => {
+            if (!item || isEmptyObject(item)) {
                 return item;
             }
-            var el = BI.stripEL(item);
-            if (BI.isWidget(el)) {
+            const el = stripEL(item);
+            if (isWidget(el)) {
                 el.element.addClass(cls);
             } else {
                 el.cls = (el.cls || "") + cls;
             }
+            
             return item;
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.absolute_horizontal_float", BI.FloatAbsoluteHorizontalLayout);
+}
diff --git a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
index 9de105651..0b545c822 100644
--- a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
+++ b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
@@ -1,8 +1,16 @@
-BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, map, isEmptyObject, stripEL, isWidget, isArray, each } from "@/core/2.base";
+import { VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class FloatAbsoluteLeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_left_right_vertical_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-lr-v-fl",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: {},
             llgap: 0,
             lrgap: 0,
@@ -15,16 +23,18 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.FloatAbsoluteLeftRightVerticalAdaptLayout.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: this._formatItems(o.items),
@@ -33,15 +43,15 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             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;
                 }
@@ -50,98 +60,105 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 }
             });
         }
-        var leftItems = left || items.left || [];
-        var rightItems = right || items.right || [];
-        leftItems = BI.map(leftItems, function (i, item) {
-            var el = BI.stripEL(item);
-            if (o.verticalAlign === BI.VerticalAlign.Middle) {
-                if (BI.isWidget(el)) {
+        let leftItems = left || items.left || [];
+        let rightItems = right || items.right || [];
+        leftItems = map(leftItems, (i, item) => {
+            const el = stripEL(item);
+            if (o.verticalAlign === VerticalAlign.Middle) {
+                if (isWidget(el)) {
                     el.element.addClass("bi-abs-c-y-item");
                 } else {
-                    el.cls = (el.cls || "") + "bi-abs-c-y-item";
+                    el.cls = `${el.cls || ""}bi-abs-c-y-item`;
                 }
             }
-            var json = {
-                el: el,
-                width: item.width
+            const json = {
+                el,
+                width: item.width,
             };
             // if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             //     json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0);
             // }
-            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 + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             //     json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0);
             // }
+
             return json;
         });
-        rightItems = BI.map(rightItems, function (i, item) {
-            var el = BI.stripEL(item);
-            if (o.verticalAlign === BI.VerticalAlign.Middle) {
-                if (BI.isWidget(el)) {
+        rightItems = map(rightItems, (i, item) => {
+            const el = stripEL(item);
+            if (o.verticalAlign === VerticalAlign.Middle) {
+                if (isWidget(el)) {
                     el.element.addClass("bi-abs-c-y-item");
                 } else {
-                    el.cls = (el.cls || "") + "bi-abs-c-y-item";
+                    el.cls = `${el.cls || ""}bi-abs-c-y-item`;
                 }
             }
-            var json = {
-                el: el,
-                width: item.width
+            const json = {
+                el,
+                width: item.width,
             };
             // if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             //     json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0);
             // }
-            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 + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             //     json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0);
             // }
+
             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_float", BI.FloatAbsoluteLeftRightVerticalAdaptLayout);
+}
+
+@shortcut()
+export class FloatAbsoluteRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_right_vertical_float";
 
-BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-r-v-fl",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: [],
             lgap: 0,
             rgap: 0,
-            hgap: 0
+            hgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.FloatAbsoluteRightVerticalAdaptLayout.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(this._formatItems(o.items)),
@@ -151,39 +168,40 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             vgap: "50%",
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        if (this.options.verticalAlign !== BI.VerticalAlign.Middle) {
+    _formatItems(items) {
+        if (this.options.verticalAlign !== VerticalAlign.Middle) {
             return items;
         }
-        return BI.map(items, function (i, item) {
-            if (!item || BI.isEmptyObject(item)) {
+        
+        return map(items, (i, item) => {
+            if (!item || isEmptyObject(item)) {
                 return item;
             }
-            var el = BI.stripEL(item);
-            if (BI.isWidget(el)) {
+            const el = stripEL(item);
+            if (isWidget(el)) {
                 el.element.addClass("bi-abs-c-y-item");
             } else {
-                el.cls = (el.cls || "") + "bi-abs-c-y-item";
+                el.cls = `${el.cls || ""}bi-abs-c-y-item`;
             }
+            
             return item;
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke([{}].concat(this._formatItems(this.options.items)));
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate([{}].concat(this._formatItems(items)));
     }
-});
-BI.shortcut("bi.absolute_right_vertical_float", BI.FloatAbsoluteRightVerticalAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/float/float.absolute.vertical.js b/src/core/wrapper/layout/float/float.absolute.vertical.js
index 01b949b06..d55dba779 100644
--- a/src/core/wrapper/layout/float/float.absolute.vertical.js
+++ b/src/core/wrapper/layout/float/float.absolute.vertical.js
@@ -1,23 +1,32 @@
+import { shortcut } from "@/core/decorator";
+import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
+import { VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * absolute实现的居中布局
- * @class BI.FloatAbsoluteVerticalLayout
- * @extends BI.Layout
+ * @class FloatAbsoluteVerticalLayout
+ * @extends Layout
  */
-BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatAbsoluteVerticalLayout extends Layout {
+    static xtype = "bi.absolute_vertical_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-h-fl",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             lgap: 0,
-            rgap: 0
+            rgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.FloatAbsoluteVerticalLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
             verticalAlign: o.verticalAlign,
@@ -26,8 +35,8 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             vgap: "50%",
             hgap: o.hgap,
@@ -39,34 +48,35 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options;
-        if (o.verticalAlign === BI.VerticalAlign.Top) {
+    _formatItems(items) {
+        const o = this.options;
+        if (o.verticalAlign === VerticalAlign.Top) {
             return items;
         }
-        var cls = o.verticalAlign === BI.VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item";
-        return BI.map(items, function (i, item) {
-            if (!item || BI.isEmptyObject(item)) {
+        const cls = o.verticalAlign === VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item";
+        
+        return map(items, (i, item) => {
+            if (!item || isEmptyObject(item)) {
                 return item;
             }
-            var el = BI.stripEL(item);
-            if (BI.isWidget(el)) {
+            const el = stripEL(item);
+            if (isWidget(el)) {
                 el.element.addClass(cls);
             } else {
                 el.cls = (el.cls || "") + cls;
             }
+            
             return item;
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.absolute_vertical_float", BI.FloatAbsoluteVerticalLayout);
+}
diff --git a/src/core/wrapper/layout/float/float.horizontal.js b/src/core/wrapper/layout/float/float.horizontal.js
index 97ac66b49..9b3da1f9d 100644
--- a/src/core/wrapper/layout/float/float.horizontal.js
+++ b/src/core/wrapper/layout/float/float.horizontal.js
@@ -1,30 +1,37 @@
+import { shortcut } from "@/core/decorator";
+import { extend, map } from "@/core/2.base";
+import { VerticalAlign, HorizontalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * 浮动的水平居中布局
  */
-BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class FloatHorizontalLayout extends Layout {
+    static xtype = "bi.horizontal_float";
 
-    props: function () {
-        return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-fl",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        if (o.verticalAlign === BI.VerticalAlign.Top) {
+    render() {
+        const o = this.options;
+        if (o.verticalAlign === VerticalAlign.Top) {
             return {
                 type: "bi.vertical",
-                ref: function (_ref) {
-                    self.layout = _ref;
+                ref: _ref => {
+                    this.layout = _ref;
                 },
                 items: this._formatItems(o.items),
                 vgap: o.vgap,
@@ -32,22 +39,23 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
                 bgap: o.bgap,
                 scrollx: o.scrollx,
                 scrolly: o.scrolly,
-                scrollable: o.scrollable
+                scrollable: o.scrollable,
             };
         }
+        
         return {
             type: "bi.inline",
             items: [{
                 el: {
                     type: "bi.vertical",
-                    ref: function (_ref) {
-                        self.layout = _ref;
+                    ref: _ref => {
+                        this.layout = _ref;
                     },
                     items: this._formatItems(o.items),
                     vgap: o.vgap,
                     tgap: o.tgap,
-                    bgap: o.bgap
-                }
+                    bgap: o.bgap,
+                },
             }],
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -55,13 +63,14 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options;
-        return BI.map(items, function (i, item) {
+    _formatItems(items) {
+        const o = this.options;
+        
+        return map(items, (i, item) => {
             return {
                 el: {
                     type: "bi.inline_horizontal_adapt",
@@ -69,18 +78,17 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
                     items: [item],
                     hgap: o.hgap,
                     lgap: o.lgap,
-                    rgap: o.rgap
-                }
+                    rgap: o.rgap,
+                },
             };
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);
+}
diff --git a/src/core/wrapper/layout/float/index.js b/src/core/wrapper/layout/float/index.js
new file mode 100644
index 000000000..97d5b1ff2
--- /dev/null
+++ b/src/core/wrapper/layout/float/index.js
@@ -0,0 +1,5 @@
+export { FloatAbsoluteCenterLayout } from "./float.absolute.center";
+export { FloatAbsoluteHorizontalLayout } from "./float.absolute.horizontal";
+export { FloatAbsoluteLeftRightVerticalAdaptLayout, FloatAbsoluteRightVerticalAdaptLayout } from "./float.absolute.leftrightvertical";
+export { FloatAbsoluteVerticalLayout } from "./float.absolute.vertical";
+export { FloatHorizontalLayout } from "./float.horizontal";
diff --git a/src/core/wrapper/layout/index.js b/src/core/wrapper/layout/index.js
index 03bd1cf74..9fd652878 100644
--- a/src/core/wrapper/layout/index.js
+++ b/src/core/wrapper/layout/index.js
@@ -15,3 +15,9 @@ export { TdLayout } from "./layout.td";
 export { VerticalLayout } from "./layout.vertical";
 export { WindowLayout } from "./layout.window";
 export * from "./adapt";
+export * from "./fill";
+export * from "./flex";
+export * from "./float";
+export * from "./middle";
+export * from "./responsive";
+export * from "./sticky";
diff --git a/src/core/wrapper/layout/middle/index.js b/src/core/wrapper/layout/middle/index.js
new file mode 100644
index 000000000..c564fe1a6
--- /dev/null
+++ b/src/core/wrapper/layout/middle/index.js
@@ -0,0 +1,4 @@
+export { CenterLayout } from "./middle.center";
+export { FloatCenterLayout } from "./middle.float.center";
+export { HorizontalCenterLayout } from "./middle.horizontal";
+export { VerticalCenterLayout } from "./middle.vertical";
diff --git a/src/core/wrapper/layout/middle/middle.center.js b/src/core/wrapper/layout/middle/middle.center.js
index 9d80a094f..039d90a19 100644
--- a/src/core/wrapper/layout/middle/middle.center.js
+++ b/src/core/wrapper/layout/middle/middle.center.js
@@ -1,72 +1,80 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板
- * @class BI.CenterLayout
- * @extends BI.Layout
+ * @class CenterLayout
+ * @extends Layout
  */
-BI.CenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class CenterLayout extends Layout {
+    static xtype = "bi.center";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.CenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var list = [], items = o.items;
-        BI.each(items, function (i) {
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const list = [], items = o.items;
+        each(items, i => {
             list.push({
                 column: i,
                 row: 0,
-                el: BI._lazyCreateWidget({
+                el: _lazyCreateWidget({
                     type: "bi.default",
-                    cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")
-                })
+                    cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
+                }),
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: self._optimiseGap(o.hgap + o.lgap),
-                    right: self._optimiseGap(o.hgap + o.rgap),
-                    top: self._optimiseGap(o.vgap + o.tgap),
-                    bottom: self._optimiseGap(o.vgap + o.bgap),
+                    left: this._optimiseGap(o.hgap + o.lgap),
+                    right: this._optimiseGap(o.hgap + o.rgap),
+                    top: this._optimiseGap(o.vgap + o.tgap),
+                    bottom: this._optimiseGap(o.vgap + o.bgap),
                     width: "auto",
-                    height: "auto"
+                    height: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.grid",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columns: list.length,
             rows: 1,
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("center布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
     }
-});
-BI.shortcut("bi.center", BI.CenterLayout);
+}
diff --git a/src/core/wrapper/layout/middle/middle.float.center.js b/src/core/wrapper/layout/middle/middle.float.center.js
index d1e2a4695..63b6f157d 100644
--- a/src/core/wrapper/layout/middle/middle.float.center.js
+++ b/src/core/wrapper/layout/middle/middle.float.center.js
@@ -1,71 +1,80 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 浮动布局实现的居中容器
- * @class BI.FloatCenterLayout
- * @extends BI.Layout
+ * @class FloatCenterLayout
+ * @extends Layout
  */
-BI.FloatCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatCenterLayout extends Layout {
+    static xtype = "bi.float_center";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-float-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FloatCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options, items = o.items;
-        var list = [], width = 100 / items.length;
-        BI.each(items, function (i) {
-            var widget = BI._lazyCreateWidget({
-                type: "bi.default"
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options, items = o.items;
+        const list = [], width = 100 / items.length;
+        each(items, i => {
+            const widget = _lazyCreateWidget({
+                type: "bi.default",
             });
-            widget.element.addClass("center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")).css({
-                width: width + "%",
-                height: "100%"
+            widget.element.addClass(`center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`).css({
+                width: `${width}%`,
+                height: "100%",
             });
             list.push({
-                el: widget
+                el: widget,
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: self._optimiseGap(o.hgap + o.lgap),
-                    right: self._optimiseGap(o.hgap + o.rgap),
-                    top: self._optimiseGap(o.vgap + o.tgap),
-                    bottom: self._optimiseGap(o.vgap + o.bgap),
+                    left: this._optimiseGap(o.hgap + o.lgap),
+                    right: this._optimiseGap(o.hgap + o.rgap),
+                    top: this._optimiseGap(o.vgap + o.tgap),
+                    bottom: this._optimiseGap(o.vgap + o.bgap),
                     width: "auto",
-                    height: "auto"
+                    height: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.left",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("floatcenter布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
     }
-});
-BI.shortcut("bi.float_center", BI.FloatCenterLayout);
+}
diff --git a/src/core/wrapper/layout/middle/middle.horizontal.js b/src/core/wrapper/layout/middle/middle.horizontal.js
index c42fde9c0..b6fff379c 100644
--- a/src/core/wrapper/layout/middle/middle.horizontal.js
+++ b/src/core/wrapper/layout/middle/middle.horizontal.js
@@ -1,70 +1,79 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板
- * @class BI.HorizontalCenterLayout
- * @extends BI.Layout
+ * @class HorizontalCenterLayout
+ * @extends Layout
  */
-BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HorizontalCenterLayout extends Layout {
+    static xtype = "bi.horizontal_center";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.HorizontalCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options, items = o.items;
-        var list = [];
-        BI.each(items, function (i) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options, items = o.items;
+        const list = [];
+        each(items, i => {
             list.push({
                 column: i,
                 row: 0,
-                el: BI._lazyCreateWidget({
+                el: _lazyCreateWidget({
                     type: "bi.default",
-                    cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")
-                })
+                    cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
+                }),
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: self._optimiseGap(o.hgap + o.lgap),
-                    right: self._optimiseGap(o.hgap + o.rgap),
-                    top: self._optimiseGap(o.vgap + o.tgap),
-                    bottom: self._optimiseGap(o.vgap + o.bgap),
-                    width: "auto"
+                    left: this._optimiseGap(o.hgap + o.lgap),
+                    right: this._optimiseGap(o.hgap + o.rgap),
+                    top: this._optimiseGap(o.vgap + o.tgap),
+                    bottom: this._optimiseGap(o.vgap + o.bgap),
+                    width: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.grid",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columns: list.length,
             rows: 1,
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("horizontal_center布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
     }
-});
-BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout);
+}
diff --git a/src/core/wrapper/layout/middle/middle.vertical.js b/src/core/wrapper/layout/middle/middle.vertical.js
index b835bc4f6..a203e205f 100644
--- a/src/core/wrapper/layout/middle/middle.vertical.js
+++ b/src/core/wrapper/layout/middle/middle.vertical.js
@@ -1,71 +1,79 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 垂直方向都居中容器, 非自适应，用于高度不固定的面板
- * @class BI.VerticalCenterLayout
- * @extends BI.Layout
+ * @class VerticalCenterLayout
+ * @extends Layout
  */
-BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VerticalCenterLayout extends Layout {
+    static xtype = "bi.vertical_center";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-v-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.VerticalCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options, items = o.items;
-        var list = [];
-        BI.each(items, function (i) {
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options, items = o.items;
+        const list = [];
+        each(items, i => {
             list.push({
                 column: 0,
                 row: i,
-                el: BI._lazyCreateWidget({
+                el: _lazyCreateWidget({
                     type: "bi.default",
-                    cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")
-                })
+                    cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
+                }),
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
                     left: self._optimiseGap(o.hgap + o.lgap),
                     right: self._optimiseGap(o.hgap + o.rgap),
                     top: self._optimiseGap(o.vgap + o.tgap),
                     bottom: self._optimiseGap(o.vgap + o.bgap),
-                    height: "auto"
+                    height: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.grid",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columns: 1,
             rows: list.length,
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("vertical_center布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
     }
-});
-BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout);
+}
diff --git a/src/core/wrapper/layout/responsive/index.js b/src/core/wrapper/layout/responsive/index.js
new file mode 100644
index 000000000..89f0bb09d
--- /dev/null
+++ b/src/core/wrapper/layout/responsive/index.js
@@ -0,0 +1,3 @@
+export { ResponsiveFlexHorizontalLayout } from "./responsive.flex.horizontal";
+export { ResponsiveFlexWrapperHorizontalLayout } from "./responsive.flex.wrapper.horizontal";
+export { ResponsiveInlineLayout } from "./responsive.inline";
diff --git a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
index 592d50641..7cfceede4 100644
--- a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
+++ b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
@@ -1,57 +1,59 @@
+import { shortcut } from "@/core/decorator";
+import { each } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Resizers } from "@/base";
+import { FlexHorizontalLayout } from "../flex";
+
 /**
  * 横向响应式布局
  * Created by GUY on 2016/12/2.
  *
- * @class BI.ResponsiveFlexHorizontalLayout
- * @extends BI.FlexHorizontalLayout
+ * @class ResponsiveFlexHorizontalLayout
+ * @extends FlexHorizontalLayout
  */
-BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, {
-    // props: function () {
-    //     return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
-    //         // extraCls: "bi-responsive-f-h"
-    //     });
-    // },
+@shortcut()
+export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout {
+    static xtype = "bi.responsive_flex_horizontal";
 
-    mounted: function () {
-        var self = this, o = this.options;
-        if (o.horizontalAlign !== BI.HorizontalAlign.Center){
+    mounted() {
+        const o = this.options;
+        if (o.horizontalAlign !== HorizontalAlign.Center) {
             return;
         }
-        var defaultResize = function () {
+        const defaultResize = () => {
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth <= 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                            self._handleReverseGap(child, o.items[i], i | 0);
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                            this._handleReverseGap(child, o.items[i], i | 0);
                         });
-                        self.element.css("flex-direction", "column");
+                        this.element.css("flex-direction", "column");
                     }
                 }
             }
-        }
-        var resize = function () {
+        };
+        const resize = () => {
             defaultResize();
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth > 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                        })
-                        self.resize();
-                        self.element.css("flex-direction", "row");
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                        });
+                        this.resize();
+                        this.element.css("flex-direction", "row");
                     }
                 }
             }
-        }
-        this.unResize = BI.Resizers.add(this.getName(), resize);
+        };
+        this.unResize = Resizers.add(this.getName(), resize);
         defaultResize();
-    },
+    }
 
-    destroyed: function () {
+    destroyed() {
         this.unResize?.();
     }
-});
-BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout);
+}
diff --git a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
index 5e8fcfd95..90677598a 100644
--- a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
@@ -1,59 +1,61 @@
+import { shortcut } from "@/core/decorator";
+import { each } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Resizers } from "@/base";
+import { FlexWrapperHorizontalLayout } from "../flex";
+
 /**
  * 横向响应式布局
  * Created by GUY on 2016/12/2.
  *
- * @class BI.ResponsiveFlexWrapperHorizontalLayout
- * @extends BI.FlexWrapperHorizontalLayout
+ * @class ResponsiveFlexWrapperHorizontalLayout
+ * @extends FlexWrapperHorizontalLayout
  */
-BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, {
-    // props: function () {
-    //     return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
-    //         extraCls: "bi-responsive-f-h"
-    //     });
-    // },
+@shortcut()
+export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout {
+    static xtype = "bi.responsive_flex_scrollable_horizontal";
 
-    mounted: function () {
-        var self = this, o = this.options;
-        if (o.horizontalAlign !== BI.HorizontalAlign.Center){
+    mounted() {
+        const o = this.options;
+        if (o.horizontalAlign !== HorizontalAlign.Center) {
             return;
         }
-        var defaultResize = function () {
+        const defaultResize = () => {
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth <= 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                            self._handleReverseGap(child, o.items[i], i | 0);
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                            this._handleReverseGap(child, o.items[i], i | 0);
                         });
-                        self.element.css("flex-direction", "column");
-                        self.$wrapper.element.css("flex-direction", "column");
+                        this.element.css("flex-direction", "column");
+                        this.$wrapper.element.css("flex-direction", "column");
                     }
                 }
             }
-        }
-        var resize = function () {
+        };
+        const resize = () => {
             defaultResize();
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth > 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                        })
-                        self.resize();
-                        self.element.css("flex-direction", "row");
-                        self.$wrapper.element.css("flex-direction", "row");
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                        });
+                        this.resize();
+                        this.element.css("flex-direction", "row");
+                        this.$wrapper.element.css("flex-direction", "row");
                     }
                 }
             }
-        }
-        this.unResize = BI.Resizers.add(this.getName(), resize);
+        };
+        this.unResize = Resizers.add(this.getName(), resize);
         defaultResize();
-    },
+    }
 
-    destroyed: function () {
+    destroyed() {
         this.unResize();
     }
-});
-BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout);
+}
diff --git a/src/core/wrapper/layout/responsive/responsive.inline..js b/src/core/wrapper/layout/responsive/responsive.inline..js
deleted file mode 100644
index 08f27fcfc..000000000
--- a/src/core/wrapper/layout/responsive/responsive.inline..js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 横向响应式布局
- * Created by GUY on 2016/12/2.
- *
- * @class BI.ResponsiveInlineLayout
- * @extends BI.InlineLayout
- */
-BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, {
-    mounted: function () {
-        var self = this, o = this.options;
-        if (o.horizontalAlign !== BI.HorizontalAlign.Center){
-            return;
-        }
-        var defaultResize = function () {
-            if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
-                    if (clientWidth <= 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                            self._handleReverseGap(child, o.items[i], i | 0);
-                            child.elemenet.css("display", "");
-                        });
-                    }
-                }
-            }
-        }
-        var resize = function () {
-            defaultResize();
-            if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
-                    if (clientWidth > 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                        })
-                        self.resize();
-                    }
-                }
-            }
-        }
-        this.unResize = BI.Resizers.add(this.getName(), resize);
-        defaultResize();
-    },
-
-    destroyed: function () {
-        this.unResize();
-    }
-});
-BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout);
diff --git a/src/core/wrapper/layout/responsive/responsive.inline.js b/src/core/wrapper/layout/responsive/responsive.inline.js
new file mode 100644
index 000000000..747a9d9cf
--- /dev/null
+++ b/src/core/wrapper/layout/responsive/responsive.inline.js
@@ -0,0 +1,58 @@
+import { shortcut } from "@/core/decorator";
+import { each } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Resizers } from "@/base";
+import { InlineLayout } from "../layout.inline";
+
+/**
+ * 横向响应式布局
+ * Created by GUY on 2016/12/2.
+ *
+ * @class ResponsiveInlineLayout
+ * @extends InlineLayout
+ */
+@shortcut()
+export class ResponsiveInlineLayout extends InlineLayout {
+    static xtype = "bi.responsive_inline";
+
+    mounted() {
+        const o = this.options;
+        if (o.horizontalAlign !== HorizontalAlign.Center) {
+            return;
+        }
+        const defaultResize = () => {
+            if (o.scrollable !== true && o.scrollx !== true) {
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
+                    if (clientWidth <= 768) {
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                            this._handleReverseGap(child, o.items[i], i | 0);
+                            child.element.css("display", "");
+                        });
+                    }
+                }
+            }
+        };
+        const resize = () => {
+            defaultResize();
+            if (o.scrollable !== true && o.scrollx !== true) {
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
+                    if (clientWidth > 768) {
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                        });
+                        this.resize();
+                    }
+                }
+            }
+        };
+        this.unResize = Resizers.add(this.getName(), resize);
+        defaultResize();
+    }
+
+    destroyed() {
+        this.unResize();
+    }
+}
diff --git a/src/core/wrapper/layout/sticky/index.js b/src/core/wrapper/layout/sticky/index.js
new file mode 100644
index 000000000..e4d9a91be
--- /dev/null
+++ b/src/core/wrapper/layout/sticky/index.js
@@ -0,0 +1,2 @@
+export { HorizontalStickyLayout } from "./sticky.horizontal";
+export { VerticalStickyLayout } from "./sticky.vertical";
diff --git a/src/core/wrapper/layout/sticky/sticky.horizontal.js b/src/core/wrapper/layout/sticky/sticky.horizontal.js
index d88f28b6d..d4b15cd66 100644
--- a/src/core/wrapper/layout/sticky/sticky.horizontal.js
+++ b/src/core/wrapper/layout/sticky/sticky.horizontal.js
@@ -1,29 +1,37 @@
+import { shortcut } from "@/core/decorator";
+import { extend, count, isNotNull } from "@/core/2.base";
+import { VerticalAlign } from "@/core/constant";
+import { FlexHorizontalLayout } from "../flex";
+
 /**
  * 横向黏性布局
  */
-BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
-    props: function () {
-        return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HorizontalStickyLayout extends FlexHorizontalLayout {
+    static xtype = "bi.horizontal_sticky";
+
+    props() {
+        return extend(super.props(...arguments), {
             extraCls: "bi-h-sticky",
             scrollx: true,
-            // horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch
+            // horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.HorizontalStickyLayout.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 !== "fill") {
-            var fillIndex;
-            BI.count(0, o.items.length, index => {
-                if (BI.isNotNull(fillIndex)) {
+            let fillIndex;
+            count(0, o.items.length, index => {
+                if (isNotNull(fillIndex)) {
                     return;
                 }
                 if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) {
@@ -41,15 +49,15 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
                 w.element.css({
                     position: "sticky",
                     zIndex: 1,
-                    right: 0
+                    right: 0,
                 });
             }
         } else {
             w.element.css({
-                overflow: ""
+                overflow: "",
             });
         }
+        
         return w;
     }
-});
-BI.shortcut("bi.horizontal_sticky", BI.HorizontalStickyLayout);
+}
diff --git a/src/core/wrapper/layout/sticky/sticky.vertical.js b/src/core/wrapper/layout/sticky/sticky.vertical.js
index 71dc3ed8c..7a05bb78b 100644
--- a/src/core/wrapper/layout/sticky/sticky.vertical.js
+++ b/src/core/wrapper/layout/sticky/sticky.vertical.js
@@ -1,29 +1,37 @@
+import { shortcut } from "@/core/decorator";
+import { extend, count, isNotNull } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { FlexVerticalLayout } from "../flex";
+
 /**
  * 纵向黏性布局
  */
-BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
-    props: function () {
-        return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VerticalStickyLayout extends FlexVerticalLayout {
+    static xtype = "bi.vertical_sticky";
+
+    props() {
+        return extend(super.props(...arguments), {
             extraCls: "bi-v-sticky",
             scrolly: true,
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            // verticalAlign: BI.VerticalAlign.Stretch
+            horizontalAlign: HorizontalAlign.Stretch,
+            // verticalAlign: VerticalAlign.Stretch
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.VerticalStickyLayout.superclass._addElement.apply(this, arguments);
-        var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        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 = null;
             }
         }
         if (rowSize !== "fill") {
-            var fillIndex;
-            BI.count(0, o.items.length, index => {
-                if (BI.isNotNull(fillIndex)) {
+            let fillIndex;
+            count(0, o.items.length, index => {
+                if (isNotNull(fillIndex)) {
                     return;
                 }
                 if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) {
@@ -41,15 +49,15 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
                 w.element.css({
                     position: "sticky",
                     zIndex: 1,
-                    bottom: 0
+                    bottom: 0,
                 });
             }
         } else {
             w.element.css({
-                overflow: ""
+                overflow: "",
             });
         }
+        
         return w;
     }
-});
-BI.shortcut("bi.vertical_sticky", BI.VerticalStickyLayout);
+}