diff --git a/src/core/index.js b/src/core/index.js
index eca5e3e99..c8ea3d91a 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -16,6 +16,7 @@ import * as constant from "./constant";
 import * as logic from "./logic";
 import { Element } from "./element";
 import * as utils from "./utils";
+import * as wrapper from "./wrapper";
 import * as platform from "./platform/web";
 
 export * from "./decorator";
@@ -32,6 +33,7 @@ export * from "./h";
 export * from "./constant";
 export * from "./logic";
 export * from "./utils";
+export * from "./wrapper";
 export * from "./platform/web";
 
 export {
@@ -62,5 +64,6 @@ Object.assign(BI, {
     useInWorker,
     ...h,
     ...utils,
+    ...wrapper,
     ...platform,
 });
diff --git a/src/core/wrapper/index.js b/src/core/wrapper/index.js
new file mode 100644
index 000000000..c32c3e3bf
--- /dev/null
+++ b/src/core/wrapper/index.js
@@ -0,0 +1,2 @@
+export { Layout } from "./layout";
+export * from "./layout/index";
diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js
index d2926385d..6649f55bb 100644
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@@ -1,15 +1,22 @@
+import { isNull, isFunction, each, stripEL, keys, isArray, contains, isKey, isOdd, isWidget, isNotNull, has } from "../2.base";
+import { Widget } from "../4.widget";
+import { _lazyCreateWidget, Providers } from "../5.inject";
+import { shortcut } from "../decorator";
+import { pixFormat, Events } from "../constant";
+
 /**
  * 布局容器类
- * @class BI.Layout
- * @extends BI.Widget
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Boolean} [options.scrollable=false] 子组件超出容器边界之后是否会出现滚动条
  * @cfg {Boolean} [options.scrollx=false] 子组件超出容器边界之后是否会出现横向滚动条
  * @cfg {Boolean} [options.scrolly=false] 子组件超出容器边界之后是否会出现纵向滚动条
  */
-BI.Layout = BI.inherit(BI.Widget, {
-    props: function () {
+@shortcut()
+export class Layout extends Widget {
+    static xtype = "bi.layout";
+
+    props() {
         return {
             scrollable: null, // true, false, null
             scrollx: false, // true, false
@@ -18,93 +25,97 @@ BI.Layout = BI.inherit(BI.Widget, {
             innerHgap: 0,
             innerVgap: 0,
         };
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
         this._init4Margin();
         this._init4Scroll();
-        if (BI.isFunction(o.columnSize)) {
-            var columnSizeFn = o.columnSize;
-            o.columnSize = this.__watch(columnSizeFn, function (context, newValue) {
+        if (isFunction(o.columnSize)) {
+            const columnSizeFn = o.columnSize;
+            o.columnSize = this.__watch(columnSizeFn, (context, newValue) => {
                 o.columnSize = newValue;
-                self.resize();
+                this.resize();
             });
         }
-        if (BI.isFunction(o.rowSize)) {
-            var rowSizeFn = o.rowSize;
-            o.rowSize = this.__watch(rowSizeFn, function (context, newValue) {
+        if (isFunction(o.rowSize)) {
+            const rowSizeFn = o.rowSize;
+            o.rowSize = this.__watch(rowSizeFn, (context, newValue) => {
                 o.rowSize = newValue;
-                self.resize();
+                this.resize();
             });
         }
-    },
+    }
 
-    _init4Margin: function () {
+    _init4Margin() {
         if (this.options.top) {
-            this.element.css("top", BI.pixFormat(this.options.top));
+            this.element.css("top", pixFormat(this.options.top));
         }
         if (this.options.left) {
-            this.element.css("left", BI.pixFormat(this.options.left));
+            this.element.css("left", pixFormat(this.options.left));
         }
         if (this.options.bottom) {
-            this.element.css("bottom", BI.pixFormat(this.options.bottom));
+            this.element.css("bottom", pixFormat(this.options.bottom));
         }
         if (this.options.right) {
-            this.element.css("right", BI.pixFormat(this.options.right));
+            this.element.css("right", pixFormat(this.options.right));
         }
-    },
+    }
 
-    _init4Scroll: function () {
+    _init4Scroll() {
         switch (this.options.scrollable) {
-            case true:
-            case "xy":
-                this.element.css("overflow", "auto");
-                return;
-            case false:
-                this.element.css("overflow", "hidden");
-                return;
-            case "x":
-                this.element.css({
-                    "overflow-x": "auto",
-                    "overflow-y": "hidden"
-                });
-                return;
-            case "y":
-                this.element.css({
-                    "overflow-x": "hidden",
-                    "overflow-y": "auto"
-                });
-                return;
-            default :
-                break;
+        case true:
+        case "xy":
+            this.element.css("overflow", "auto");
+            
+            return;
+        case false:
+            this.element.css("overflow", "hidden");
+            
+            return;
+        case "x":
+            this.element.css({
+                "overflow-x": "auto",
+                "overflow-y": "hidden",
+            });
+            
+            return;
+        case "y":
+            this.element.css({
+                "overflow-x": "hidden",
+                "overflow-y": "auto",
+            });
+            
+            return;
+        default :
+            break;
         }
         if (this.options.scrollx) {
             this.element.css({
                 "overflow-x": "auto",
-                "overflow-y": "hidden"
+                "overflow-y": "hidden",
             });
+            
             return;
         }
         if (this.options.scrolly) {
             this.element.css({
                 "overflow-x": "hidden",
-                "overflow-y": "auto"
+                "overflow-y": "auto",
             });
         }
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.element.append(frag);
-    },
-
-    _mountChildren: function () {
-        var self = this;
-        var frag = BI.Widget._renderEngine.createFragment();
-        var hasChild = false;
-        for (var key in this._children) {
-            var child = this._children[key];
-            if (child.element !== self.element) {
+    }
+
+    _mountChildren() {
+        const frag = Widget._renderEngine.createFragment();
+        let hasChild = false;
+        for (const key in this._children) {
+            const child = this._children[key];
+            if (child.element !== this.element) {
                 frag.appendChild(child.element[0]);
                 hasChild = true;
             }
@@ -112,24 +123,24 @@ BI.Layout = BI.inherit(BI.Widget, {
         if (hasChild === true) {
             this.appendFragment(frag);
         }
-    },
+    }
 
-    _getChildName: function (index) {
-        return "" + index;
-    },
+    _getChildName(index) {
+        return `${index}`;
+    }
 
-    _addElement: function (i, item, context, widget) {
-        var self = this, w;
+    _addElement(i, item, context, widget) {
+        let w;
         if (widget) {
             return widget;
         }
         if (!this.hasWidget(this._getChildName(i))) {
-            w = BI._lazyCreateWidget(item, context);
-            w.on(BI.Events.DESTROY, function () {
-                BI.each(self._children, function (name, child) {
+            w = _lazyCreateWidget(item, context);
+            w.on(Events.DESTROY, () => {
+                each(this._children, (name, child) => {
                     if (child === w) {
-                        delete self._children[name];
-                        self.removeItemAt(name | 0);
+                        delete this._children[name];
+                        this.removeItemAt(name | 0);
                     }
                 });
             });
@@ -137,73 +148,74 @@ BI.Layout = BI.inherit(BI.Widget, {
         } else {
             w = this.getWidgetByName(this._getChildName(i));
         }
+        
         return w;
-    },
+    }
 
-    _newElement: function (i, item, context) {
-        var self = this;
-        var w = BI._lazyCreateWidget(item, context);
-        w.on(BI.Events.DESTROY, function () {
-            BI.each(self._children, function (name, child) {
+    _newElement(i, item, context) {
+        const w = _lazyCreateWidget(item, context);
+        w.on(Events.DESTROY, () => {
+            each(this._children, (name, child) => {
                 if (child === w) {
-                    delete self._children[name];
-                    self.removeItemAt(name | 0);
+                    delete this._children[name];
+                    this.removeItemAt(name | 0);
                 }
             });
         });
+        
         return this._addElement(i, item, context, w);
-    },
+    }
 
-    _getOptions: function (item) {
-        if (item instanceof BI.Widget) {
+    _getOptions(item) {
+        if (item instanceof Widget) {
             item = item.options;
         }
-        item = BI.stripEL(item);
-        if (item instanceof BI.Widget) {
+        item = stripEL(item);
+        if (item instanceof Widget) {
             item = item.options;
         }
+        
         return item;
-    },
-
-    _compare: function (item1, item2) {
-        var self = this;
-        return eq(item1, item2);
+    }
 
+    _compare(item1, item2) {
         // 不比较函数
-        function eq (a, b, aStack, bStack) {
+        const eq = (a, b, aStack, bStack) => {
             if (a === b) {
                 return a !== 0 || 1 / a === 1 / b;
             }
-            if (a == null || b == null) {
+            if (isNull(a) || isNull(b)) {
                 return a === b;
             }
-            var className = Object.prototype.toString.call(a);
+            const className = Object.prototype.toString.call(a);
             switch (className) {
-                case "[object RegExp]":
-                case "[object String]":
-                    return "" + a === "" + b;
-                case "[object Number]":
-                    if (+a !== +a) {
-                        return +b !== +b;
-                    }
-                    return +a === 0 ? 1 / +a === 1 / b : +a === +b;
-                case "[object Date]":
-                case "[object Boolean]":
-                    return +a === +b;
+            case "[object RegExp]":
+            case "[object String]":
+                return `${a}` === `${b}`;
+            case "[object Number]":
+                if (+a !== +a) {
+                    return +b !== +b;
+                }
+                    
+                return +a === 0 ? 1 / +a === 1 / b : +a === +b;
+            case "[object Date]":
+            case "[object Boolean]":
+                return +a === +b;
+            default:
             }
 
-            var areArrays = className === "[object Array]";
+            const areArrays = className === "[object Array]";
             if (!areArrays) {
-                if (BI.isFunction(a) && BI.isFunction(b)) {
+                if (isFunction(a) && isFunction(b)) {
                     return true;
                 }
-                a = self._getOptions(a);
-                b = self._getOptions(b);
+                a = this._getOptions(a);
+                b = this._getOptions(b);
             }
 
             aStack = aStack || [];
             bStack = bStack || [];
-            var length = aStack.length;
+            let length = aStack.length;
             while (length--) {
                 if (aStack[length] === a) {
                     return bStack[length] === b;
@@ -224,115 +236,126 @@ BI.Layout = BI.inherit(BI.Widget, {
                     }
                 }
             } else {
-                var keys = BI._.keys(a), key;
-                length = keys.length;
-                if (BI._.keys(b).length !== length) {
+                const aKeys = keys(a);
+                let key;
+                length = aKeys.length;
+                if (keys(b).length !== length) {
                     return false;
                 }
                 while (length--) {
-                    key = keys[length];
-                    if (!(BI._.has(b, key) && eq(a[key], b[key], aStack, bStack))) {
+                    key = aKeys[length];
+                    if (!(has(b, key) && eq(a[key], b[key], aStack, bStack))) {
                         return false;
                     }
                 }
             }
             aStack.pop();
             bStack.pop();
+            
             return true;
-        }
-    },
+        };
+        
+        return eq(item1, item2);
+    }
 
-    _getWrapper: function () {
+    _getWrapper() {
         return this.element;
-    },
+    }
 
     // 不依赖于this.options.items进行更新
-    _updateItemAt: function (oldIndex, newIndex, item) {
-        var del = this._children[this._getChildName(oldIndex)];
-        var w = this._newElement(newIndex, item);
+    _updateItemAt(oldIndex, newIndex, item) {
+        const del = this._children[this._getChildName(oldIndex)];
+        const w = this._newElement(newIndex, item);
         // 需要有个地方临时存一下新建的组件，否则如果直接使用newIndex的话，newIndex位置的元素可能会被用到
-        this._children[this._getChildName(newIndex) + "-temp"] = w;
-        var nextSibling = del.element.next();
+        this._children[`${this._getChildName(newIndex)}-temp`] = w;
+        const nextSibling = del.element.next();
         if (nextSibling.length > 0) {
-            BI.Widget._renderEngine.createElement(nextSibling).before(w.element);
+            Widget._renderEngine.createElement(nextSibling).before(w.element);
         } else {
             w.element.appendTo(this._getWrapper());
         }
         del._destroy();
         w._mount();
+        
         return true;
-    },
+    }
 
-    _addItemAt: function (index, item) {
-        for (var i = this.options.items.length; i > index; i--) {
+    _addItemAt(index, item) {
+        for (let i = this.options.items.length; i > index; i--) {
             this._children[this._getChildName(i)] = this._children[this._getChildName(i - 1)];
         }
         delete this._children[this._getChildName(index)];
         this.options.items.splice(index, 0, item);
-    },
+    }
 
-    _removeItemAt: function (index) {
-        for (var i = index; i < this.options.items.length - 1; i++) {
+    _removeItemAt(index) {
+        for (let i = index; i < this.options.items.length - 1; i++) {
             this._children[this._getChildName(i)] = this._children[this._getChildName(i + 1)];
         }
         delete this._children[this._getChildName(this.options.items.length - 1)];
         this.options.items.splice(index, 1);
-    },
+    }
 
-    _clearGap: function (w) {
+    _clearGap(w) {
         w.element.css({
             "margin-top": "",
             "margin-bottom": "",
             "margin-left": "",
-            "margin-right": ""
+            "margin-right": "",
         });
-    },
+    }
 
-    _optimiseGap: function (gap) {
-        return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
-    },
+    _optimiseGap(gap) {
+        return (gap > 0 && gap < 1) ? `${(gap * 100).toFixed(1)}%` : pixFormat(gap);
+    }
 
-    _optimiseItemLgap: function (item) {
-        if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
+    _optimiseItemLgap(item) {
+        if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
             return ((!item.type && item.el) ? ((item._lgap || 0) + (item.lgap || 0)) : item._lgap) || 0;
         }
+        
         return (item._lgap || 0) + (item.lgap || 0);
-    },
-    _optimiseItemRgap: function (item) {
-        if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
+    }
+    _optimiseItemRgap(item) {
+        if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
             return ((!item.type && item.el) ? ((item._rgap || 0) + (item.rgap || 0)) : item._rgap) || 0;
         }
+        
         return (item._rgap || 0) + (item.rgap || 0);
-    },
-    _optimiseItemTgap: function (item) {
-        if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
+    }
+    _optimiseItemTgap(item) {
+        if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
             return ((!item.type && item.el) ? ((item._tgap || 0) + (item.tgap || 0)) : item._tgap) || 0;
         }
+        
         return (item._tgap || 0) + (item.tgap || 0);
-    },
-    _optimiseItemBgap: function (item) {
-        if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
+    }
+    _optimiseItemBgap(item) {
+        if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
             return ((!item.type && item.el) ? ((item._bgap || 0) + (item.bgap || 0)) : item._bgap) || 0;
         }
+        
         return (item._bgap || 0) + (item.bgap || 0);
-    },
-    _optimiseItemHgap: function (item) {
-        if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
+    }
+    _optimiseItemHgap(item) {
+        if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
             return ((!item.type && item.el) ? ((item._hgap || 0) + (item.hgap || 0)) : item._hgap) || 0;
         }
+        
         return (item._hgap || 0) + (item.hgap || 0);
-    },
-    _optimiseItemVgap: function (item) {
-        if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
+    }
+    _optimiseItemVgap(item) {
+        if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) {
             return ((!item.type && item.el) ? ((item._vgap || 0) + (item.vgap || 0)) : item._vgap) || 0;
         }
+        
         return (item._vgap || 0) + (item.vgap || 0);
-    },
+    }
 
-    _handleGap: function (w, item, hIndex, vIndex) {
-        var o = this.options;
-        var innerLgap, innerRgap, innerTgap, innerBgap;
-        if (BI.isNull(vIndex)) {
+    _handleGap(w, item, hIndex, vIndex) {
+        const o = this.options;
+        let innerLgap, innerRgap, innerTgap, innerBgap;
+        if (isNull(vIndex)) {
             innerTgap = innerBgap = o.innerVgap;
             innerLgap = hIndex === 0 ? o.innerHgap : 0;
             innerRgap = hIndex === o.items.length - 1 ? o.innerHgap : 0;
@@ -342,83 +365,83 @@ BI.Layout = BI.inherit(BI.Widget, {
             innerBgap = vIndex === o.items.length - 1 ? o.innerVgap : 0;
         }
         if (o.vgap + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
+            const top = ((isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-top": this._optimiseGap(top)
+                "margin-top": this._optimiseGap(top),
             });
         }
         if (o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
+            const left = ((isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-left": this._optimiseGap(left)
+                "margin-left": this._optimiseGap(left),
             });
         }
         if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
+            const right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-right": this._optimiseGap(right)
+                "margin-right": this._optimiseGap(right),
             });
         }
         if (o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var bottom = o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            const bottom = o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-bottom": this._optimiseGap(bottom)
+                "margin-bottom": this._optimiseGap(bottom),
             });
         }
-    },
+    }
 
     // 横向换纵向
-    _handleReverseGap: function (w, item, index) {
-        var o = this.options;
-        var innerLgap, innerRgap, innerTgap, innerBgap;
-        innerLgap = innerRgap = o.innerHgap;
-        innerTgap = index === 0 ? o.innerVgap : 0;
-        innerBgap = index === o.items.length - 1 ? o.innerVgap : 0;
+    _handleReverseGap(w, item, index) {
+        const o = this.options;
+        const innerLgap = o.innerHgap;
+        const innerRgap = o.innerHgap;
+        const innerTgap = index === 0 ? o.innerVgap : 0;
+        const innerBgap = index === o.items.length - 1 ? o.innerVgap : 0;
         if (o.vgap + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
+            const top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-top": this._optimiseGap(top)
+                "margin-top": this._optimiseGap(top),
             });
         }
         if (o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var left = o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
+            const left = o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-left": this._optimiseGap(left)
+                "margin-left": this._optimiseGap(left),
             });
         }
         if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
+            const right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-right": this._optimiseGap(right)
+                "margin-right": this._optimiseGap(right),
             });
         }
         // 这里的代码是关键
         if (o.vgap + o.hgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + (index === o.items.length - 1 ? o.bgap : 0) + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            const bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + (index === o.items.length - 1 ? o.bgap : 0) + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-bottom": this._optimiseGap(bottom)
+                "margin-bottom": this._optimiseGap(bottom),
             });
         }
-    },
+    }
 
     /**
      * 添加一个子组件到容器中
-     * @param {JSON/BI.Widget} item 子组件
+     * @param {JSON/Widget} item 子组件
      */
-    addItem: function (item) {
+    addItem(item) {
         return this.addItemAt(this.options.items.length, item);
-    },
+    }
 
-    prependItem: function (item) {
+    prependItem(item) {
         return this.addItemAt(0, item);
-    },
+    }
 
-    addItemAt: function (index, item) {
+    addItemAt(index, item) {
         if (index < 0 || index > this.options.items.length) {
             return;
         }
         this._addItemAt(index, item);
-        var w = this._addElement(index, item);
+        const w = this._addElement(index, item);
         // addItemAt 还是用之前的找上个兄弟节点向后插入的方式
         if (index > 0) {
             this._children[this._getChildName(index - 1)].element.after(w.element);
@@ -426,16 +449,17 @@ BI.Layout = BI.inherit(BI.Widget, {
             w.element.prependTo(this._getWrapper());
         }
         w._mount();
+        
         return w;
-    },
-
-    removeItemAt: function (indexes) {
-        indexes = BI.isArray(indexes) ? indexes : [indexes];
-        var deleted = [];
-        var newItems = [], newChildren = {};
-        for (var i = 0, len = this.options.items.length; i < len; i++) {
-            var child = this._children[this._getChildName(i)];
-            if (BI.contains(indexes, i)) {
+    }
+
+    removeItemAt(indexes) {
+        indexes = isArray(indexes) ? indexes : [indexes];
+        const deleted = [];
+        const newItems = [], newChildren = {};
+        for (let i = 0, len = this.options.items.length; i < len; i++) {
+            const child = this._children[this._getChildName(i)];
+            if (contains(indexes, i)) {
                 child && deleted.push(child);
             } else {
                 newChildren[this._getChildName(newItems.length)] = child;
@@ -444,45 +468,46 @@ BI.Layout = BI.inherit(BI.Widget, {
         }
         this.options.items = newItems;
         this._children = newChildren;
-        BI.each(deleted, function (i, c) {
+        each(deleted, (i, c) => {
             c._destroy();
         });
-    },
+    }
 
-    shouldUpdateItem: function (index, item) {
-        var child = this._children[this._getChildName(index)];
+    shouldUpdateItem(index, item) {
+        const child = this._children[this._getChildName(index)];
         if (!child || !child.shouldUpdate) {
             return null;
         }
+        
         return child.shouldUpdate(this._getOptions(item));
-    },
-
-    addItems: function (items, context) {
-        var self = this, o = this.options;
-        var fragment = BI.Widget._renderEngine.createFragment();
-        var added = [];
-        BI.each(items, function (i, item) {
-            var w = self._addElement(o.items.length, item, context);
-            self._children[self._getChildName(o.items.length)] = w;
+    }
+
+    addItems(items, context) {
+        const o = this.options;
+        const fragment = Widget._renderEngine.createFragment();
+        const added = [];
+        each(items, (i, item) => {
+            const w = this._addElement(o.items.length, item, context);
+            this._children[this._getChildName(o.items.length)] = w;
             o.items.push(item);
             added.push(w);
             fragment.appendChild(w.element[0]);
         });
         if (this._isMounted) {
             this._getWrapper().append(fragment);
-            BI.each(added, function (i, w) {
+            each(added, (i, w) => {
                 w._mount();
             });
         }
-    },
+    }
 
-    prependItems: function (items, context) {
+    prependItems(items, context) {
         items = items || [];
-        var fragment = BI.Widget._renderEngine.createFragment();
-        var added = [];
-        for (var i = items.length - 1; i >= 0; i--) {
+        const fragment = Widget._renderEngine.createFragment();
+        const added = [];
+        for (let i = items.length - 1; i >= 0; i--) {
             this._addItemAt(0, items[i]);
-            var w = this._addElement(0, items[i], context);
+            const w = this._addElement(0, items[i], context);
             this._children[this._getChildName(0)] = w;
             this.options.items.unshift(items[i]);
             added.push(w);
@@ -490,47 +515,48 @@ BI.Layout = BI.inherit(BI.Widget, {
         }
         if (this._isMounted) {
             this._getWrapper().prepend(fragment);
-            BI.each(added, function (i, w) {
+            each(added, (i, w) => {
                 w._mount();
             });
         }
-    },
+    }
 
-    getValue: function () {
-        var self = this, value = [], child;
-        BI.each(this.options.items, function (i) {
-            if (child = self._children[self._getChildName(i)]) {
-                var v = child.getValue();
-                v = BI.isArray(v) ? v : [v];
+    getValue() {
+        let value = [], child;
+        each(this.options.items, i => {
+            child = this._children[this._getChildName(i)];
+            if (child) {
+                let v = child.getValue();
+                v = isArray(v) ? v : [v];
                 value = value.concat(v);
             }
         });
+        
         return value;
-    },
+    }
 
-    setValue: function (v) {
-        var self = this, child;
-        BI.each(this.options.items, function (i) {
-            if (child = self._children[self._getChildName(i)]) {
-                child.setValue(v);
-            }
+    setValue(v) {
+        let child;
+        each(this.options.items, i => {
+            child = this._children[this._getChildName(i)];
+            child && child.setValue(v);
         });
-    },
+    }
 
-    setText: function (v) {
-        var self = this, child;
-        BI.each(this.options.items, function (i) {
-            if (child = self._children[self._getChildName(i)]) {
-                child.setText(v);
-            }
+    setText(v) {
+        let child;
+        each(this.options.items, i => {
+            child = this._children[this._getChildName(i)];
+            child && child.setText(v);
         });
-    },
+    }
 
-    patchItem: function (oldVnode, vnode, oldIndex, newIndex) {
-        var shouldUpdate = this.shouldUpdateItem(oldIndex, vnode);
-        var child = this._children[this._getChildName(oldIndex)];
+    patchItem(oldVnode, vnode, oldIndex, newIndex) {
+        const shouldUpdate = this.shouldUpdateItem(oldIndex, vnode);
+        const child = this._children[this._getChildName(oldIndex)];
         if (shouldUpdate) {
-            this._children[this._getChildName(newIndex) + "-temp"] = child;
+            this._children[`${this._getChildName(newIndex)}-temp`] = child;
+            
             return child._update(this._getOptions(vnode), shouldUpdate);
         }
         if (shouldUpdate === null && !this._compare(oldVnode, vnode)) {
@@ -539,69 +565,68 @@ BI.Layout = BI.inherit(BI.Widget, {
             // }
             return this._updateItemAt(oldIndex, newIndex, vnode);
         }
-    },
-
-    updateChildren: function (oldCh, newCh, context) {
-        var self = this;
-        var oldStartIdx = 0, newStartIdx = 0;
-        var oldEndIdx = oldCh.length - 1;
-        var oldStartVnode = oldCh[0];
-        var oldEndVnode = oldCh[oldEndIdx];
-        var newEndIdx = newCh.length - 1;
-        var newStartVnode = newCh[0];
-        var newEndVnode = newCh[newEndIdx];
-        var before;
-        var updated;
-        var children = {};
-        BI.each(oldCh, function (i, child) {
-            child = self._getOptions(child);
-            var key = child.key == null ? i : child.key;
-            if (BI.isKey(key)) {
-                children[key] = self._children[self._getChildName(i)];
+    }
+
+    updateChildren(oldCh, newCh, context) {
+        let oldStartIdx = 0, newStartIdx = 0;
+        let oldEndIdx = oldCh.length - 1;
+        let oldStartVnode = oldCh[0];
+        let oldEndVnode = oldCh[oldEndIdx];
+        let newEndIdx = newCh.length - 1;
+        let newStartVnode = newCh[0];
+        let newEndVnode = newCh[newEndIdx];
+        let before;
+        let updated;
+        const children = {};
+        each(oldCh, (i, child) => {
+            child = this._getOptions(child);
+            const key = isNull(child.key) ? i : child.key;
+            if (isKey(key)) {
+                children[key] = this._children[this._getChildName(i)];
             }
         });
 
         while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-            if (BI.isNull(oldStartVnode)) {
+            if (isNull(oldStartVnode)) {
                 oldStartVnode = oldCh[++oldStartIdx];
-            } else if (BI.isNull(oldEndVnode)) {
+            } else if (isNull(oldEndVnode)) {
                 oldEndVnode = oldCh[--oldEndIdx];
             } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) {
-                var willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx);
+                const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx);
                 updated = willUpdate || updated;
-                children[oldStartVnode.key == null ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : this._children[this._getChildName(oldStartIdx)];
+                children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)];
                 oldStartVnode = oldCh[++oldStartIdx];
                 newStartVnode = newCh[++newStartIdx];
             } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) {
-                var willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx);
+                const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx);
                 updated = willUpdate || updated;
-                children[oldEndVnode.key == null ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[this._getChildName(newEndIdx) + "-temp"] : this._children[this._getChildName(oldEndIdx)];
+                children[isNull(oldEndVnode.key) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)];
                 oldEndVnode = oldCh[--oldEndIdx];
                 newEndVnode = newCh[--newEndIdx];
             } else if (sameVnode(oldStartVnode, newEndVnode)) {
-                var willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx);
+                const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx);
                 updated = willUpdate || updated;
-                children[oldStartVnode.key == null ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : this._children[this._getChildName(oldStartIdx)];
+                children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)];
                 insertBefore(oldStartVnode, oldEndVnode, true);
                 oldStartVnode = oldCh[++oldStartIdx];
                 newEndVnode = newCh[--newEndIdx];
             } else if (sameVnode(oldEndVnode, newStartVnode)) {
-                var willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx);
+                const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx);
                 updated = willUpdate || updated;
-                children[oldEndVnode.key == null ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[this._getChildName(newEndIdx) + "-temp"] : this._children[this._getChildName(oldEndIdx)];
+                children[isNull(oldEndVnode) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)];
                 insertBefore(oldEndVnode, oldStartVnode);
                 oldEndVnode = oldCh[--oldEndIdx];
                 newStartVnode = newCh[++newStartIdx];
             } else {
-                var sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx);
-                if (BI.isNull(sameOldVnode[0])) {  //  不存在就把新的放到左边
-                    var node = addNode(newStartVnode, newStartIdx, context);
+                const sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx);
+                if (isNull(sameOldVnode[0])) { //  不存在就把新的放到左边
+                    const node = addNode(newStartVnode, newStartIdx, context);
                     insertBefore(node, oldStartVnode);
-                } else {   //  如果新节点在旧节点区间中存在就复用一下
-                    var sameOldIndex = sameOldVnode[1];
-                    var willUpdate = self.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx);
+                } else { //  如果新节点在旧节点区间中存在就复用一下
+                    const sameOldIndex = sameOldVnode[1];
+                    const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx);
                     updated = willUpdate || updated;
-                    children[sameOldVnode[0].key == null ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : self._children[self._getChildName(sameOldIndex)];
+                    children[isNull(sameOldVnode[0].key) ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(sameOldIndex)];
                     oldCh[sameOldIndex] = undefined;
                     insertBefore(sameOldVnode[0], oldStartVnode);
                 }
@@ -609,63 +634,65 @@ BI.Layout = BI.inherit(BI.Widget, {
             }
         }
         if (oldStartIdx > oldEndIdx) {
-            before = BI.isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1];
+            before = isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1];
             addVnodes(before, newCh, newStartIdx, newEndIdx, context);
         } else if (newStartIdx > newEndIdx) {
             removeVnodes(oldCh, oldStartIdx, oldEndIdx);
         }
 
         this._children = {};
-        BI.each(newCh, function (i, child) {
-            var node = self._getOptions(child);
-            var key = node.key == null ? i : node.key;
-            children[key]._setParent && children[key]._setParent(self);
+        each(newCh, (i, child) => {
+            const node = this._getOptions(child);
+            const key = isNull(node.key) ? i : node.key;
+            children[key]._setParent && children[key]._setParent(this);
             children[key]._mount();
-            self._children[self._getChildName(i)] = children[key];
+            this._children[this._getChildName(i)] = children[key];
         });
 
-        function sameVnode (vnode1, vnode2, oldIndex, newIndex) {
-            vnode1 = self._getOptions(vnode1);
-            vnode2 = self._getOptions(vnode2);
-            if (BI.isKey(vnode1.key)) {
+        const sameVnode = (vnode1, vnode2, oldIndex, newIndex) => {
+            vnode1 = this._getOptions(vnode1);
+            vnode2 = this._getOptions(vnode2);
+            if (isKey(vnode1.key)) {
                 return vnode1.key === vnode2.key;
             }
             if (oldIndex >= 0) {
                 return oldIndex === newIndex;
             }
-        }
+        };
 
-        function addNode (vnode, index, context) {
-            var opt = self._getOptions(vnode);
-            var key = opt.key == null ? index : opt.key;
-            return children[key] = self._newElement(index, vnode, context);
-        }
+        const addNode = (vnode, index, context) => {
+            const opt = this._getOptions(vnode);
+            const key = isNull(opt.key) ? index : opt.key;
+            children[key] = this._newElement(index, vnode, context);
+
+            return children[key];
+        };
 
-        function addVnodes (before, vnodes, startIdx, endIdx, context) {
+        const addVnodes = (before, vnodes, startIdx, endIdx, context) => {
             for (; startIdx <= endIdx; ++startIdx) {
-                var node = addNode(vnodes[startIdx], startIdx, context);
+                const node = addNode(vnodes[startIdx], startIdx, context);
                 insertBefore(node, before, false, startIdx);
             }
-        }
+        };
 
-        function removeVnodes (vnodes, startIdx, endIdx) {
+        const removeVnodes = (vnodes, startIdx, endIdx) => {
             for (; startIdx <= endIdx; ++startIdx) {
-                var ch = vnodes[startIdx];
-                if (BI.isNotNull(ch)) {
-                    var node = self._getOptions(ch);
-                    var key = node.key == null ? startIdx : node.key;
+                const ch = vnodes[startIdx];
+                if (isNotNull(ch)) {
+                    const node = this._getOptions(ch);
+                    const key = isNull(node.key) ? startIdx : node.key;
                     children[key]._destroy();
                 }
             }
-        }
+        };
 
-        function insertBefore (insert, before, isNext, index) {
-            insert = self._getOptions(insert);
-            before = before && self._getOptions(before);
-            var insertKey = BI.isKey(insert.key) ? insert.key : index;
+        const insertBefore = (insert, before, isNext, index) => {
+            insert = this._getOptions(insert);
+            before = before && this._getOptions(before);
+            const insertKey = isKey(insert.key) ? insert.key : index;
             if (before && children[before.key]) {
-                var beforeKey = BI.isKey(before.key) ? before.key : index;
-                var next;
+                const beforeKey = isKey(before.key) ? before.key : index;
+                let next;
                 if (isNext) {
                     next = children[beforeKey].element.next();
                 } else {
@@ -674,30 +701,31 @@ BI.Layout = BI.inherit(BI.Widget, {
                 if (next.length > 0) {
                     next.before(children[insertKey].element);
                 } else {
-                    self._getWrapper().append(children[insertKey].element);
+                    this._getWrapper().append(children[insertKey].element);
                 }
             } else {
-                self._getWrapper().append(children[insertKey].element);
+                this._getWrapper().append(children[insertKey].element);
             }
-        }
+        };
 
-        function findOldVnode (vnodes, vNode, beginIdx, endIdx) {
-            var i, found, findIndex;
+        const findOldVnode = (vnodes, vNode, beginIdx, endIdx) => {
+            let i, found, findIndex;
             for (i = beginIdx; i <= endIdx; ++i) {
                 if (vnodes[i] && sameVnode(vnodes[i], vNode)) {
                     found = vnodes[i];
                     findIndex = i;
                 }
             }
+            
             return [found, findIndex];
-        }
+        };
 
         return updated;
-    },
+    }
 
-    forceUpdate: function (opt) {
+    forceUpdate(opt) {
         if (this._isMounted) {
-            BI.each(this._children, function (i, c) {
+            each(this._children, (i, c) => {
                 c.destroy();
             });
             this._children = {};
@@ -706,29 +734,27 @@ BI.Layout = BI.inherit(BI.Widget, {
         this.options.items = opt.items;
         this.stroke(opt.items);
         this._mount();
-    },
+    }
 
-    update: function (opt) {
-        var o = this.options;
-        var items = opt.items || [];
-        var context = opt.context;
-        var oldItems = o.items;
+    update(opt) {
+        const o = this.options;
+        const items = opt.items || [];
+        const context = opt.context;
+        const oldItems = o.items;
         this.options.items = items;
+        
         return this.updateChildren(oldItems, items, context);
-    },
+    }
 
-    stroke: function (items, options) {
+    stroke(items, options) {
         options = options || {};
-        var self = this;
-        BI.each(items, function (i, item) {
-            if (item) {
-                self._addElement(i, item, options.context);
-            }
+        each(items, (i, item) => {
+            item && this._addElement(i, item, options.context);
         });
-    },
+    }
 
-    getRowColumnCls: function (rowIndex, colIndex, lastRowIndex, lastColIndex) {
-        var cls = "";
+    getRowColumnCls(rowIndex, colIndex, lastRowIndex, lastColIndex) {
+        let cls = "";
         if (rowIndex === 0) {
             cls += " first-row";
         } else if (rowIndex === lastRowIndex) {
@@ -739,17 +765,17 @@ BI.Layout = BI.inherit(BI.Widget, {
         } else if (colIndex === lastColIndex) {
             cls += " last-col";
         }
-        BI.isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row");
-        BI.isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col");
+        isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row");
+        isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col");
         cls += " center-element";
 
         return cls;
-    },
+    }
 
-    removeWidget: function (nameOrWidget) {
-        var removeIndex, self = this;
-        if (BI.isWidget(nameOrWidget)) {
-            BI.each(this._children, function (name, child) {
+    removeWidget(nameOrWidget) {
+        let removeIndex;
+        if (isWidget(nameOrWidget)) {
+            each(this._children, (name, child) => {
                 if (child === nameOrWidget) {
                     removeIndex = name;
                 }
@@ -760,34 +786,34 @@ BI.Layout = BI.inherit(BI.Widget, {
         if (removeIndex) {
             this._removeItemAt(removeIndex | 0);
         }
-    },
+    }
 
-    empty: function () {
-        BI.Layout.superclass.empty.apply(this, arguments);
+    empty() {
+        super.empty(...arguments);
         this.options.items = [];
-    },
+    }
 
-    destroy: function () {
-        BI.Layout.superclass.destroy.apply(this, arguments);
+    destroy() {
+        super.destroy(...arguments);
         this.options.items = [];
-    },
+    }
 
-    populate: function (items, options) {
+    populate(items, options) {
         items = items || [];
         options = options || {};
         if (this._isMounted) {
             this.update({
-                items: items,
-                context: options.context
+                items,
+                context: options.context,
             });
+            
             return;
         }
         this.options.items = items;
         this.stroke(items, options);
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.stroke(this.options.items);
     }
-});
-BI.shortcut("bi.layout", BI.Layout);
+}
diff --git a/src/core/wrapper/layout/adapt/absolute.center.js b/src/core/wrapper/layout/adapt/absolute.center.js
index 14a122f00..126a9ec23 100644
--- a/src/core/wrapper/layout/adapt/absolute.center.js
+++ b/src/core/wrapper/layout/adapt/absolute.center.js
@@ -1,47 +1,54 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isFunction } from "../../../2.base";
+
 /**
  * absolute实现的居中布局
- * @class BI.AbsoluteCenterLayout
- * @extends BI.Layout
+ * @class AbsoluteCenterLayout
+ * @extends Layout
  */
-BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteCenterLayout extends Layout {
+    static xtype ="bi.absolute_center_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-c-a",
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
         w.element.css({
             position: "absolute",
             left: this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
             right: this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
             top: this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
             bottom: this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
-            margin: "auto"
+            margin: "auto",
         });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.AbsoluteCenterLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/absolute.horizontal.js b/src/core/wrapper/layout/adapt/absolute.horizontal.js
index 81bd4d05c..cedcfa334 100644
--- a/src/core/wrapper/layout/adapt/absolute.horizontal.js
+++ b/src/core/wrapper/layout/adapt/absolute.horizontal.js
@@ -1,26 +1,35 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign } from "../../../constant";
+
 /**
- * absolute实现的居中布局
- * @class BI.AbsoluteHorizontalLayout
- * @extends BI.Layout
+ * absolute实现的水平布局
+ * @class AbsoluteHorizontalLayout
+ * @extends Layout
  */
-BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteHorizontalLayout extends Layout {
+    static xtype = "bi.absolute_horizontal_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-h-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
+            horizontalAlign: HorizontalAlign.Center,
             rowSize: [],
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.AbsoluteHorizontalLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.vtape",
             horizontalAlign: o.horizontalAlign,
@@ -29,8 +38,8 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -41,14 +50,13 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
index 25d5aab94..c8e2bc533 100644
--- a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
@@ -1,8 +1,16 @@
-BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isArray, each, map, stripEL } from "../../../2.base";
+import { VerticalAlign } from "../../../constant";
+
+@shortcut()
+export class AbsoluteLeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_left_right_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-lr-v-a",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: {},
             llgap: 0,
             lrgap: 0,
@@ -15,32 +23,34 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             items: this._formatItems(o.items),
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var self = this, o = this.options;
-        var left, right;
-        if (BI.isArray(items)) {
-            BI.each(items, function (i, item) {
+    _formatItems(items) {
+        const o = this.options;
+        let left, right;
+        if (isArray(items)) {
+            each(items, (i, item) => {
                 if (item.left) {
                     left = item.left;
                 }
@@ -49,85 +59,92 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 }
             });
         }
-        var leftItems = left || items.left || [];
-        var rightItems = right || items.right || [];
-        leftItems = BI.map(leftItems, function (i, item) {
-            var json = {
-                el: BI.stripEL(item),
-                width: item.width
+        let leftItems = left || items.left || [];
+        let rightItems = right || items.right || [];
+        leftItems = map(leftItems, (i, item) => {
+            const json = {
+                el: stripEL(item),
+                width: item.width,
             };
-            if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
+            if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             }
-            if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
+            if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             }
+            
             return json;
         });
-        rightItems = BI.map(rightItems, function (i, item) {
-            var json = {
-                el: BI.stripEL(item),
-                width: item.width
+        rightItems = map(rightItems, (i, item) => {
+            const json = {
+                el: stripEL(item),
+                width: item.width,
             };
-            if (o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.tgap = o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
+            if (o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.tgap = o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             }
-            if (o.rhgap + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
+            if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
+            if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.rvgap + o.rbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.bgap = o.rvgap + o.rbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
+            if (o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.bgap = o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             }
+            
             return json;
         });
+        
         return leftItems.concat({}, rightItems);
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.absolute_left_right_vertical_adapt", BI.AbsoluteLeftRightVerticalAdaptLayout);
+}
+
+@shortcut()
+export class AbsoluteRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_right_vertical_adapt";
 
-BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props () {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-r-v-a",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: [],
             lgap: 0,
             rgap: 0,
             hgap: 0,
             tgap: 0,
             bgap: 0,
-            vgap: 0
+            vgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.AbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render () {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             items: [{}].concat(o.items),
@@ -139,21 +156,20 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    resize: function () {
+    resize () {
         this.layout.stroke([{}].concat(this.options.items));
-    },
+    }
 
-    addItem: function () {
+    addItem () {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate (items) {
         this.layout.populate([{}].concat(items));
     }
-});
-BI.shortcut("bi.absolute_right_vertical_adapt", BI.AbsoluteRightVerticalAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/absolute.vertical.js b/src/core/wrapper/layout/adapt/absolute.vertical.js
index 94a6e39fe..ea3f750a2 100644
--- a/src/core/wrapper/layout/adapt/absolute.vertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.vertical.js
@@ -1,26 +1,35 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { VerticalAlign } from "../../../constant";
+
 /**
  * absolute实现的居中布局
- * @class BI.AbsoluteVerticalLayout
- * @extends BI.Layout
+ * @class AbsoluteVerticalLayout
+ * @extends Layout
  */
-BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteVerticalLayout extends Layout {
+    static xtype = "bi.absolute_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-v-a",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.AbsoluteVerticalLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
             verticalAlign: o.verticalAlign,
@@ -29,8 +38,8 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -41,14 +50,13 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/adapt.center.js b/src/core/wrapper/layout/adapt/adapt.center.js
index fb088c5a9..446633caf 100644
--- a/src/core/wrapper/layout/adapt/adapt.center.js
+++ b/src/core/wrapper/layout/adapt/adapt.center.js
@@ -1,13 +1,21 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 自适应水平和垂直方向都居中容器
- * @class BI.CenterAdaptLayout
- * @extends BI.Layout
+ * @class CenterAdaptLayout
+ * @extends Layout
  */
-BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class CenterAdaptLayout extends Layout {
+    static xtype = "bi.center_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-c-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
+            horizontalAlign: HorizontalAlign.Center,
             columnSize: [],
             scrollx: false,
             hgap: 0,
@@ -15,23 +23,25 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.horizontal",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             horizontalAlign: o.horizontalAlign,
             columnSize: o.columnSize,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
             items: o.items,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -42,14 +52,13 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/adapt.horizontal.js b/src/core/wrapper/layout/adapt/adapt.horizontal.js
index 4d6fbae2a..4e44c6c19 100644
--- a/src/core/wrapper/layout/adapt/adapt.horizontal.js
+++ b/src/core/wrapper/layout/adapt/adapt.horizontal.js
@@ -1,8 +1,9 @@
+import { shortcut } from "../../../decorator";
+
 /**
  * 水平方向居中容器
- * @class BI.HorizontalAdaptLayout
- * @extends BI.Layout
  */
-BI.HorizontalAdaptLayout = function () {
-};
-BI.shortcut("bi.horizontal_adapt", BI.HorizontalAdaptLayout);
+@shortcut()
+export class HorizontalAdaptLayout {
+    static xtype = "bi.horizontal_adapt";
+}
diff --git a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
index cafc1dafb..5fd5e9a65 100644
--- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
@@ -1,15 +1,23 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isArray, each } from "../../../2.base";
+import { HorizontalAlign } from "../../../constant";
+
 /**
  * 左右分离，垂直方向居中容器
  *          items:{
                 left: [{el:{type:"bi.button"}}],
                 right:[{el:{type:"bi.button"}}]
             }
- * @class BI.LeftRightVerticalAdaptLayout
- * @extends BI.Layout
+ * @class LeftRightVerticalAdaptLayout
+ * @extends Layout
  */
-BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class LeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.left_right_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-lr-v-a",
             items: {},
             llgap: 0,
@@ -23,14 +31,15 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.LeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var leftRight = this._getLeftRight(o.items);
-        var layoutArray = [];
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        const leftRight = this._getLeftRight(o.items);
+        const layoutArray = [];
         if (leftRight.left || "left" in o.items) {
             layoutArray.push({
                 type: "bi.left",
@@ -39,8 +48,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 items: [{
                     el: {
                         type: "bi.vertical_adapt",
-                        ref: function (_ref) {
-                            self.left = _ref;
+                        ref: _ref => {
+                            this.left = _ref;
                         },
                         height: "100%",
                         items: leftRight.left || o.items.left,
@@ -49,9 +58,9 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                         rgap: o.lrgap,
                         tgap: o.ltgap,
                         bgap: o.lbgap,
-                        vgap: o.lvgap
-                    }
-                }]
+                        vgap: o.lvgap,
+                    },
+                }],
             });
         }
         if (leftRight.right || "right" in o.items) {
@@ -62,8 +71,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 items: [{
                     el: {
                         type: "bi.vertical_adapt",
-                        ref: function (_ref) {
-                            self.right = _ref;
+                        ref: _ref => {
+                            this.right = _ref;
                         },
                         height: "100%",
                         items: leftRight.right || o.items.right,
@@ -72,18 +81,19 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                         rgap: o.rrgap,
                         tgap: o.rtgap,
                         bgap: o.rbgap,
-                        vgap: o.rvgap
-                    }
-                }]
+                        vgap: o.rvgap,
+                    },
+                }],
             });
         }
+        
         return layoutArray;
-    },
+    }
 
-    _getLeftRight: function (items) {
-        var left, right;
-        if (BI.isArray(items)) {
-            BI.each(items, function (i, item) {
+    _getLeftRight(items) {
+        let left, right;
+        if (isArray(items)) {
+            each(items, (i, item) => {
                 if (item.left) {
                     left = item.left;
                 }
@@ -92,35 +102,37 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 }
             });
         }
+        
         return {
-            left: left,
-            right: right
+            left,
+            right,
         };
-    },
+    }
 
-    resize: function () {
-        var leftRight = this._getLeftRight(this.options.items);
+    resize() {
+        const leftRight = this._getLeftRight(this.options.items);
         this.left.stroke(leftRight.left || this.options.items.left);
         this.right.stroke(leftRight.right || this.options.items.right);
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        var leftRight = this._getLeftRight(items);
+    populate(items) {
+        const leftRight = this._getLeftRight(items);
         this.left.populate(leftRight.left || items.left);
         this.right.populate(leftRight.right || items.right);
     }
-});
-BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout);
+}
 
+@shortcut()
+export class LeftVerticalAdaptLayout extends Layout {
+    static xtype = "bi.left_vertical_adapt";
 
-BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-l-v-a",
             items: [],
             columnSize: [],
@@ -129,16 +141,18 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
             hgap: 0,
             tgap: 0,
             bgap: 0,
-            vgap: 0
+            vgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.LeftVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.vertical_adapt",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             columnSize: o.columnSize,
@@ -152,28 +166,30 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
     }
-});
-BI.shortcut("bi.left_vertical_adapt", BI.LeftVerticalAdaptLayout);
+}
 
-BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class RightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.right_vertical_adapt";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-r-v-a",
             items: [],
             columnSize: [],
@@ -182,18 +198,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             hgap: 0,
             tgap: 0,
             bgap: 0,
-            vgap: 0
+            vgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.vertical_adapt",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
-            horizontalAlign: BI.HorizontalAlign.Right,
+            horizontalAlign: HorizontalAlign.Right,
             items: o.items,
             columnSize: o.columnSize,
             hgap: o.hgap,
@@ -206,21 +224,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate(items);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js
index 5691840af..4526edde6 100644
--- a/src/core/wrapper/layout/adapt/adapt.table.js
+++ b/src/core/wrapper/layout/adapt/adapt.table.js
@@ -1,78 +1,91 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isFunction, some, isNull } from "../../../2.base";
+import { Widget } from "../../../4.widget";
+import { _lazyCreateWidget } from "../../../5.inject";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 使用display:table和display:table-cell实现的horizontal布局
- * @class BI.TableAdaptLayout
- * @extends BI.Layout
+ * @class TableAdaptLayout
+ * @extends Layout
  */
-BI.TableAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class TableAdaptLayout extends Layout {
+    static xtype = "bi.table_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-t-a",
             columnSize: [],
-            verticalAlign: BI.VerticalAlign.Top,
-            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.TableAdaptLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.$table = BI.Widget._renderEngine.createElement("<div>").css({
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.$table = Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
-            width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto",
-            height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
-            "white-space": "nowrap"
+            width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto",
+            height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto",
+            "white-space": "nowrap",
         });
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _hasFill: function () {
-        var o = this.options;
+    _hasFill() {
+        const o = this.options;
         if (o.columnSize.length > 0) {
             return o.columnSize.indexOf("fill") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.width === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var td, width = "";
-        var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+    _addElement(i, item) {
+        const o = this.options;
+        let td, width = "";
+        let w;
+        const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
         if (columnSize > 0) {
             width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
         }
-        if ((BI.isNull(columnSize) || columnSize === "") && this._hasFill()) {
+        if ((isNull(columnSize) || columnSize === "") && this._hasFill()) {
             width = 2;
         }
         if (!this.hasWidget(this._getChildName(i))) {
-            var w = BI._lazyCreateWidget(item);
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            td = BI._lazyCreateWidget({
+            w = _lazyCreateWidget(item);
+            w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" });
+            td = _lazyCreateWidget({
                 type: "bi.default",
-                width: width,
-                items: [w]
+                width,
+                items: [w],
             });
             this.addWidget(this._getChildName(i), td);
         } else {
             td = this.getWidgetByName(this._getChildName(i));
             td.element.width(width);
         }
-        if (o.verticalAlign === BI.VerticalAlign.Stretch) {
-            var top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
+        if (o.verticalAlign === VerticalAlign.Stretch) {
+            const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
                 bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
-            w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
+            w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`);
         }
         // 对于表现为td的元素设置最大宽度，有几点需要注意
         // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
@@ -81,7 +94,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         if (columnSize > 0) {
             td.element.css({
                 "max-width": width,
-                "min-width": width
+                "min-width": width,
             });
         }
         if (i === 0) {
@@ -91,20 +104,20 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
             position: "relative",
             display: "table-cell",
             "vertical-align": o.verticalAlign,
-            height: "100%"
+            height: "100%",
         });
         this._handleGap(w, item, i);
+        
         return td;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$table.append(frag);
         this.element.append(this.$table);
-    },
+    }
 
-    populate: function (items) {
-        BI.TableAdaptLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.table_adapt", BI.TableAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/adapt.vertical.js b/src/core/wrapper/layout/adapt/adapt.vertical.js
index 31c227595..0a0f6c012 100644
--- a/src/core/wrapper/layout/adapt/adapt.vertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.vertical.js
@@ -1,13 +1,20 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 垂直方向居中容器
- * @class BI.VerticalAdaptLayout
- * @extends BI.Layout
+ * @class VerticalAdaptLayout
+ * @extends Layout
  */
-BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: {
+@shortcut()
+export class VerticalAdaptLayout extends Layout {
+    static xtype = "bi.vertical_adapt";
+
+    props = {
         baseCls: "bi-v-a",
-        horizontalAlign: BI.HorizontalAlign.Left,
-        verticalAlign: BI.VerticalAlign.Middle,
+        horizontalAlign: HorizontalAlign.Left,
+        verticalAlign: VerticalAlign.Middle,
         columnSize: [],
         scrollx: false,
         hgap: 0,
@@ -15,12 +22,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
         lgap: 0,
         rgap: 0,
         tgap: 0,
-        bgap: 0
-    },
+        bgap: 0,
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.horizontal",
             horizontalAlign: o.horizontalAlign,
@@ -30,8 +38,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: o.hgap,
             vgap: o.vgap,
@@ -42,14 +50,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js
index ed0f5e29c..f55acaeea 100644
--- a/src/core/wrapper/layout/adapt/auto.horizontal.js
+++ b/src/core/wrapper/layout/adapt/auto.horizontal.js
@@ -1,44 +1,50 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend, isFunction } from "../../../2.base";
+
 /**
  * 水平方向居中自适应容器
- * @class BI.HorizontalAutoLayout
- * @extends BI.Layout
+ * @class HorizontalAutoLayout
+ * @extends Layout
  */
-BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.HorizontalAutoLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HorizontalAutoLayout extends Layout {
+    static xtype = "bi.horizontal_auto";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-o",
             hgap: 0,
             lgap: 0,
             rgap: 0,
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.HorizontalAutoLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.HorizontalAutoLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
         w.element.css({
             position: "relative",
-            margin: "0px auto"
+            margin: "0px auto",
         });
         this._handleGap(w, item, null, i);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.HorizontalAutoLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/index.js b/src/core/wrapper/layout/adapt/index.js
new file mode 100644
index 000000000..82505c49c
--- /dev/null
+++ b/src/core/wrapper/layout/adapt/index.js
@@ -0,0 +1,13 @@
+export { AbsoluteCenterLayout } from "./absolute.center";
+export { AbsoluteHorizontalLayout } from "./absolute.horizontal";
+export { AbsoluteLeftRightVerticalAdaptLayout, AbsoluteRightVerticalAdaptLayout } from "./absolute.leftrightvertical";
+export { AbsoluteVerticalLayout } from "./absolute.vertical";
+export { CenterAdaptLayout } from "./adapt.center";
+export { HorizontalAdaptLayout } from "./adapt.horizontal";
+export { LeftRightVerticalAdaptLayout, LeftVerticalAdaptLayout, RightVerticalAdaptLayout } from "./adapt.leftrightvertical";
+export { TableAdaptLayout } from "./adapt.table";
+export { VerticalAdaptLayout } from "./adapt.vertical";
+export { HorizontalAutoLayout } from "./auto.horizontal";
+export { InlineCenterAdaptLayout } from "./inline.center";
+export { InlineHorizontalAdaptLayout } from "./inline.horizontal";
+export { InlineVerticalAdaptLayout } from "./inline.vertical";
diff --git a/src/core/wrapper/layout/adapt/inline.center.js b/src/core/wrapper/layout/adapt/inline.center.js
index 5d7d073af..ede12b455 100644
--- a/src/core/wrapper/layout/adapt/inline.center.js
+++ b/src/core/wrapper/layout/adapt/inline.center.js
@@ -1,35 +1,43 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineCenterAdaptLayout
- * @extends BI.Layout
+ * @class InlineCenterAdaptLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineCenterAdaptLayout extends Layout {
+    static xtype = "bi.inline_center_adapt";
 
-    props: function () {
-        return BI.extend(BI.InlineCenterAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i-c-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.inline",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -44,14 +52,13 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/inline.horizontal.js b/src/core/wrapper/layout/adapt/inline.horizontal.js
index 09874f1b5..5f7a6a3a2 100644
--- a/src/core/wrapper/layout/adapt/inline.horizontal.js
+++ b/src/core/wrapper/layout/adapt/inline.horizontal.js
@@ -1,35 +1,43 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineHorizontalAdaptLayout
- * @extends BI.Layout
+ * @class InlineHorizontalAdaptLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineHorizontalAdaptLayout extends Layout {
+    static xtype = "bi.inline_horizontal_adapt";
 
-    props: function () {
-        return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i-h-a",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.inline",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -44,14 +52,13 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/adapt/inline.vertical.js b/src/core/wrapper/layout/adapt/inline.vertical.js
index 09d76592e..748074c02 100644
--- a/src/core/wrapper/layout/adapt/inline.vertical.js
+++ b/src/core/wrapper/layout/adapt/inline.vertical.js
@@ -1,35 +1,43 @@
+import { shortcut } from "../../../decorator";
+import { Layout } from "../../layout";
+import { extend } from "../../../2.base";
+import { HorizontalAlign, VerticalAlign } from "../../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineVerticalAdaptLayout
- * @extends BI.Layout
+ * @class InlineVerticalAdaptLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineVerticalAdaptLayout extends Layout {
+    static xtype = "bi.inline_vertical_adapt";
 
-    props: function () {
-        return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i-v-a",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.inline",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -44,14 +52,13 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
     }
-});
-BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);
+}
diff --git a/src/core/wrapper/layout/index.js b/src/core/wrapper/layout/index.js
new file mode 100644
index 000000000..03bd1cf74
--- /dev/null
+++ b/src/core/wrapper/layout/index.js
@@ -0,0 +1,17 @@
+export { AbsoluteLayout } from "./layout.absolute";
+export { AdaptiveLayout } from "./layout.adaptive";
+export { BorderLayout } from "./layout.border";
+export { CardLayout } from "./layout.card";
+export { DefaultLayout } from "./layout.default";
+export { DivisionLayout } from "./layout.division";
+export { FloatLeftLayout, FloatRightLayout } from "./layout.flow";
+export { GridLayout } from "./layout.grid";
+export { HorizontalLayout } from "./layout.horizontal";
+export { InlineLayout } from "./layout.inline";
+export { LatticeLayout } from "./layout.lattice";
+export { TableLayout } from "./layout.table";
+export { HTapeLayout, VTapeLayout } from "./layout.tape";
+export { TdLayout } from "./layout.td";
+export { VerticalLayout } from "./layout.vertical";
+export { WindowLayout } from "./layout.window";
+export * from "./adapt";
diff --git a/src/core/wrapper/layout/layout.absolute.js b/src/core/wrapper/layout/layout.absolute.js
index 6333b38a8..7e88bd630 100644
--- a/src/core/wrapper/layout/layout.absolute.js
+++ b/src/core/wrapper/layout/layout.absolute.js
@@ -1,115 +1,119 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, map, parseFloat, isKey, pick, isNotNull, isNumber } from "../../2.base";
+
 /**
  * 固定子组件上下左右的布局容器
- * @class BI.AbsoluteLayout
- * @extends BI.Layout
  */
-BI.AbsoluteLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AbsoluteLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class AbsoluteLayout extends Layout {
+    static xtype = "bi.absolute";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs",
             hgap: null,
             vgap: null,
             lgap: null,
             rgap: null,
             tgap: null,
-            bgap: null
+            bgap: null,
         });
-    },
-    render: function () {
-        BI.AbsoluteLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments);
-        var left = 0, right = 0, top = 0, bottom = 0;
-        var offsets = BI.pick(item, ["top", "right", "bottom", "left"]);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let left = 0, right = 0, top = 0, bottom = 0;
+        let offsets = pick(item, ["top", "right", "bottom", "left"]);
 
-        if (BI.isKey(item.inset)) {
-            var insets = BI.map((item.inset + "").split(" "), function (i, str) {
-                return BI.parseFloat(str);
-            });
+        if (isKey(item.inset)) {
+            const insets = map((`${item.inset}`).split(" "), (i, str) => parseFloat(str));
             switch (insets.length) {
-                case 1:
-                    offsets = {top: insets[0], bottom: insets[0], left: insets[0], right: insets[0]}
-                    break;
-                case 2:
-                    offsets = {top: insets[0], bottom: insets[0], left: insets[1], right: insets[1]}
-                    break;
-                case 3:
-                    offsets = {top: insets[0], left: insets[1], right: insets[1], bottom: insets[2]}
-                    break
-                case 4:
-                default:
-                    offsets = {top: insets[0], right: insets[1], bottom: insets[2], left: insets[3]}
-                    break;
+            case 1:
+                offsets = { top: insets[0], bottom: insets[0], left: insets[0], right: insets[0] };
+                break;
+            case 2:
+                offsets = { top: insets[0], bottom: insets[0], left: insets[1], right: insets[1] };
+                break;
+            case 3:
+                offsets = { top: insets[0], left: insets[1], right: insets[1], bottom: insets[2] };
+                break;
+            case 4:
+            default:
+                offsets = { top: insets[0], right: insets[1], bottom: insets[2], left: insets[3] };
+                break;
             }
         }
-        if (BI.isNotNull(offsets.left)) {
-            w.element.css({left: BI.isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left});
+        if (isNotNull(offsets.left)) {
+            w.element.css({ left: isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left });
             left += offsets.left;
         }
-        if (BI.isNotNull(offsets.right)) {
-            w.element.css({right: BI.isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right});
+        if (isNotNull(offsets.right)) {
+            w.element.css({ right: isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right });
             right += offsets.right;
         }
-        if (BI.isNotNull(offsets.top)) {
-            w.element.css({top: BI.isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top});
+        if (isNotNull(offsets.top)) {
+            w.element.css({ top: isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top });
             top += offsets.top;
         }
-        if (BI.isNotNull(offsets.bottom)) {
-            w.element.css({bottom: BI.isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom});
+        if (isNotNull(offsets.bottom)) {
+            w.element.css({ bottom: isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom });
             bottom += offsets.bottom;
         }
 
-        if (BI.isNotNull(o.hgap)) {
+        if (isNotNull(o.hgap)) {
             left += o.hgap;
-            w.element.css({left: this._optimiseGap(left)});
+            w.element.css({ left: this._optimiseGap(left) });
             right += o.hgap;
-            w.element.css({right: this._optimiseGap(right)});
+            w.element.css({ right: this._optimiseGap(right) });
         }
-        if (BI.isNotNull(o.vgap)) {
+        if (isNotNull(o.vgap)) {
             top += o.vgap;
-            w.element.css({top: this._optimiseGap(top)});
+            w.element.css({ top: this._optimiseGap(top) });
             bottom += o.vgap;
-            w.element.css({bottom: this._optimiseGap(bottom)});
+            w.element.css({ bottom: this._optimiseGap(bottom) });
         }
 
-        if (BI.isNotNull(o.lgap)) {
+        if (isNotNull(o.lgap)) {
             left += o.lgap;
-            w.element.css({left: this._optimiseGap(left)});
+            w.element.css({ left: this._optimiseGap(left) });
         }
-        if (BI.isNotNull(o.rgap)) {
+        if (isNotNull(o.rgap)) {
             right += o.rgap;
-            w.element.css({right: this._optimiseGap(right)});
+            w.element.css({ right: this._optimiseGap(right) });
         }
-        if (BI.isNotNull(o.tgap)) {
+        if (isNotNull(o.tgap)) {
             top += o.tgap;
-            w.element.css({top: this._optimiseGap(top)});
+            w.element.css({ top: this._optimiseGap(top) });
         }
-        if (BI.isNotNull(o.bgap)) {
+        if (isNotNull(o.bgap)) {
             bottom += o.bgap;
-            w.element.css({bottom: this._optimiseGap(bottom)});
+            w.element.css({ bottom: this._optimiseGap(bottom) });
         }
 
-        if (BI.isNotNull(item.width)) {
-            w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
+        if (isNotNull(item.width)) {
+            w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width });
         }
-        if (BI.isNotNull(item.height)) {
-            w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
+        if (isNotNull(item.height)) {
+            w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height });
         }
-        w.element.css({position: "absolute"});
+        w.element.css({ position: "absolute" });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.absolute", BI.AbsoluteLayout);
+}
diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js
index 20b758ef4..e11e23eb4 100644
--- a/src/core/wrapper/layout/layout.adaptive.js
+++ b/src/core/wrapper/layout/layout.adaptive.js
@@ -1,63 +1,70 @@
-BI.AdaptiveLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AdaptiveLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isNumber, isNotNull, isFunction } from "../../2.base";
+
+@shortcut()
+export class AdaptiveLayout extends Layout {
+    static xtype = "bi.adaptive";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-adaptive",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.AdaptiveLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.AdaptiveLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative"});
-        if (BI.isNotNull(item.left)) {
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
+        w.element.css({ position: "relative" });
+        if (isNotNull(item.left)) {
             w.element.css({
-                left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left
+                left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left,
             });
         }
-        if (BI.isNotNull(item.right)) {
+        if (isNotNull(item.right)) {
             w.element.css({
-                right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right
+                right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right,
             });
         }
-        if (BI.isNotNull(item.top)) {
+        if (isNotNull(item.top)) {
             w.element.css({
-                top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top
+                top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top,
             });
         }
-        if (BI.isNotNull(item.bottom)) {
+        if (isNotNull(item.bottom)) {
             w.element.css({
-                bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom
+                bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom,
             });
         }
 
         this._handleGap(w, item);
 
-        if (BI.isNotNull(item.width)) {
-            w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
+        if (isNotNull(item.width)) {
+            w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width });
         }
-        if (BI.isNotNull(item.height)) {
-            w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
+        if (isNotNull(item.height)) {
+            w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.adaptive", BI.AdaptiveLayout);
+}
diff --git a/src/core/wrapper/layout/layout.border.js b/src/core/wrapper/layout/layout.border.js
index 15d3877af..717bc173a 100644
--- a/src/core/wrapper/layout/layout.border.js
+++ b/src/core/wrapper/layout/layout.border.js
@@ -1,42 +1,51 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isNotNull, isFunction } from "../../2.base";
+import { _lazyCreateWidget } from "../../5.inject";
+
 /**
  * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应
  *
- * @class BI.BorderLayout
- * @extends BI.Layout
+ * @class BorderLayout
+ * @extends Layout
  */
-BI.BorderLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.BorderLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class BorderLayout extends Layout {
+    static xtype = "bi.border";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-border-layout",
-            items: {}
+            items: {},
         });
-    },
-    render: function () {
-        BI.BorderLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (regions) {
-        var item;
-        var top = 0;
-        var bottom = 0;
-        var left = 0;
-        var right = 0;
+    stroke(regions) {
+        let item;
+        let top = 0;
+        let bottom = 0;
+        let left = 0;
+        let right = 0;
         if ("north" in regions) {
-            item = regions["north"];
-            if (item != null) {
+            item = regions.north;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("north"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("north"), w);
                     }
                     this.getWidgetByName(this._getChildName("north")).element.height(this._optimiseGap(item.height))
@@ -45,18 +54,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             top: this._optimiseGap(item.top || 0),
                             left: this._optimiseGap(item.left || 0),
                             right: this._optimiseGap(item.right || 0),
-                            bottom: "initial"
+                            bottom: "initial",
                         });
                 }
                 top = (item.height || 0) + (item.top || 0) + (item.bottom || 0);
             }
         }
         if ("south" in regions) {
-            item = regions["south"];
-            if (item != null) {
+            item = regions.south;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("south"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("south"), w);
                     }
                     this.getWidgetByName(this._getChildName("south")).element.height(this._optimiseGap(item.height))
@@ -65,18 +74,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             bottom: this._optimiseGap(item.bottom || 0),
                             left: this._optimiseGap(item.left || 0),
                             right: this._optimiseGap(item.right || 0),
-                            top: "initial"
+                            top: "initial",
                         });
                 }
                 bottom = (item.height || 0) + (item.top || 0) + (item.bottom || 0);
             }
         }
         if ("west" in regions) {
-            item = regions["west"];
-            if (item != null) {
+            item = regions.west;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("west"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("west"), w);
                     }
                     this.getWidgetByName(this._getChildName("west")).element.width(this._optimiseGap(item.width))
@@ -85,18 +94,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             left: this._optimiseGap(item.left || 0),
                             top: this._optimiseGap(top),
                             bottom: this._optimiseGap(bottom),
-                            right: "initial"
+                            right: "initial",
                         });
                 }
                 left = (item.width || 0) + (item.left || 0) + (item.right || 0);
             }
         }
         if ("east" in regions) {
-            item = regions["east"];
-            if (item != null) {
+            item = regions.east;
+            if (isNotNull(item)) {
                 if (item.el) {
                     if (!this.hasWidget(this._getChildName("east"))) {
-                        var w = BI._lazyCreateWidget(item);
+                        const w = _lazyCreateWidget(item);
                         this.addWidget(this._getChildName("east"), w);
                     }
                     this.getWidgetByName(this._getChildName("east")).element.width(this._optimiseGap(item.width))
@@ -105,17 +114,17 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                             right: this._optimiseGap(item.right || 0),
                             top: this._optimiseGap(top),
                             bottom: this._optimiseGap(bottom),
-                            left: "initial"
+                            left: "initial",
                         });
                 }
                 right = (item.width || 0) + (item.left || 0) + (item.right || 0);
             }
         }
         if ("center" in regions) {
-            item = regions["center"];
-            if (item != null) {
+            item = regions.center;
+            if (isNotNull(item)) {
                 if (!this.hasWidget(this._getChildName("center"))) {
-                    var w = BI._lazyCreateWidget(item);
+                    const w = _lazyCreateWidget(item);
                     this.addWidget(this._getChildName("center"), w);
                 }
                 this.getWidgetByName(this._getChildName("center")).element
@@ -124,19 +133,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
                         top: this._optimiseGap(top),
                         bottom: this._optimiseGap(bottom),
                         left: this._optimiseGap(left),
-                        right: this._optimiseGap(right)
+                        right: this._optimiseGap(right),
                     });
             }
         }
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.BorderLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.border", BI.BorderLayout);
+}
diff --git a/src/core/wrapper/layout/layout.card.js b/src/core/wrapper/layout/layout.card.js
index 97034efba..4b2fbad2a 100644
--- a/src/core/wrapper/layout/layout.card.js
+++ b/src/core/wrapper/layout/layout.card.js
@@ -1,211 +1,215 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, each, isNotNull, isFunction, findIndex, isWidget, some, map, isKey } from "../../2.base";
+import { _lazyCreateWidget } from "../../5.inject";
+import { Events } from "../../constant";
+import { Action } from "../../action";
+
 /**
  * 卡片布局，可以做到当前只显示一个组件，其他的都隐藏
- * @class BI.CardLayout
- * @extends BI.Layout
+ * @class CardLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {String} options.defaultShowName 默认展示的子组件名
  */
-BI.CardLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.CardLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class CardLayout extends Layout {
+    static xtype = "bi.card";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-card-layout",
-            items: []
+            items: [],
         });
-    },
+    }
 
-    render: function () {
-        BI.CardLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
+    stroke(items) {
+        const o = this.options;
         this.showIndex = void 0;
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                if (!self.hasWidget(item.cardName)) {
-                    var w = BI._lazyCreateWidget(item);
-                    w.on(BI.Events.DESTROY, function () {
-                        var index = BI.findIndex(o.items, function (i, tItem) {
-                            return tItem.cardName == item.cardName;
-                        });
+                let w;
+                if (!this.hasWidget(item.cardName)) {
+                    w = _lazyCreateWidget(item);
+                    w.on(Events.DESTROY, () => {
+                        const index = findIndex(o.items, (i, tItem) => tItem.cardName === item.cardName);
                         if (index > -1) {
                             o.items.splice(index, 1);
                         }
                     });
-                    self.addWidget(self._getChildName(item.cardName), w);
+                    this.addWidget(this._getChildName(item.cardName), w);
                 } else {
-                    var w = self.getWidgetByName(self._getChildName(item.cardName));
+                    w = this.getWidgetByName(this._getChildName(item.cardName));
                 }
                 w.element.css({
                     position: "relative",
                     top: "0",
                     left: "0",
                     width: "100%",
-                    height: "100%"
+                    height: "100%",
                 });
                 w.setVisible(false);
             }
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("Card布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    empty: function () {
-        BI.CardLayout.superclass.empty.apply(this, arguments);
+    empty(...args) {
+        super.empty(...args);
         this.options.items = [];
-    },
+    }
 
-    populate: function (items) {
-        BI.CardLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
         this.options.defaultShowName && this.showCardByName(this.options.defaultShowName);
-    },
+    }
 
-    isCardExisted: function (cardName) {
-        return BI.some(this.options.items, function (i, item) {
-            return item.cardName == cardName && item.el;
-        });
-    },
+    isCardExisted(cardName) {
+        return some(this.options.items, (i, item) => item.cardName === cardName && item.el);
+    }
 
-    getCardByName: function (cardName) {
+    getCardByName(cardName) {
         if (!this.isCardExisted(cardName)) {
             throw new Error("cardName不存在", cardName);
         }
+        
         return this._children[this._getChildName(cardName)];
-    },
+    }
 
-    _deleteCardByName: function (cardName) {
+    _deleteCardByName(cardName) {
         delete this._children[this._getChildName(cardName)];
-        var index = BI.findIndex(this.options.items, function (i, item) {
-            return item.cardName == cardName;
-        });
+        const index = findIndex(this.options.items, (i, item) => item.cardName === cardName);
         if (index > -1) {
             this.options.items.splice(index, 1);
         }
-    },
+    }
 
-    deleteCardByName: function (cardName) {
+    deleteCardByName(cardName) {
         if (!this.isCardExisted(cardName)) {
             throw new Error("cardName不存在", cardName);
         }
 
-        var child = this._children[this._getChildName(cardName)];
+        const child = this._children[this._getChildName(cardName)];
         this._deleteCardByName(cardName);
         child && child._destroy();
-    },
+    }
 
-    addCardByName: function (cardName, cardItem) {
+    addCardByName(cardName, cardItem) {
         if (this.isCardExisted(cardName)) {
             throw new Error("cardName 已存在", cardName);
         }
-        var widget = BI._lazyCreateWidget(cardItem, this);
+        const widget = _lazyCreateWidget(cardItem, this);
         widget.element.css({
             position: "relative",
             top: "0",
             left: "0",
             width: "100%",
-            height: "100%"
+            height: "100%",
         }).appendTo(this.element);
         widget.invisible();
         this.addWidget(this._getChildName(cardName), widget);
-        this.options.items.push({el: cardItem, cardName: cardName});
+        this.options.items.push({ el: cardItem, cardName });
+        
         return widget;
-    },
+    }
 
-    showCardByName: function (name, action, callback) {
-        var self = this;
+    showCardByName(name, action, callback) {
         // name不存在的时候全部隐藏
-        var exist = this.isCardExisted(name);
-        if (this.showIndex != null) {
+        const exist = this.isCardExisted(name);
+        if (isNotNull(this.showIndex)) {
             this.lastShowIndex = this.showIndex;
         }
         this.showIndex = name;
-        var flag = false;
-        BI.each(this.options.items, function (i, item) {
-            var el = self._children[self._getChildName(item.cardName)];
+        let flag = false;
+        each(this.options.items, (i, item) => {
+            const el = this._children[this._getChildName(item.cardName)];
             if (el) {
-                if (name != item.cardName) {
+                if (name !== item.cardName) {
                     // 动画效果只有在全部都隐藏的时候才有意义,且只要执行一次动画操作就够了
-                    !flag && !exist && (BI.Action && action instanceof BI.Action) ? (action.actionBack(el), flag = true) : el.invisible();
+                    !flag && !exist && (Action && action instanceof Action) ? (action.actionBack(el), flag = true) : el.invisible();
                 } else {
-                    (BI.Action && action instanceof BI.Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback());
+                    (Action && action instanceof Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback());
                 }
             }
         });
-    },
+    }
 
-    showLastCard: function () {
-        var self = this;
+    showLastCard() {
         this.showIndex = this.lastShowIndex;
-        BI.each(this.options.items, function (i, item) {
-            self._children[self._getChildName(item.cardName)].setVisible(self.showIndex == i);
+        each(this.options.items, (i, item) => {
+            this._children[this._getChildName(item.cardName)].setVisible(this.showIndex === i);
         });
-    },
+    }
 
-    setDefaultShowName: function (name) {
+    setDefaultShowName(name) {
         this.options.defaultShowName = name;
+        
         return this;
-    },
+    }
 
-    getDefaultShowName: function () {
+    getDefaultShowName() {
         return this.options.defaultShowName;
-    },
+    }
 
-    getAllCardNames: function () {
-        return BI.map(this.options.items, function (i, item) {
-            return item.cardName;
-        });
-    },
+    getAllCardNames() {
+        return map(this.options.items, (i, item) => item.cardName);
+    }
 
-    getShowingCard: function () {
-        if (!BI.isKey(this.showIndex)) {
+    getShowingCard() {
+        if (!isKey(this.showIndex)) {
             return void 0;
         }
+        
         return this.getWidgetByName(this._getChildName(this.showIndex));
-    },
+    }
 
-    deleteAllCard: function () {
-        var self = this;
-        BI.each(this.getAllCardNames(), function (i, name) {
-            self.deleteCardByName(name);
+    deleteAllCard() {
+        each(this.getAllCardNames(), (i, name) => {
+            this.deleteCardByName(name);
         });
-    },
+    }
 
-    hideAllCard: function () {
-        var self = this;
-        BI.each(this.options.items, function (i, item) {
-            self._children[self._getChildName(item.cardName)].invisible();
+    hideAllCard() {
+        each(this.options.items, (i, item) => {
+            this._children[this._getChildName(item.cardName)].invisible();
         });
-    },
+    }
 
-    isAllCardHide: function () {
-        var self = this;
-        var flag = true;
-        BI.some(this.options.items, function (i, item) {
-            if (self._children[self._getChildName(item.cardName)].isVisible()) {
+    isAllCardHide() {
+        let flag = true;
+        some(this.options.items, (i, item) => {
+            if (this._children[this._getChildName(item.cardName)].isVisible()) {
                 flag = false;
+                
                 return false;
             }
         });
+        
         return flag;
-    },
+    }
 
-    removeWidget: function (nameOrWidget) {
-        var removeName, self = this;
-        if (BI.isWidget(nameOrWidget)) {
-            BI.each(this._children, function (name, child) {
+    removeWidget(nameOrWidget) {
+        let removeName;
+        if (isWidget(nameOrWidget)) {
+            each(this._children, (name, child) => {
                 if (child === nameOrWidget) {
                     removeName = name;
                 }
@@ -217,5 +221,4 @@ BI.CardLayout = BI.inherit(BI.Layout, {
             this._deleteCardByName(removeName);
         }
     }
-});
-BI.shortcut("bi.card", BI.CardLayout);
+}
diff --git a/src/core/wrapper/layout/layout.default.js b/src/core/wrapper/layout/layout.default.js
index 90e4bf569..325be127e 100644
--- a/src/core/wrapper/layout/layout.default.js
+++ b/src/core/wrapper/layout/layout.default.js
@@ -1,39 +1,47 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction } from "../../2.base";
+
 /**
  * 默认的布局方式
  *
- * @class BI.DefaultLayout
- * @extends BI.Layout
+ * @class DefaultLayout
+ * @extends Layout
  */
-BI.DefaultLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.DefaultLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class DefaultLayout extends Layout {
+    static xtype = "bi.default";
+
+    props() {
+        return extend(super.props(...arguments), {
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.DefaultLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var w = BI.DefaultLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
         this._handleGap(w, item);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.DefaultLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.default", BI.DefaultLayout);
+}
diff --git a/src/core/wrapper/layout/layout.division.js b/src/core/wrapper/layout/layout.division.js
index 307166283..92701e7c0 100644
--- a/src/core/wrapper/layout/layout.division.js
+++ b/src/core/wrapper/layout/layout.division.js
@@ -1,36 +1,46 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, makeArray, each, isArray } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+
 /**
  * 分隔容器的控件，按照宽度和高度所占比平分整个容器
  *
- * @class BI.DivisionLayout
- * @extends BI.Layout
+ * @class DivisionLayout
+ * @extends Layout
  */
-BI.DivisionLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.DivisionLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class DivisionLayout extends Layout {
+    static xtype = "bi.division";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-division",
             columns: null,
             rows: null,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.DivisionLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var o = this.options, self = this;
-        var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
-        var map = BI.makeArray(rows), widths = {}, heights = {};
+    stroke(items) {
+        const o = this.options;
+        const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
+        const map = makeArray(rows), widths = {}, heights = {};
 
         function firstElement (item, cls) {
             item.addClass(cls);
@@ -45,9 +55,9 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, cls) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, cls);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, cls);
             } else if (item.el) {
                 firstObject(item.el, cls);
@@ -56,12 +66,12 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        BI.each(map, function (i) {
-            map[i] = BI.makeArray(columns);
+        each(map, i => {
+            map[i] = makeArray(columns);
         });
-        BI.each(items, function (i, item) {
-            if (BI.isArray(item)) {
-                BI.each(item, function (j, el) {
+        each(items, (i, item) => {
+            if (isArray(item)) {
+                each(item, (j, el) => {
                     widths[i] = (widths[i] || 0) + item.width;
                     heights[j] = (heights[j] || 0) + item.height;
                     map[i][j] = el;
@@ -73,56 +83,56 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
             heights[item.column] = (heights[item.column] || 0) + item.height;
             map[item.row][item.column] = item;
         });
-        for (var i = 0; i < rows; i++) {
-            var totalW = 0;
-            for (var j = 0; j < columns; j++) {
+        for (let i = 0; i < rows; i++) {
+            let totalW = 0;
+            for (let j = 0; j < columns; j++) {
+                let w;
                 if (!map[i][j]) {
-                    throw new Error("item(" + i + "" + j + ") 必须", map);
+                    throw new Error(`item(${i}${j}) 必须`, map);
                 }
-                if (!this.hasWidget(this._getChildName(i + "_" + j))) {
-                    var w = BI._lazyCreateWidget(map[i][j]);
-                    this.addWidget(this._getChildName(i + "_" + j), w);
+                if (!this.hasWidget(this._getChildName(`${i}_${j}`))) {
+                    w = _lazyCreateWidget(map[i][j]);
+                    this.addWidget(this._getChildName(`${i}_${j}`), w);
                 } else {
-                    w = this.getWidgetByName(this._getChildName(i + "_" + j));
+                    w = this.getWidgetByName(this._getChildName(`${i}_${j}`));
                 }
-                var left = totalW * 100 / widths[i];
-                w.element.css({position: "absolute", left: left + "%"});
+                const left = totalW * 100 / widths[i];
+                w.element.css({ position: "absolute", left: `${left}%` });
                 if (j > 0) {
-                    var lastW = this.getWidgetByName(this._getChildName(i + "_" + (j - 1)));
-                    lastW.element.css({right: (100 - left) + "%"});
+                    const lastW = this.getWidgetByName(this._getChildName(`${i}_${j - 1}`));
+                    lastW.element.css({ right: `${100 - left}%` });
                 }
-                if (j == o.columns - 1) {
-                    w.element.css({right: "0%"});
+                if (j === o.columns - 1) {
+                    w.element.css({ right: "0%" });
                 }
-                first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1));
+                first(w, this.getRowColumnCls(i, j, rows - 1, columns - 1));
                 totalW += map[i][j].width;
             }
         }
-        for (var j = 0; j < o.columns; j++) {
-            var totalH = 0;
-            for (var i = 0; i < o.rows; i++) {
-                var w = this.getWidgetByName(this._getChildName(i + "_" + j));
-                var top = totalH * 100 / heights[j];
-                w.element.css({top: top + "%"});
+        for (let j = 0; j < o.columns; j++) {
+            let totalH = 0;
+            for (let i = 0; i < o.rows; i++) {
+                const w = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                const top = totalH * 100 / heights[j];
+                w.element.css({ top: `${top}%` });
                 if (i > 0) {
-                    var lastW = this.getWidgetByName(this._getChildName((i - 1) + "_" + j));
-                    lastW.element.css({bottom: (100 - top) + "%"});
+                    const lastW = this.getWidgetByName(this._getChildName(`${i - 1}_${j}`));
+                    lastW.element.css({ bottom: `${100 - top}%` });
                 }
-                if (i == o.rows - 1) {
-                    w.element.css({bottom: "0%"});
+                if (i === o.rows - 1) {
+                    w.element.css({ bottom: "0%" });
                 }
                 totalH += map[i][j].height;
             }
         }
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.DivisionLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.division", BI.DivisionLayout);
+}
diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js
index 13b9fdb54..0ab22e88d 100644
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@@ -1,183 +1,196 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isNotNull, isNumber } from "../../2.base";
+import { pixFormat } from "../../constant";
+
 /**
  * 靠左对齐的自由浮动布局
- * @class BI.FloatLeftLayout
- * @extends BI.Layout
+ * @class FloatLeftLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.FloatLeftLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatLeftLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatLeftLayout extends Layout {
+    static xtype = "bi.left";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-left clearfix",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FloatLeftLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
         if (o.innerHgap !== 0) {
             this.element.css({
                 paddingLeft: this._optimiseGap(o.innerHgap),
-                paddingRight: this._optimiseGap(o.innerHgap)
-            })
+                paddingRight: this._optimiseGap(o.innerHgap),
+            });
         }
         if (o.innerVgap !== 0) {
             this.element.css({
                 paddingTop: this._optimiseGap(o.innerVgap),
-                paddingBottom: this._optimiseGap(o.innerVgap)
-            })
+                paddingBottom: this._optimiseGap(o.innerVgap),
+            });
         }
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", float: "left"});
-        if (BI.isNotNull(item.left)) {
-            w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        w.element.css({ position: "relative", "float": "left" });
+        if (isNotNull(item.left)) {
+            w.element.css({ left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left });
         }
-        if (BI.isNotNull(item.right)) {
-            w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
+        if (isNotNull(item.right)) {
+            w.element.css({ right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right });
         }
-        if (BI.isNotNull(item.top)) {
-            w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
+        if (isNotNull(item.top)) {
+            w.element.css({ top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top });
         }
-        if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom});
+        if (isNotNull(item.bottom)) {
+            w.element.css({ bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom });
         }
         if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
+            const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-top": this._optimiseGap(top)
+                "margin-top": this._optimiseGap(top),
             });
         }
         if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
+            const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-left": this._optimiseGap(left)
+                "margin-left": this._optimiseGap(left),
             });
         }
         if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
+            const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-right": this._optimiseGap(right)
+                "margin-right": this._optimiseGap(right),
             });
         }
         if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-bottom": this._optimiseGap(bottom)
+                "margin-bottom": this._optimiseGap(bottom),
             });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatLeftLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.left", BI.FloatLeftLayout);
+}
 
 /**
  * 靠右对齐的自由浮动布局
- * @class BI.FloatRightLayout
- * @extends BI.Layout
+ * @class FloatRightLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.FloatRightLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatRightLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatRightLayout extends Layout {
+    static xtype = "bi.right";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-right clearfix",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FloatRightLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
         if (o.innerHgap !== 0) {
             this.element.css({
                 paddingLeft: this._optimiseGap(o.innerHgap),
-                paddingRight: this._optimiseGap(o.innerHgap)
-            })
+                paddingRight: this._optimiseGap(o.innerHgap),
+            });
         }
         if (o.innerVgap !== 0) {
             this.element.css({
                 paddingTop: this._optimiseGap(o.innerVgap),
-                paddingBottom: this._optimiseGap(o.innerVgap)
-            })
+                paddingBottom: this._optimiseGap(o.innerVgap),
+            });
         }
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FloatRightLayout.superclass._addElement.apply(this, arguments);
-        w.element.css({position: "relative", float: "right"});
-        if (BI.isNotNull(item.left)) {
-            w.element.css({left: BI.pixFormat(item.left)});
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        w.element.css({ position: "relative", "float": "right" });
+        if (isNotNull(item.left)) {
+            w.element.css({ left: pixFormat(item.left) });
         }
-        if (BI.isNotNull(item.right)) {
-            w.element.css({right: BI.pixFormat(item.right)});
+        if (isNotNull(item.right)) {
+            w.element.css({ right: pixFormat(item.right) });
         }
-        if (BI.isNotNull(item.top)) {
-            w.element.css({top: BI.pixFormat(item.top)});
+        if (isNotNull(item.top)) {
+            w.element.css({ top: pixFormat(item.top) });
         }
-        if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: BI.pixFormat(item.bottom)});
+        if (isNotNull(item.bottom)) {
+            w.element.css({ bottom: pixFormat(item.bottom) });
         }
         if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
+            const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-top": this._optimiseGap(top)
+                "margin-top": this._optimiseGap(top),
             });
         }
         if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
+            const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-left": this._optimiseGap(left)
+                "margin-left": this._optimiseGap(left),
             });
         }
         if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
-            var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
+            const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             w.element.css({
-                "margin-right": this._optimiseGap(right)
+                "margin-right": this._optimiseGap(right),
             });
         }
         if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
-            var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             w.element.css({
-                "margin-bottom": this._optimiseGap(bottom)
+                "margin-bottom": this._optimiseGap(bottom),
             });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatRightLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.right", BI.FloatRightLayout);
+}
diff --git a/src/core/wrapper/layout/layout.grid.js b/src/core/wrapper/layout/layout.grid.js
index 53e4cf00b..9f06311b9 100644
--- a/src/core/wrapper/layout/layout.grid.js
+++ b/src/core/wrapper/layout/layout.grid.js
@@ -1,38 +1,42 @@
-/**
- * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应
- *
- * @class BI.BorderLayout
- * @extends BI.Layout
- */
-BI.GridLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.GridLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isArray, each } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+
+@shortcut()
+export class GridLayout extends Layout {
+    static xtype = "bi.grid";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-grid",
             columns: null,
             rows: null,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.GridLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
-        var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
-        var width = 100 / columns, height = 100 / rows;
-        var els = [];
-        for (var i = 0; i < rows; i++) {
+    stroke(items) {
+        const o = this.options;
+        const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
+        const width = 100 / columns, height = 100 / rows;
+        const els = [];
+        for (let i = 0; i < rows; i++) {
             els[i] = [];
         }
 
@@ -49,9 +53,9 @@ BI.GridLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, row, col) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, row, col);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, row, col);
             } else if (item.el) {
                 firstObject(item.el, row, col);
@@ -60,46 +64,46 @@ BI.GridLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        BI.each(items, function (i, item) {
-            if (BI.isArray(item)) {
-                BI.each(item, function (j, el) {
-                    els[i][j] = BI._lazyCreateWidget(el);
+        each(items, (i, item) => {
+            if (isArray(item)) {
+                each(item, (j, el) => {
+                    els[i][j] = _lazyCreateWidget(el);
                 });
+                
                 return;
             }
-            els[item.row][item.column] = BI._lazyCreateWidget(item);
+            els[item.row][item.column] = _lazyCreateWidget(item);
         });
-        for (var i = 0; i < rows; i++) {
-            for (var j = 0; j < columns; j++) {
+        for (let i = 0; i < rows; i++) {
+            for (let j = 0; j < columns; j++) {
                 if (!els[i][j]) {
-                    els[i][j] = BI._lazyCreateWidget({
-                        type: "bi.layout"
+                    els[i][j] = _lazyCreateWidget({
+                        type: "bi.layout",
                     });
                 }
-                first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1));
+                first(els[i][j], this.getRowColumnCls(i, j, rows - 1, columns - 1));
                 els[i][j].element.css({
                     position: "absolute",
-                    top: height * i + "%",
-                    left: width * j + "%",
-                    right: (100 - (width * (j + 1))) + "%",
-                    bottom: (100 - (height * (i + 1))) + "%"
+                    top: `${height * i}%`,
+                    left: `${width * j}%`,
+                    right: `${100 - (width * (j + 1))}%`,
+                    bottom: `${100 - (height * (i + 1))}%`,
                 });
-                this.addWidget(this._getChildName(i + "_" + j), els[i][j]);
+                this.addWidget(this._getChildName(`${i}_${j}`), els[i][j]);
             }
         }
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("grid布局不需要resize")
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.GridLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.grid", BI.GridLayout);
+}
diff --git a/src/core/wrapper/layout/layout.horizontal.js b/src/core/wrapper/layout/layout.horizontal.js
index 525538e92..32938ef93 100644
--- a/src/core/wrapper/layout/layout.horizontal.js
+++ b/src/core/wrapper/layout/layout.horizontal.js
@@ -1,8 +1,6 @@
-/**
- * 水平布局
- * @class BI.HorizontalLayout
- * @extends BI.Layout
- */
-BI.HorizontalLayout = function () {
-};
-BI.shortcut("bi.horizontal", BI.HorizontalLayout);
+import { shortcut } from "../../decorator";
+
+@shortcut()
+export class HorizontalLayout {
+    static xtype = "bi.horizontal";
+}
diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js
index 661a6bf77..e837af6fc 100644
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@@ -1,19 +1,26 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isNull } from "../../2.base";
+import { pixFormat, HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * 内联布局
- * @class BI.InlineLayout
- * @extends BI.Layout
+ * @class InlineLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.InlineLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class InlineLayout extends Layout {
+    static xtype = "bi.inline";
 
-    props: function () {
-        return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-i",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
             columnSize: [],
             hgap: 0,
             vgap: 0,
@@ -21,80 +28,80 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            items: []
+            items: [],
         });
-    },
+    }
 
-    render: function () {
-        BI.InlineLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
+    render() {
+        super.render(...arguments);
+        const o = this.options;
         this.element.css({
-            textAlign: o.horizontalAlign
+            textAlign: o.horizontalAlign,
         });
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
-        var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
         if (o.columnSize.length > 0) {
             if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                 columnSize = null;
             }
         }
         if (columnSize > 0) {
-            w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : BI.pixFormat(columnSize));
+            w.element.width(columnSize < 1 ? (`${(columnSize * 100).toFixed(1)}%`) : pixFormat(columnSize));
         }
         w.element.css({
             position: "relative",
-            "vertical-align": o.verticalAlign
+            "vertical-align": o.verticalAlign,
         });
         w.element.addClass("i-item");
         if (columnSize === "fill" || columnSize === "") {
-            var length  = 0, gap = o.hgap + o.innerHgap;
-            var fillCount = 0, autoCount = 0;
-            for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
-                var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
+            let length = 0, gap = o.hgap + o.innerHgap;
+            let fillCount = 0, autoCount = 0;
+            for (let k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
+                let cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
                 if (cz === "fill") {
                     fillCount++;
                     cz = 0;
-                } else if (cz === "" || BI.isNull(cz)) {
+                } else if (cz === "" || isNull(cz)) {
                     autoCount++;
                     cz = 0;
                 }
                 gap += o.hgap + o.lgap + o.rgap + this._optimiseItemLgap(o.items[k]) + this._optimiseItemRgap(o.items[k]) + this._optimiseItemHgap(o.items[k]);
                 length += cz;
             }
-            length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : BI.pixFormat(length);
-            gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
+            length = length > 0 && length < 1 ? `${(length * 100).toFixed(1)}%` : pixFormat(length);
+            gap = gap > 0 && gap < 1 ? `${(gap * 100).toFixed(1)}%` : pixFormat(gap);
             if (columnSize === "fill") {
-                w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
+                w.element.css("min-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`);
             }
-            if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
+            if (o.horizontalAlign === HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
                 if (columnSize === "fill") {
-                    w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
+                    w.element.css("max-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`);
                 } else {
-                    w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
+                    w.element.css("max-width", `calc((100% - ${length} - ${gap})${autoCount > 1 ? `/${autoCount}` : ""})`);
                 }
             }
         }
         this._handleGap(w, item, i);
-        if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
-            var top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
+        if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) {
+            const top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
                 bottom = o.innerVgap + o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
-            var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : BI.pixFormat(top + bottom);
-            w.element.css("height", "calc(100% - " + gap + ")");
+            const gap = (top + bottom) > 0 && (top + bottom) < 1 ? `${((top + bottom) * 100).toFixed(1)}%` : pixFormat(top + bottom);
+            w.element.css("height", `calc(100% - ${gap})`);
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.InlineLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.inline", BI.InlineLayout);
+}
diff --git a/src/core/wrapper/layout/layout.lattice.js b/src/core/wrapper/layout/layout.lattice.js
index 34845aa7b..65d049976 100644
--- a/src/core/wrapper/layout/layout.lattice.js
+++ b/src/core/wrapper/layout/layout.lattice.js
@@ -1,43 +1,52 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, sum } from "../../2.base";
+
 /**
  * 靠左对齐的自由浮动布局
- * @class BI.LatticeLayout
- * @extends BI.Layout
+ * @class LatticeLayout
+ * @extends Layout
  *
  * @cfg {JSON} options 配置属性
  * @cfg {Number} [hgap=0] 水平间隙
  * @cfg {Number} [vgap=0] 垂直间隙
  */
-BI.LatticeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.LatticeLayout.superclass.props.apply(this, arguments), {
-            baseCls: "bi-lattice clearfix"
+@shortcut()
+export class LatticeLayout extends Layout {
+    static xtype = "bi.lattice";
+
+    props() {
+        return extend(super.props(...arguments), {
+            baseCls: "bi-lattice clearfix",
             // columnSize: [0.2, 0.2, 0.6],
         });
-    },
-    render: function () {
-        BI.LatticeLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.LatticeLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let width;
         if (o.columnSize && o.columnSize[i]) {
-            var width = o.columnSize[i] / BI.sum(o.columnSize) * 100 + "%";
+            width = `${o.columnSize[i] / sum(o.columnSize) * 100}%`;
         } else {
-            var width = 1 / this.options.items.length * 100 + "%";
+            width = `${1 / this.options.items.length * 100}%`;
         }
-        w.element.css({position: "relative", float: "left", width: width});
+        w.element.css({ position: "relative", "float": "left", width });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.LatticeLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.lattice", BI.LatticeLayout);
+}
diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js
index 51d6eeb14..ec75bc8f0 100644
--- a/src/core/wrapper/layout/layout.table.js
+++ b/src/core/wrapper/layout/layout.table.js
@@ -1,36 +1,46 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, range, isArray, map, reduce, isEmpty, formatEL } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应
  *
- * @class BI.TableLayout
- * @extends BI.Layout
+ * @class TableLayout
+ * @extends Layout
  */
-BI.TableLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.TableLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class TableLayout extends Layout {
+    static xtype = "bi.table";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-t",
             // scrolly: true,
             columnSize: [],
             rowSize: [],
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
             // rowSize: 30,  // or [30,30,30]
             hgap: 0,
             vgap: 0,
             items: [],
         });
-    },
-    render: function () {
-        BI.TableLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
 
-        var columnSize = o.columnSize.length > 0 ? o.columnSize : BI.range(items[0].length).fill("");
+        const columnSize = o.columnSize.length > 0 ? o.columnSize : range(items[0].length).fill("");
 
         if (columnSize.length > 0) {
-            var template = [];
-            for (var i = 0; i < columnSize.length; i++) {
+            const template = [];
+            for (let i = 0; i < columnSize.length; i++) {
                 if (columnSize[i] === "") {
                     template.push("auto");
                 } else if (columnSize[i] === "fill") {
@@ -41,9 +51,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
             }
             this.element.css({
                 "grid-template-columns": template.join(" "),
-                "grid-template-rows": BI.isArray(o.rowSize) ? BI.map(o.rowSize, function (i, size) {
-                    return self._optimiseGap(size);
-                }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
+                "grid-template-rows": isArray(o.rowSize) ? map(o.rowSize, (i, size) => this._optimiseGap(size)).join(" ") : range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
                 "grid-row-gap": this._optimiseGap(o.vgap),
                 "grid-column-gap": this._optimiseGap(o.hgap),
             });
@@ -51,15 +59,15 @@ BI.TableLayout = BI.inherit(BI.Layout, {
         
         return {
             type: "bi.default",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref(_ref) {
+                this.layout = _ref;
             },
             items: this._formatItems(items),
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options, self = this;
+    _formatItems(items) {
+        const o = this.options;
 
         function firstElement (item, cls) {
             item.addClass(cls);
@@ -74,9 +82,9 @@ BI.TableLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, cls) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 return firstElement(item.element, cls);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 return firstElement(item.el.element, cls);
             } else if (item.el) {
                 return firstObject(item.el, cls);
@@ -91,30 +99,27 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                 columnSize: ["fill"],
                 horizontalAlign: o.horizontalAlign,
                 verticalAlign: o.verticalAlign,
-                items: [BI.formatEL(item)],
+                items: [formatEL(item)],
             };
         }
 
-        return BI.reduce(items, function (rowItems, result, rowIndex) {
-            return result.concat(BI.map(rowItems, function (colIndex, item) {
-                var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
-                if (BI.isEmpty(item)) {
-                    return first(wrapLayout({
-                        type: "bi.layout",
-                    }), cls);
-                }
+        return reduce(items, (rowItems, result, rowIndex) => result.concat(map(rowItems, (colIndex, item) => {
+            const cls = this.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
+            if (isEmpty(item)) {
+                return first(wrapLayout({
+                    type: "bi.layout",
+                }), cls);
+            }
                 
-                return first(wrapLayout(item), cls);
-            }));
-        }, []);
-    },
+            return first(wrapLayout(item), cls);
+        })), []);
+    }
 
-    resize: function () {
+    resize() {
         // console.log("table布局不需要resize");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
-    },
-});
-BI.shortcut("bi.table", BI.TableLayout);
+    }
+}
diff --git a/src/core/wrapper/layout/layout.tape.js b/src/core/wrapper/layout/layout.tape.js
index 9303f5865..9ad981f4e 100644
--- a/src/core/wrapper/layout/layout.tape.js
+++ b/src/core/wrapper/layout/layout.tape.js
@@ -1,13 +1,22 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, compact, each, isEmptyObject, isNumber, isNull, any, backAny } from "../../2.base";
+import { _lazyCreateWidget } from "../../5.inject";
+import { HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * 水平tape布局
- * @class BI.HTapeLayout
- * @extends BI.Layout
+ * @class HTapeLayout
+ * @extends Layout
  */
-BI.HTapeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.HTapeLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HTapeLayout extends Layout {
+    static xtype = "bi.htape";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-tape",
-            verticalAlign: BI.VerticalAlign.Top,
+            verticalAlign: VerticalAlign.Top,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -15,37 +24,39 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             columnSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.HTapeLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
-        items = BI.compact(items);
-        BI.each(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+    stroke(items) {
+        const o = this.options;
+        items = compact(items);
+        each(items, (i, item) => {
+            let w;
+            if (isEmptyObject(item)) {
                 return;
             }
-            if (!self.hasWidget(self._getChildName(i))) {
-                var w = BI._lazyCreateWidget(item);
-                self.addWidget(self._getChildName(i), w);
+            if (!this.hasWidget(this._getChildName(i))) {
+                w = _lazyCreateWidget(item);
+                this.addWidget(this._getChildName(i), w);
             } else {
-                w = self.getWidgetByName(self._getChildName(i));
+                w = this.getWidgetByName(this._getChildName(i));
             }
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (o.columnSize.length > 0) {
                 if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                     columnSize = item.width;
@@ -53,90 +64,92 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
             }
             w.element.css({
                 position: "absolute",
-                top: self._optimiseGap(self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
-                bottom: self._optimiseGap(self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
-                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
+                top: this._optimiseGap(this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
+                bottom: this._optimiseGap(this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
+                width: isNumber(columnSize) ? this._optimiseGap(columnSize) : "",
             });
-            if (o.verticalAlign === BI.VerticalAlign.Middle) {
+            if (o.verticalAlign === VerticalAlign.Middle) {
                 w.element.css({
                     marginTop: "auto",
-                    marginBottom: "auto"
+                    marginBottom: "auto",
                 });
-            } else if (o.verticalAlign === BI.VerticalAlign.Bottom) {
+            } else if (o.verticalAlign === VerticalAlign.Bottom) {
                 w.element.css({
-                    marginTop: "auto"
+                    marginTop: "auto",
                 });
             }
         });
 
-        var left = {}, right = {};
+        const left = {}, right = {};
         left[0] = o.innerHgap;
         right[items.length - 1] = o.innerHgap;
 
-        BI.any(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        any(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            const w = this.getWidgetByName(this._getChildName(i));
+            let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (o.columnSize.length > 0) {
                 if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                     columnSize = item.width;
                 }
             }
-            if (BI.isNull(left[i])) {
-                var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
-                left[i] = left[i - 1] + preColumnSize + self._optimiseItemLgap(items[i - 1]) + self._optimiseItemRgap(items[i - 1]) + 2 * self._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
+            if (isNull(left[i])) {
+                const preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
+                left[i] = left[i - 1] + preColumnSize + this._optimiseItemLgap(items[i - 1]) + this._optimiseItemRgap(items[i - 1]) + 2 * this._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
             }
             w.element.css({
-                left: self._optimiseGap(left[i] + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.hgap + o.lgap)
+                left: this._optimiseGap(left[i] + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.hgap + o.lgap),
             });
 
-            if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
+            if (isNull(columnSize) || columnSize === "" || columnSize === "fill") {
                 return true;
             }
         });
-        BI.backAny(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        backAny(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
-            if (BI.isNull(right[i])) {
-                var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
-                right[i] = right[i + 1] + nextColumnSize + self._optimiseItemLgap(items[i + 1]) + self._optimiseItemRgap(items[i + 1]) + 2 * self._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
+            const w = this.getWidgetByName(this._getChildName(i));
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            if (isNull(right[i])) {
+                const nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
+                right[i] = right[i + 1] + nextColumnSize + this._optimiseItemLgap(items[i + 1]) + this._optimiseItemRgap(items[i + 1]) + 2 * this._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
             }
             w.element.css({
-                right: self._optimiseGap(right[i] + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.hgap + o.rgap)
+                right: this._optimiseGap(right[i] + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.hgap + o.rgap),
             });
 
-            if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
+            if (isNull(columnSize) || columnSize === "" || columnSize === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.HTapeLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.htape", BI.HTapeLayout);
+}
 
 /**
  * 垂直tape布局
- * @class BI.VTapeLayout
- * @extends BI.Layout
+ * @class VTapeLayout
+ * @extends Layout
  */
-BI.VTapeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.VTapeLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VTapeLayout extends Layout {
+    static xtype = "bi.vtape";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-v-tape",
-            horizontalAlign: BI.HorizontalAlign.Left,
+            horizontalAlign: HorizontalAlign.Left,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -144,33 +157,35 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             rowSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.VTapeLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        super.render(...arguments);
         this.populate(this.options.items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
-        items = BI.compact(items);
-        BI.each(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+    stroke(items) {
+        const o = this.options;
+        items = compact(items);
+        each(items, (i, item) => {
+            let w;
+            if (isEmptyObject(item)) {
                 return;
             }
-            if (!self.hasWidget(self._getChildName(i))) {
-                var w = BI._lazyCreateWidget(item);
-                self.addWidget(self._getChildName(i), w);
+            if (!this.hasWidget(this._getChildName(i))) {
+                w = _lazyCreateWidget(item);
+                this.addWidget(this._getChildName(i), w);
             } else {
-                w = self.getWidgetByName(self._getChildName(i));
+                w = this.getWidgetByName(this._getChildName(i));
             }
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
             if (o.rowSize.length > 0) {
                 if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                     rowSize = item.height;
@@ -178,76 +193,75 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
             }
             w.element.css({
                 position: "absolute",
-                left: self._optimiseGap(self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
-                right: self._optimiseGap(self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
-                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
+                left: this._optimiseGap(this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
+                right: this._optimiseGap(this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
+                height: isNumber(rowSize) ? this._optimiseGap(rowSize) : "",
             });
-            if (o.horizontalAlign === BI.HorizontalAlign.Center) {
+            if (o.horizontalAlign === HorizontalAlign.Center) {
                 w.element.css({
                     marginLeft: "auto",
-                    marginRight: "auto"
+                    marginRight: "auto",
                 });
-            } else if (o.horizontalAlign === BI.HorizontalAlign.Right) {
+            } else if (o.horizontalAlign === HorizontalAlign.Right) {
                 w.element.css({
-                    marginLeft: "auto"
+                    marginLeft: "auto",
                 });
             }
         });
 
-        var top = {}, bottom = {};
+        const top = {}, bottom = {};
         top[0] = o.innerVgap;
         bottom[items.length - 1] = o.innerVgap;
 
-        BI.any(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        any(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            const w = this.getWidgetByName(this._getChildName(i));
+            let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
             if (o.rowSize.length > 0) {
                 if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                     rowSize = item.height;
                 }
             }
-            if (BI.isNull(top[i])) {
-                var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
-                top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
+            if (isNull(top[i])) {
+                const preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
+                top[i] = top[i - 1] + preRowSize + this._optimiseItemTgap(items[i - 1]) + this._optimiseItemBgap(items[i - 1]) + 2 * this._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap)
+                top: this._optimiseGap(top[i] + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.vgap + o.tgap),
             });
 
-            if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
+            if (isNull(rowSize) || rowSize === "" || rowSize === "fill") {
                 return true;
             }
         });
-        BI.backAny(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        backAny(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.getWidgetByName(self._getChildName(i));
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
-            if (BI.isNull(bottom[i])) {
-                var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
-                bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
+            const w = this.getWidgetByName(this._getChildName(i));
+            const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            if (isNull(bottom[i])) {
+                const nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
+                bottom[i] = bottom[i + 1] + nextRowSize + this._optimiseItemTgap(items[i + 1]) + this._optimiseItemBgap(items[i + 1]) + 2 * this._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap)
+                bottom: this._optimiseGap(bottom[i] + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.vgap + o.bgap),
             });
 
-            if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
+            if (isNull(rowSize) || rowSize === "" || rowSize === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.VTapeLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.vtape", BI.VTapeLayout);
+}
diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js
index cb3221570..e9228ca2d 100644
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@@ -1,45 +1,56 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, isOdd, some, isNumber, isNull } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+import { HorizontalAlign, VerticalAlign } from "../../constant";
+
 /**
  * td布局
- * @class BI.TdLayout
- * @extends BI.Layout
+ * @class TdLayout
+ * @extends Layout
  */
-BI.TdLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class TdLayout extends Layout {
+    static xtype = "bi.td";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-td",
             columnSize: [],
             rowSize: [],
-            verticalAlign: BI.VerticalAlign.Middle,
-            horizontalAlign: BI.HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             tgap: 0,
             bgap: 0,
             lgap: 0,
             rgap: 0,
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.TdLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.$table = Widget._renderEngine.createElement("<table>").attr({ cellspacing: 0, cellpadding: 0 }).css({
             position: "relative",
-            width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch) ? "100%" : "auto",
-            height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
+            width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch) ? "100%" : "auto",
+            height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto",
             "border-spacing": "0px",
             border: "none",
-            "border-collapse": "separate"
+            "border-collapse": "separate",
         });
         this.rows = 0;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (idx, arr) {
-        var o = this.options;
+    _addElement(idx, arr) {
+        const o = this.options;
 
         function firstElement (item, row, col) {
             if (row === 0) {
@@ -48,28 +59,28 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             if (col === 0) {
                 item.addClass("first-col");
             }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
+            item.addClass(isOdd(row + 1) ? "odd-row" : "even-row");
+            item.addClass(isOdd(col + 1) ? "odd-col" : "even-col");
             item.addClass("center-element");
         }
 
         function firstObject (item, row, col) {
-            var cls = "";
+            let cls = "";
             if (row === 0) {
                 cls += " first-row";
             }
             if (col === 0) {
                 cls += " first-col";
             }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+            isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
+            isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
+            item.cls = `${(item.cls || "") + cls} center-element`;
         }
 
         function first (item, row, col) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, row, col);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, row, col);
             } else if (item.el) {
                 firstObject(item.el, row, col);
@@ -78,30 +89,30 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        var height = BI.isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]));
-        var tr = BI._lazyCreateWidget({
+        const height = isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]));
+        const tr = _lazyCreateWidget({
             type: "bi.default",
             tagName: "tr",
-            height: height,
+            height,
             css: {
                 "max-height": height,
-                "min-height": height
-            }
+                "min-height": height,
+            },
         });
 
-        for (var i = 0; i < arr.length; i++) {
-            var w = BI._lazyCreateWidget(arr[i]);
-            if (o.verticalAlign === BI.VerticalAlign.Stretch) {
-                var top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]),
+        for (let i = 0; i < arr.length; i++) {
+            const w = _lazyCreateWidget(arr[i]);
+            if (o.verticalAlign === VerticalAlign.Stretch) {
+                const top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]),
                     bottom = o.vgap + o.bgap + this._optimiseItemBgap(arr[i]) + this._optimiseItemVgap(arr[i]);
-                w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
+                w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`);
             }
-            w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
-            var item = arr[i];
+            w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" });
+            const item = arr[i];
             this._handleGap(w, item, i);
             first(w, this.rows++, i);
-            var width = "";
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            let width = "";
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize > 0) {
                 width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
             }
@@ -109,20 +120,21 @@ BI.TdLayout = BI.inherit(BI.Layout, {
                 if (o.columnSize.length > 0) {
                     return o.columnSize.indexOf("fill") >= 0;
                 }
-                return BI.some(arr, function (i, item) {
+                
+                return some(arr, (i, item) => {
                     if (item.width === "fill") {
                         return true;
                     }
                 });
             }
-            if ((BI.isNull(columnSize) || columnSize === "") && hasFill()) {
+            if ((isNull(columnSize) || columnSize === "") && hasFill()) {
                 width = 2;
             }
-            var td = BI._lazyCreateWidget({
+            const td = _lazyCreateWidget({
                 type: "bi.default",
-                width: width,
+                width,
                 tagName: "td",
-                items: [w]
+                items: [w],
             });
             // 对于表现为td的元素设置最大宽度，有几点需要注意
             // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
@@ -131,7 +143,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             if (columnSize > 0) {
                 td.element.css({
                     "max-width": width,
-                    "min-width": width
+                    "min-width": width,
                 });
             }
             td.element.css({
@@ -139,30 +151,30 @@ BI.TdLayout = BI.inherit(BI.Layout, {
                 "vertical-align": o.verticalAlign,
                 margin: "0",
                 padding: "0",
-                border: "none"
+                border: "none",
             });
             tr.addItem(td);
         }
         this.addWidget(this._getChildName(idx), tr);
+        
         return tr;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$table.append(frag);
         this.element.append(this.$table);
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("td布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.TdLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.td", BI.TdLayout);
+}
diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js
index b181b1d41..ada08e063 100644
--- a/src/core/wrapper/layout/layout.vertical.js
+++ b/src/core/wrapper/layout/layout.vertical.js
@@ -1,54 +1,63 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction } from "../../2.base";
+import { HorizontalAlign } from "../../constant";
+
 /**
  * 垂直布局
- * @class BI.VerticalLayout
- * @extends BI.Layout
+ * @class VerticalLayout
+ * @extends Layout
  */
-BI.VerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.VerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VerticalLayout extends Layout {
+    static xtype = "bi.vertical";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-v",
-            horizontalAlign: BI.HorizontalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            scrolly: true
+            scrolly: true,
         });
-    },
-    render: function () {
-        BI.VerticalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.VerticalLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         this._handleGap(w, item, null, i);
-        if (o.horizontalAlign === BI.HorizontalAlign.Center) {
+        if (o.horizontalAlign === HorizontalAlign.Center) {
             w.element.css({
                 marginLeft: "auto",
-                marginRight: "auto"
+                marginRight: "auto",
             });
-        } else if (o.horizontalAlign === BI.HorizontalAlign.Right) {
+        } else if (o.horizontalAlign === HorizontalAlign.Right) {
             w.element.css({
-                marginLeft: "auto"
+                marginLeft: "auto",
             });
         }
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.VerticalLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.vertical", BI.VerticalLayout);
+}
diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js
index a6e6c6a26..34dfe422f 100644
--- a/src/core/wrapper/layout/layout.window.js
+++ b/src/core/wrapper/layout/layout.window.js
@@ -1,11 +1,20 @@
+import { shortcut } from "../../decorator";
+import { Layout } from "../layout";
+import { extend, isFunction, makeArray, isNumber, isNull } from "../../2.base";
+import { Widget } from "../../4.widget";
+import { _lazyCreateWidget } from "../../5.inject";
+
 /**
  *
- * @class BI.WindowLayout
- * @extends BI.Layout
+ * @class WindowLayout
+ * @extends Layout
  */
-BI.WindowLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.WindowLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class WindowLayout extends Layout {
+    static xtype = "bi.window";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-window",
             columns: 3,
             rows: 2,
@@ -17,30 +26,31 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
             bgap: 0,
             columnSize: [],
             rowSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.WindowLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var o = this.options, self = this;
-        if (BI.isNumber(o.rowSize)) {
-            o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length);
+    stroke(items) {
+        const o = this.options;
+        if (isNumber(o.rowSize)) {
+            o.rowSize = makeArray(o.items.length, 1 / o.items.length);
         }
-        if (BI.isNumber(o.columnSize)) {
-            o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length);
+        if (isNumber(o.columnSize)) {
+            o.columnSize = makeArray(o.items[0].length, 1 / o.items[0].length);
         }
 
         function firstElement (item, cls) {
@@ -56,9 +66,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
         }
 
         function first (item, row, col) {
-            if (item instanceof BI.Widget) {
+            if (item instanceof Widget) {
                 firstElement(item.element, row, col);
-            } else if (item.el instanceof BI.Widget) {
+            } else if (item.el instanceof Widget) {
                 firstElement(item.el.element, row, col);
             } else if (item.el) {
                 firstObject(item.el, row, col);
@@ -67,108 +77,111 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
             }
         }
 
-        for (var i = 0; i < o.rows; i++) {
-            for (var j = 0; j < o.columns; j++) {
+        for (let i = 0; i < o.rows; i++) {
+            for (let j = 0; j < o.columns; j++) {
                 if (!o.items[i][j]) {
                     throw new Error("构造错误", o.items);
                 }
-                if (!this.hasWidget(this._getChildName(i + "_" + j))) {
-                    var w = BI._lazyCreateWidget(o.items[i][j]);
-                    w.element.css({position: "absolute"});
-                    this.addWidget(this._getChildName(i + "_" + j), w);
+                if (!this.hasWidget(this._getChildName(`${i}_${j}`))) {
+                    const w = _lazyCreateWidget(o.items[i][j]);
+                    w.element.css({ position: "absolute" });
+                    this.addWidget(this._getChildName(`${i}_${j}`), w);
                 }
             }
         }
-        var left = {}, right = {}, top = {}, bottom = {};
+        const left = {}, right = {}, top = {}, bottom = {};
         left[0] = 0;
         top[0] = 0;
         right[o.columns - 1] = 0;
         bottom[o.rows - 1] = 0;
         // 从上到下
-        for (var i = 0; i < o.rows; i++) {
-            for (var j = 0; j < o.columns; j++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(top[i])) {
+        for (let i = 0; i < o.rows; i++) {
+            for (let j = 0; j < o.columns; j++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(top[i])) {
                     top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap);
                 }
-                var t = this._optimiseGap(top[i] + o.vgap + o.tgap), h = "";
-                if (BI.isNumber(o.rowSize[i])) {
+                const t = this._optimiseGap(top[i] + o.vgap + o.tgap);
+                let h = "";
+                if (isNumber(o.rowSize[i])) {
                     h = this._optimiseGap(o.rowSize[i]);
                 }
-                wi.element.css({top: t, height: h});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ top: t, height: h });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.rowSize[i])) {
+            if (!isNumber(o.rowSize[i])) {
                 break;
             }
         }
         // 从下到上
-        for (var i = o.rows - 1; i >= 0; i--) {
-            for (var j = 0; j < o.columns; j++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(bottom[i])) {
+        for (let i = o.rows - 1; i >= 0; i--) {
+            for (let j = 0; j < o.columns; j++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(bottom[i])) {
                     bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap);
                 }
-                var b = this._optimiseGap(bottom[i] + o.vgap + o.bgap), h = "";
-                if (BI.isNumber(o.rowSize[i])) {
+                const b = this._optimiseGap(bottom[i] + o.vgap + o.bgap);
+                let h = "";
+                if (isNumber(o.rowSize[i])) {
                     h = this._optimiseGap(o.rowSize[i]);
                 }
-                wi.element.css({bottom: b, height: h});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ bottom: b, height: h });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.rowSize[i])) {
+            if (!isNumber(o.rowSize[i])) {
                 break;
             }
         }
         // 从左到右
-        for (var j = 0; j < o.columns; j++) {
-            for (var i = 0; i < o.rows; i++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(left[j])) {
+        for (let j = 0; j < o.columns; j++) {
+            for (let i = 0; i < o.rows; i++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(left[j])) {
                     left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap);
                 }
-                var l = this._optimiseGap(left[j] + o.hgap + o.lgap), w = "";
-                if (BI.isNumber(o.columnSize[j])) {
+                const l = this._optimiseGap(left[j] + o.hgap + o.lgap);
+                let w = "";
+                if (isNumber(o.columnSize[j])) {
                     w = this._optimiseGap(o.columnSize[j]);
                 }
-                wi.element.css({left: l, width: w});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ left: l, width: w });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.columnSize[j])) {
+            if (!isNumber(o.columnSize[j])) {
                 break;
             }
         }
         // 从右到左
-        for (var j = o.columns - 1; j >= 0; j--) {
-            for (var i = 0; i < o.rows; i++) {
-                var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
-                if (BI.isNull(right[j])) {
+        for (let j = o.columns - 1; j >= 0; j--) {
+            for (let i = 0; i < o.rows; i++) {
+                const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
+                if (isNull(right[j])) {
                     right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap);
                 }
-                var r = this._optimiseGap(right[j] + o.hgap + o.rgap), w = "";
-                if (BI.isNumber(o.columnSize[j])) {
+                const r = this._optimiseGap(right[j] + o.hgap + o.rgap);
+                let w = "";
+                if (isNumber(o.columnSize[j])) {
                     w = this._optimiseGap(o.columnSize[j]);
                 }
-                wi.element.css({right: r, width: w});
-                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
+                wi.element.css({ right: r, width: w });
+                first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
-            if (!BI.isNumber(o.columnSize[j])) {
+            if (!isNumber(o.columnSize[j])) {
                 break;
             }
         }
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("window布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.WindowLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.window", BI.WindowLayout);
+}