Pull request #3438: KERNEL-14241 refactor:demo的es6化

Merge in VISUAL/fineui from ~VIVY.PAN/fineui:es6 to es6

* commit 'c8f1c832c7c8967bcdf71e7a747597588569559b':
  KERNEL-14241 refactor:demo的es6化

demo/js/base/button/demo.button.js

@@ -1,32 +1,14 @@
-(function () {
+import { shortcut, Widget, parseInt, Msg, map } from "@/core";
-    var JokerIcon = BI.inherit(BI.Widget, {
-        render: function () {
-            var self = this;
 
-            return {
+@shortcut()
-                type: "bi.label",
+export class Button extends Widget {
-                cls: "anim-rotate",
+    static xtype = "demo.button";
-                ref: function(ref) {
-                    self.text = ref;
-                },
-            };
-        },
-        loading: function () {
-            this.text.setText("🤡");
-        },
-        loaded: function () {
-            this.text.setText("");
-        },
-    });
-    BI.shortcut("demo.joker.icon", JokerIcon);
-}());
 
-Demo.Button = BI.inherit(BI.Widget, {
+    props = { baseCls: "demo-button" };
-    props: {
+
-        baseCls: "demo-button",
+    render() {
-    },
+        const items = [
-    render: function () {
+            {
-        var items = [{
                 type: "bi.button",
                 text: "一般按钮1111111111111",
                 level: "common",
@@ -40,187 +22,217 @@ Demo.Button = BI.inherit(BI.Widget, {
                         this.loaded();
                     }, 5 * 1000);
                 },
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示成功状态按钮",
                 level: "success",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示警告状态的按钮",
                 level: "warning",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示错误状态的按钮",
                 level: "error",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示忽略状态的按钮",
                 level: "ignore",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "普通灰化按钮",
                 disabled: true,
                 level: "success",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "忽略状态灰化按钮",
                 disabled: true,
                 level: "ignore",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "带图标的按钮",
                 // level: 'ignore',
                 iconCls: "close-font",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "一般按钮",
                 block: true,
                 level: "common",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示成功状态按钮",
                 block: true,
                 level: "success",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示警告状态的按钮",
                 block: true,
                 level: "warning",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示忽略状态的按钮",
                 block: true,
                 level: "ignore",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "普通灰化按钮",
                 block: true,
                 disabled: true,
                 level: "success",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "忽略状态灰化按钮",
                 block: true,
                 disabled: true,
                 level: "ignore",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "带图标的按钮",
                 block: true,
                 // level: 'ignore',
                 iconCls: "close-font",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "一般按钮",
                 clear: true,
                 level: "common",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示成功状态按钮",
                 clear: true,
                 level: "success",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示警告状态的按钮",
                 clear: true,
                 level: "warning",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "表示忽略状态的按钮",
                 clear: true,
                 level: "ignore",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "普通灰化按钮",
                 clear: true,
                 disabled: true,
                 level: "success",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "忽略状态灰化按钮",
                 clear: true,
                 disabled: true,
                 level: "ignore",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "带图标的按钮",
                 clear: true,
                 // level: 'ignore',
                 iconCls: "close-font",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.text_button",
                 text: "文字按钮",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "幽灵按钮（common）",
                 ghost: true,
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "幽灵按钮（common）",
                 ghost: true,
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "幽灵按钮（common）",
                 ghost: true,
                 level: "warning",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "幽灵按钮（common）",
                 ghost: true,
                 level: "error",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "幽灵按钮（common）",
                 ghost: true,
                 level: "success",
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "幽灵按钮（common）灰化",
                 disabled: true,
                 ghost: true,
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "弹出bubble",
-            bubble: function () {
+                bubble() {
-                return BI.parseInt(Math.random() * 100) % 10 + "提示";
+                    return `${parseInt(Math.random() * 100) % 10}提示`;
                 },
-            handler: function () {
+                handler() {
-                BI.Msg.toast("1111");
+                    Msg.toast("1111");
                 },
                 height: 30,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "自动撑开",
                 iconCls: "close-font",
@@ -230,100 +242,122 @@ Demo.Button = BI.inherit(BI.Widget, {
                 vgap: 16,
                 hgap: 100,
                 iconPosition: "bottom",
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "图标在下面的按钮",
                 iconCls: "close-font",
                 iconPosition: "bottom",
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "图标在左边的按钮",
                 iconCls: "close-font",
                 iconPosition: "left",
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "图标在右边的按钮",
                 iconCls: "close-font",
                 iconPosition: "right",
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "浅色的一般按钮",
                 iconCls: "plus-font",
                 light: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "浅色的成功按钮",
                 level: "success",
                 iconCls: "plus-font",
                 light: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "浅色的警告按钮",
                 level: "warning",
                 iconCls: "plus-font",
                 light: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "浅色的失败按钮",
                 level: "error",
                 cls: "hover-mask",
                 light: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "朴素的按钮",
                 level: "common",
                 plain: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "朴素的按钮",
                 level: "success",
                 plain: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "朴素的按钮",
                 level: "error",
                 plain: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "朴素的按钮",
                 level: "warning",
                 plain: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "朴素的按钮",
                 level: "ignore",
                 plain: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 plain: true,
                 level: "error",
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "朴素的按钮",
                 plain: true,
                 disabled: true,
-        }, {
+            },
+            {
                 type: "bi.button",
                 iconCls: "plus-font",
                 text: "点我，更改图标",
                 handler() {
                     this.i = this.i === undefined ? 0 : ++this.i;
-                const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
+                    const arr = [
+                        "text-background-font",
+                        "check-mark-ha-font",
+                        "close-font",
+                        "search-font",
+                        "date-change-h-font"
+                    ];
                     if (this.i >= arr.length) {
                         this.i = 0;
                     }
                     this.setIcon(arr[this.i]);
                 },
                 height: 24,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "带加载的按钮",
                 handler() {
@@ -333,7 +367,8 @@ Demo.Button = BI.inherit(BI.Widget, {
                         this.loaded();
                     }, 5 * 1000);
                 },
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "带加载的按钮",
                 iconCls: "circle-close-font",
@@ -344,7 +379,8 @@ Demo.Button = BI.inherit(BI.Widget, {
                         this.loaded();
                     }, 5 * 1000);
                 },
-        }, {
+            },
+            {
                 type: "bi.button",
                 clear: true,
                 text: "带加载的按钮",
@@ -356,14 +392,16 @@ Demo.Button = BI.inherit(BI.Widget, {
                         this.loaded();
                     }, 5 * 1000);
                 },
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "加载中的按钮",
                 loading: true,
                 handler() {
                     console.log("我是无法被触发的!");
                 },
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "自定义图标按钮（点我修改）",
                 icon: {
@@ -376,33 +414,36 @@ Demo.Button = BI.inherit(BI.Widget, {
                         this.loaded();
                     }, 5 * 1000);
                 },
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "文字偏左的按钮",
                 textAlign: "left",
                 width: 200,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "小于最小宽度的按钮",
                 width: 50,
-        }, {
+            },
+            {
                 type: "bi.button",
                 text: "一个文字超级超级长的 button, 他比按钮宽度还长。",
                 textWidth: 500,
                 width: 100,
-        }];
+            }
+        ];
 
         return {
             type: "bi.left",
             scrolly: true,
             vgap: 100,
             hgap: 20,
-            items: BI.map(items, function (index, value) {
+            items: map(items, (index, value) => {
                 return {
                     el: value,
                 };
             }),
         };
-    },
+    }
-});
+}
-BI.shortcut("demo.button", Demo.Button);

demo/js/base/button/demo.icon_button.js

@@ -1,24 +1,28 @@
-Demo.Button = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-button"
+@shortcut()
-    },
+export class Button extends Widget {
-    render: function () {
+    static xtype = "demo.icon_button";
-        var items = [
+
+    props = { baseCls: "demo-button" };
+
+    render() {
+        const items = [
             {
                 el: {
                     type: "bi.icon_button",
                     cls: "close-ha-font",
                     width: 25,
-                    height: 25
+                    height: 25,
-                }
+                },
             }
         ];
+
         return {
             type: "bi.left",
             vgap: 200,
             hgap: 20,
-            items: items
+            items,
         };
     }
-});
+}
-BI.shortcut("demo.icon_button", Demo.Button);

demo/js/base/button/demo.image_button.js

@@ -1,24 +1,28 @@
-Demo.Button = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-button"
+@shortcut()
-    },
+export class Button extends Widget {
-    render: function () {
+    static xtype = "demo.image_button";
-        var items = [
+
+    props = { baseCls: "demo-button" };
+
+    render() {
+        const items = [
             {
                 el: {
                     type: "bi.image_button",
                     src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128",
                     width: 100,
-                    height: 100
+                    height: 100,
-                }
+                },
             }
         ];
+        
         return {
             type: "bi.left",
             vgap: 200,
             hgap: 20,
-            items: items
+            items,
         };
     }
-});
+}
-BI.shortcut("demo.image_button", Demo.Button);

demo/js/base/button/demo.joker.icon.js

@@ -0,0 +1,26 @@
+import { shortcut, Widget } from "@/core";
+
+@shortcut()
+export class JokerIcon extends Widget {
+    static xtype = "demo.joker.icon";
+
+    render() {
+        const self = this;
+
+        return {
+            type: "bi.label",
+            cls: "anim-rotate",
+            ref (ref) {
+                self.text = ref;
+            },
+        };
+    }
+
+    loading() {
+        this.text.setText("🤡");
+    }
+
+    loaded() {
+        this.text.setText("");
+    }
+}

demo/js/base/button/demo.text_button.js

@@ -1,24 +1,28 @@
-Demo.Button = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-button"
+@shortcut()
-    },
+export class Button extends Widget {
-    render: function () {
+    static xtype = "demo.text_button";
-        var items = [
+
+    props = { baseCls: "demo-button" };
+
+    render() {
+        const items = [
             {
                 el: {
                     type: "bi.text_button",
                     text: "文字按钮",
                     height: 30,
-                    keyword: "w"
+                    keyword: "w",
-                }
+                },
             }
         ];
+
         return {
             type: "bi.left",
             vgap: 200,
             hgap: 20,
-            items: items
+            items,
         };
     }
-});
+}
-BI.shortcut("demo.text_button", Demo.Button);

demo/js/base/demo.html.js

@@ -1,20 +1,26 @@
-Demo.Html = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-html"
+@shortcut()
-    },
+export class Html extends Widget {
-    render: function () {
+    static xtype = "demo.html";
+
+    props = { baseCls: "demo-html" };
+
+    render() {
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.html",
-                text: "<h1>在bi.html标签中使用html原生标签</h1>"
+                    text: "<h1>在bi.html标签中使用html原生标签</h1>",
-            }, {
+                },
+                {
                     type: "bi.html",
-                text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>"
+                    text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>",
-            }],
+                }
+            ],
             hgap: 300,
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-BI.shortcut("demo.html", Demo.Html);

demo/js/base/demo.icon_label.js

@@ -1,20 +1,26 @@
-Demo.IconLabel = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-bubble"
+@shortcut()
-    },
+export class IconLabel extends Widget {
-    render: function () {
+    static xtype = "demo.icon_label";
+
+    props = { baseCls: "demo-bubble" };
+
+    render() {
         return {
             type: "bi.default",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
-                text: "这是一个icon标签,在加了border之后仍然是居中显示的"
+                    text: "这是一个icon标签,在加了border之后仍然是居中显示的",
-            }, {
+                },
+                {
                     type: "bi.icon_label",
                     cls: "date-font bi-border",
                     height: 40,
-                width: 40
+                    width: 40,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.icon_label", Demo.IconLabel);

demo/js/base/demo.label.js

@@ -1,82 +1,99 @@
-Demo.Label = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-label"
+@shortcut()
-    },
+export class Label extends Widget {
-    render: function () {
+    static xtype = "demo.label";
+
+    props = { baseCls: "demo-label" };
+
+    render() {
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     cls: "layout-bg6",
                     text: "这是一个label控件，默认居中",
                     disabled: true,
-                textAlign: "center"
+                    textAlign: "center",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg1",
                     text: "这是一个label控件, 高度为30，默认居中",
                     textAlign: "center",
-                height: 30
+                    height: 30,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg3",
                     text: "这是一个label控件，使用水平居左",
                     textAlign: "left",
-                height: 30
+                    height: 30,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg2",
                     text: "这是一个label控件，whiteSpace是normal，不设置高度，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
-                whiteSpace: "normal"
+                    whiteSpace: "normal",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg5",
-                text: "这是一个label控件，whiteSpace是默认的nowrap，不设置高度，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数"
+                    text: "这是一个label控件，whiteSpace是默认的nowrap，不设置高度，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg7",
                     text: "这是一个label控件，whiteSpace是默认的nowrap，高度为30，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
-                height: 30
+                    height: 30,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg3",
                     text: "这是一个label控件，whiteSpace设置为normal，高度为60，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                     whiteSpace: "normal",
-                height: 60
+                    height: 60,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg5",
                     text: "这是一个label控件，whiteSpace设置为normal，textHeight控制text的lineHeight，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                     whiteSpace: "normal",
                     textHeight: 30,
-                height: 60
+                    height: 60,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg1",
                     text: "这是一个label控件，whiteSpace设置为nowrap，textWidth控制text的width",
                     textWidth: 200,
-                height: 60
+                    height: 60,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg8",
                     text: "这是一个label控件，whiteSpace设置为normal，textWidth控制text的width，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                     whiteSpace: "normal",
                     textWidth: 200,
-                height: 60
+                    height: 60,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg7",
                     text: "whiteSpace为默认的nowrap，高度设置为60，宽度设置为300",
                     height: 60,
-                width: 300
+                    width: 300,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg6",
                     text: "设置了宽度300，高度60，whiteSpace设置为normal",
                     whiteSpace: "normal",
                     width: 300,
-                height: 60
+                    height: 60,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg8",
                     text: "textWidth设置为200，textHeight设置为30，width设置300，凑点字数看效果",
@@ -84,8 +101,9 @@ Demo.Label = BI.inherit(BI.Widget, {
                     textWidth: 200,
                     textHeight: 30,
                     height: 60,
-                whiteSpace: "normal"
+                    whiteSpace: "normal",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg1",
                     text: "textWidth设置为200，width设置300，看下水平居左的换行效果",
@@ -94,8 +112,9 @@ Demo.Label = BI.inherit(BI.Widget, {
                     textWidth: 200,
                     textHeight: 30,
                     height: 60,
-                whiteSpace: "normal"
+                    whiteSpace: "normal",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg2",
                     text: "使用默认的nowrap，再去设置textHeight，只会有一行的效果",
@@ -103,37 +122,46 @@ Demo.Label = BI.inherit(BI.Widget, {
                     width: 300,
                     textWidth: 200,
                     textHeight: 30,
-                height: 60
+                    height: 60,
-            }, {
+                },
+                {
                     type: "bi.left",
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             cls: "layout-bg3",
-                    text: "在float布局中自适应的,不设高度和宽度，文字多长这个就有多长"
+                            text: "在float布局中自适应的,不设高度和宽度，文字多长这个就有多长",
-                }],
+                        }
-                height: 30
+                    ],
-            }, {
+                    height: 30,
+                },
+                {
                     type: "bi.left",
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             cls: "layout-bg4",
                             text: "在float布局中自适应的，设置了宽度200，后面还有",
-                    width: 200
+                            width: 200,
-                }],
+                        }
-                height: 30
+                    ],
-            }, {
+                    height: 30,
+                },
+                {
                     type: "bi.left",
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             text: "在float布局中自适应的，设置了高度，文字多长这个就有多长",
                             cls: "layout-bg5",
-                    height: 30
+                            height: 30,
-                }],
+                        }
-                height: 30
+                    ],
-            }],
+                    height: 30,
+                }
+            ],
             hgap: 300,
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-BI.shortcut("demo.label", Demo.Label);

demo/js/base/demo.label.scene.js

@@ -1,14 +1,16 @@
-/**
+import { shortcut, Widget } from "@/core";
- * 整理所有label场景
+
- */
+@shortcut()
-Demo.LabelScene = BI.inherit(BI.Widget, {
+export class LabelScene extends Widget {
-    props: {
+    static xtype = "demo.label_scene";
-        baseCls: "demo-label"
+
-    },
+    props = { baseCls: "demo-label" };
-    render: function () {
+
-        var items = [];
+    render() {
+        const items = [];
 
-        items.push(this.createExpander("1.1.1 文字居中,有宽度和高度,有文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("1.1.1 文字居中,有宽度和高度,有文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg6",
                 text: "设置了textWidth,则一定是嵌套结构,因此需要用center_adapt布局容纳一下.为了实现不足一行时文字水平居中,超出一行时左对齐,需要设置maxWidth.",
@@ -16,10 +18,12 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                 height: 50,
                 width: 500,
                 textWidth: 200,
-            textAlign: "center"
+                textAlign: "center",
-        }));
+            })
+        );
 
-        items.push(this.createExpander("1.1.2 居中,有宽度和高度,有文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("1.1.2 居中,有宽度和高度,有文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg6",
                 text: "居中,有宽度高度,有文字宽度,whiteSpace为nowrap,maxWidth会限制文字",
@@ -27,20 +31,24 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                 height: 50,
                 width: 500,
                 textWidth: 350,
-            textAlign: "center"
+                textAlign: "center",
-        }));
+            })
+        );
 
-        items.push((this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg6",
                 text: "居中,有宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
                 width: 500,
                 textWidth: 200,
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父容器拉满", {
+        items.push(
+            this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父容器拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -52,36 +60,42 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             whiteSpace: "normal",
                             width: 500,
                             textWidth: 200,
-                        textAlign: "center"
+                            textAlign: "center",
                         },
                         top: 0,
                         left: 0,
-                    bottom: 0
+                        bottom: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.2.2 居中,有宽度无高度,有文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("1.2.2 居中,有宽度无高度,有文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg6",
                 text: "居中,有宽度无高度,有文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "nowrap",
                 width: 500,
                 textWidth: 350,
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.3.1 居中,有宽度和高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("1.3.1 居中,有宽度和高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,有宽度高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal",
                 width: 500,
                 whiteSpace: "normal",
                 textAlign: "center",
-            height: 50
+                height: 50,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.3.2 居中,有宽度无高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("1.3.2 居中,有宽度无高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -92,35 +106,41 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             text: "居中,有宽度无高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal",
                             width: 500,
                             whiteSpace: "normal",
-                        textAlign: "center"
+                            textAlign: "center",
                         },
                         top: 0,
                         left: 0,
-                    bottom: 0
+                        bottom: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.4 居中,有宽度和高度,无文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("1.4 居中,有宽度和高度,无文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,有宽度500有高度50,无文字宽度,whiteSpace为nowrap,此处无需两层div,设置text即可,然后设置line-height为传入高度即可实现垂直方向居中",
                 width: 500,
                 whiteSpace: "nowrap",
                 textAlign: "center",
-            height: 50
+                height: 50,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.5.1 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("1.5.1 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 width: 500,
                 whiteSpace: "nowrap",
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.5.2 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
+        items.push(
+            this.createExpander("1.5.2 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 50,
                 items: [
@@ -131,34 +151,40 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             width: 500,
                             whiteSpace: "nowrap",
-                        textAlign: "center"
+                            textAlign: "center",
                         },
                         top: 0,
                         left: 0,
-                    bottom: 0
+                        bottom: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.6.1 居中,无宽度无高度,有文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("1.6.1 居中,无宽度无高度,有文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,无宽度,有文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 textWidth: 500,
                 whiteSpace: "nowrap",
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.6.2 居中,无宽度无高度,有文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("1.6.2 居中,无宽度无高度,有文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 textWidth: 500,
                 whiteSpace: "normal",
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.6.3 居中,无宽度无,有文字宽度,whiteSpace为normal,被父级拉满", {
+        items.push(
+            this.createExpander("1.6.3 居中,无宽度无,有文字宽度,whiteSpace为normal,被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -169,25 +195,29 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             textWidth: 500,
                             whiteSpace: "normal",
-                        textAlign: "center"
+                            textAlign: "center",
                         },
                         left: 0,
                         right: 0,
                         top: 0,
-                    bottom: 0
+                        bottom: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.7.1 居中,无宽度无高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("1.7.1 居中,无宽度无高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.7.2 居中,无宽度无高度,无文字宽度,whiteSpace为normal,被父级拉满", {
+        items.push(
+            this.createExpander("1.7.2 居中,无宽度无高度,无文字宽度,whiteSpace为normal,被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -197,43 +227,51 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             cls: "layout-bg3",
                             text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "normal",
-                        textAlign: "center"
+                            textAlign: "center",
                         },
                         left: 0,
                         right: 0,
                         top: 0,
-                    bottom: 0
+                        bottom: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.7.3 居中,无宽度有高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("1.7.3 居中,无宽度有高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,无宽度有高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
                 height: 50,
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.8 居中,无宽度有高度,无文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("1.8 居中,无宽度有高度,无文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,无宽度有高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "nowrap",
                 height: 50,
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.9 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("1.9 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg3",
                 text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "nowrap",
-            textAlign: "center"
+                textAlign: "center",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("1.9.1 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
+        items.push(
+            this.createExpander("1.9.1 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 50,
                 items: [
@@ -243,17 +281,19 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             cls: "layout-bg3",
                             text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "nowrap",
-                        textAlign: "center"
+                            textAlign: "center",
                         },
                         top: 0,
                         left: 0,
                         right: 0,
-                    bottom: 0
+                        bottom: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.1.1 居左,有宽度有高度,有文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("2.1.1 居左,有宽度有高度,有文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
@@ -261,10 +301,12 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                 textAlign: "left",
                 textWidth: 300,
                 height: 50,
-            width: 500
+                width: 500,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.1.2 居左,有宽度有高度,有文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("2.1.2 居左,有宽度有高度,有文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
@@ -272,20 +314,24 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                 textAlign: "left",
                 textWidth: 300,
                 height: 50,
-            width: 500
+                width: 500,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.2.1 居左,有宽度无高度,有文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("2.2.1 居左,有宽度无高度,有文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,有宽度无高度,有文字宽度,whiteSpace为normal，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
                 textAlign: "left",
                 textWidth: 300,
-            width: 500
+                width: 500,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.2.2 居左,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.2.2 居左,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -297,26 +343,30 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             whiteSpace: "normal",
                             textAlign: "left",
                             textWidth: 300,
-                        width: 500
+                            width: 500,
                         },
                         top: 0,
                         bottom: 0,
-                    left: 0
+                        left: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.2.3 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("2.2.3 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,有宽度无高度,有文字宽度,whiteSpace为nowrap，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "nowrap",
                 textAlign: "left",
                 textWidth: 300,
-            width: 500
+                width: 500,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.2.4 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.2.4 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -328,16 +378,18 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             whiteSpace: "nowrap",
                             textAlign: "left",
                             textWidth: 300,
-                        width: 500
+                            width: 500,
                         },
                         top: 0,
                         bottom: 0,
-                    left: 0
+                        left: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.3.1 居左,有宽度有高度,无文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("2.3.1 居左,有宽度有高度,无文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,有宽度有高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
@@ -345,29 +397,35 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                 textAlign: "left",
                 height: 50,
                 vgap: 5,
-            width: 500
+                width: 500,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.3.2 居左,有宽度有高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("2.3.2 居左,有宽度有高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,有宽度有高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
                 textAlign: "left",
                 height: 50,
-            width: 500
+                width: 500,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.4.1 居左,有宽度无高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("2.4.1 居左,有宽度无高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
                 textAlign: "left",
-            width: 500
+                width: 500,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.4.2 居左,有宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.4.2 居左,有宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -378,25 +436,29 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "normal",
                             textAlign: "left",
-                        width: 500
+                            width: 500,
                         },
                         top: 0,
                         left: 0,
-                    bottom: 0
+                        bottom: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.5.1 居左,无宽度无高度,有文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("2.5.1 居左,无宽度无高度,有文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
                 textAlign: "left",
-            textWidth: 300
+                textWidth: 300,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.5.2 居左,无宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.5.2 居左,无宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -407,26 +469,30 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "normal",
                             textAlign: "left",
-                        textWidth: 300
+                            textWidth: 300,
                         },
                         top: 0,
                         left: 0,
                         bottom: 0,
-                    right: 0
+                        right: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.5.3 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("2.5.3 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "nowrap",
                 textAlign: "left",
-            textWidth: 300
+                textWidth: 300,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.5.4 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.5.4 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -437,44 +503,52 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "nowrap",
                             textAlign: "left",
-                        textWidth: 300
+                            textWidth: 300,
                         },
                         top: 0,
                         left: 0,
                         bottom: 0,
-                    right: 0
+                        right: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.6.1 居左,无宽度有高度,无文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("2.6.1 居左,无宽度有高度,无文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,无宽度有高度,无文字宽度,whiteSpace为nowrap，注意这个是设置了vgap的,为了实现居中,lineHeight要做计算,才能准确的垂直居中",
                 whiteSpace: "nowrap",
                 textAlign: "left",
                 vgap: 10,
-            height: 50
+                height: 50,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.6.2 居左,无宽度有高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("2.6.2 居左,无宽度有高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,无宽度有高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
                 textAlign: "left",
-            height: 50
+                height: 50,
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.7.1 居左,无宽度无高度,无文字宽度,whiteSpace为normal", {
+        items.push(
+            this.createExpander("2.7.1 居左,无宽度无高度,无文字宽度,whiteSpace为normal", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "normal",
-            textAlign: "left"
+                textAlign: "left",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.7.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.7.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -484,25 +558,29 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             cls: "layout-bg2",
                             text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "normal",
-                        textAlign: "left"
+                            textAlign: "left",
                         },
                         top: 0,
                         left: 0,
                         bottom: 0,
-                    right: 0
+                        right: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.7.3 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap", {
+        items.push(
+            this.createExpander("2.7.3 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap", {
                 type: "bi.label",
                 cls: "layout-bg2",
                 text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                 whiteSpace: "nowrap",
-            textAlign: "left"
+                textAlign: "left",
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.7.4 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.7.4 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -512,17 +590,19 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             cls: "layout-bg2",
                             text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "nowrap",
-                        textAlign: "left"
+                            textAlign: "left",
                         },
                         top: 0,
                         left: 0,
                         bottom: 0,
-                    right: 0
+                        right: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.8 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.8 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -532,17 +612,19 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             cls: "layout-bg2",
                             text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "nowrap",
-                        textAlign: "left"
+                            textAlign: "left",
                         },
                         top: 0,
                         left: 0,
                         bottom: 0,
-                    right: 0
+                        right: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
-        items.push((this.createExpander("2.8.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", {
+        items.push(
+            this.createExpander("2.8.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", {
                 type: "bi.absolute",
                 height: 100,
                 items: [
@@ -552,25 +634,26 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                             cls: "layout-bg2",
                             text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数",
                             whiteSpace: "normal",
-                        textAlign: "left"
+                            textAlign: "left",
                         },
                         top: 0,
                         left: 0,
                         bottom: 0,
-                    right: 0
+                        right: 0,
                     }
-            ]
+                ],
-        })));
+            })
+        );
 
         return {
             type: "bi.vertical",
-            items: items,
+            items,
             hgap: 300,
-            vgap: 20
+            vgap: 20,
         };
-    },
+    }
 
-    createExpander: function (text, popup) {
+    createExpander(text, popup) {
         return {
             type: "bi.vertical",
             items: [
@@ -578,13 +661,13 @@ Demo.LabelScene = BI.inherit(BI.Widget, {
                     type: "bi.label",
                     cls: "demo-font-weight-bold",
                     textAlign: "left",
-                    text: text,
+                    text,
-                    height: 30
+                    height: 30,
-                }, {
+                },
-                    el: popup
+                {
+                    el: popup,
                 }
-            ]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.label_scene", Demo.LabelScene);

demo/js/base/demo.message.js

@@ -1,8 +1,13 @@
-Demo.Message = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+import { Msg } from "@/base";
-        baseCls: "demo-bubble"
+
-    },
+@shortcut()
-    render: function () {
+export class Message extends Widget {
+    static xtype = "demo.message";
+
+    props = { baseCls: "demo-bubble" };
+
+    render() {
         return {
             type: "bi.center_adapt",
             items: [
@@ -11,13 +16,12 @@ Demo.Message = BI.inherit(BI.Widget, {
                         type: "bi.button",
                         text: "点击我弹出一个消息框",
                         height: 30,
-                        handler: function () {
+                        handler() {
-                            BI.Msg.alert("测试消息框", "我是测试消息框的内容");
+                            Msg.alert("测试消息框", "我是测试消息框的内容");
-                        }
+                        },
-                    }
+                    },
                 }
-            ]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.message", Demo.Message);

demo/js/base/demo.pager.js

@@ -1,27 +1,35 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.pager";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     height: 30,
-                text: "默认的分页"
+                    text: "默认的分页",
-            }, {
+                },
+                {
                     type: "bi.pager",
                     height: 50,
                     pages: 18,
                     groups: 5,
                     curr: 6,
                     first: "首页",
-                last: "尾页"
+                    last: "尾页",
-            }, {
+                },
+                {
                     type: "bi.label",
                     height: 30,
-                text: "显示上一页、下一页、首页、尾页"
+                    text: "显示上一页、下一页、首页、尾页",
-            }, {
+                },
+                {
                     type: "bi.pager",
                     dynamicShow: false,
                     height: 50,
@@ -29,12 +37,14 @@ Demo.Func = BI.inherit(BI.Widget, {
                     groups: 5,
                     curr: 1,
                     first: "首页>",
-                last: "<尾页"
+                    last: "<尾页",
-            }, {
+                },
+                {
                     type: "bi.label",
                     height: 30,
-                text: "显示上一页、下一页"
+                    text: "显示上一页、下一页",
-            }, {
+                },
+                {
                     type: "bi.pager",
                     dynamicShow: false,
                     dynamicShowFirstLast: true,
@@ -43,12 +53,14 @@ Demo.Func = BI.inherit(BI.Widget, {
                     groups: 5,
                     curr: 1,
                     first: "首页>",
-                last: "<尾页"
+                    last: "<尾页",
-            }, {
+                },
+                {
                     type: "bi.label",
                     height: 30,
-                text: "自定义上一页、下一页"
+                    text: "自定义上一页、下一页",
-            }, {
+                },
+                {
                     type: "bi.pager",
                     dynamicShow: false,
                     height: 50,
@@ -62,9 +74,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                         value: "prev",
                         once: false,
                         height: 30,
-                    handler: function () {
+                        handler() {},
-
-                    }
                     },
                     next: {
                         type: "bi.button",
@@ -72,15 +82,15 @@ Demo.Func = BI.inherit(BI.Widget, {
                         text: "下一页",
                         value: "next",
                         once: false,
-                    handler: function () {
+                        handler() {},
-
+                    },
-                    }
+                },
-                }
+                {
-            }, {
                     type: "bi.label",
                     height: 30,
-                text: "不知道总页数的情况(测试条件 1<=page<=3)"
+                    text: "不知道总页数的情况(测试条件 1<=page<=3)",
-            }, {
+                },
+                {
                     type: "bi.pager",
                     dynamicShow: false,
                     height: 50,
@@ -93,9 +103,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                         value: "prev",
                         once: false,
                         height: 30,
-                    handler: function () {
+                        handler() {},
-
-                    }
                     },
                     next: {
                         type: "bi.button",
@@ -103,18 +111,16 @@ Demo.Func = BI.inherit(BI.Widget, {
                         text: "下一页",
                         value: "next",
                         once: false,
-                    handler: function () {
+                        handler() {},
-
-                    }
                     },
-                hasPrev: function (v) {
+                    hasPrev(v) {
                         return v > 1;
                     },
-                hasNext: function (v) {
+                    hasNext(v) {
                         return v < 3;
+                    },
                 }
-            }]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.pager", Demo.Func);

demo/js/base/editor/demo.editor.js

@@ -1,9 +1,14 @@
-Demo.Editor = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+import { Editor as BIEditor} from "@/base";
-        baseCls: "demo-editor",
+
-    },
+@shortcut()
-    render: function () {
+export class Editor extends Widget {
-        var editor1 = BI.createWidget({
+    static xtype = "demo.editor";
+
+    props = { baseCls: "demo-editor" };
+
+    render() {
+        const editor1 = createWidget({
             type: "bi.editor",
             cls: "bi-border",
             watermark: "报错信息显示在控件上方",
@@ -11,16 +16,16 @@ Demo.Editor = BI.inherit(BI.Widget, {
             width: 200,
             height: 24,
         });
-        editor1.on(BI.Editor.EVENT_ENTER, function () {
+        editor1.on(BIEditor.EVENT_ENTER, () => {
             editor1.blur();
         });
-        var editor2 = BI.createWidget({
+        const editor2 = createWidget({
             type: "bi.editor",
             cls: "bi-border",
             watermark: "输入'a'会有错误信息",
             disabled: true,
             errorText: "字段不可重名",
-            validationChecker: function (v) {
+            validationChecker(v) {
                 if (v == "a") {
                     return false;
                 }
@@ -31,27 +36,27 @@ Demo.Editor = BI.inherit(BI.Widget, {
             width: 200,
             height: 24,
         });
-        var editor3 = BI.createWidget({
+        const editor3 = createWidget({
             type: "bi.editor",
             cls: "bi-border",
             watermark: "输入'a'会有错误信息且回车键不能退出编辑",
             errorText: "字段不可重名",
             value: "a",
-            validationChecker: function (v) {
+            validationChecker(v) {
                 if (v == "a") {
                     return false;
                 }
 
                 return true;
             },
-            quitChecker: function (v) {
+            quitChecker(v) {
                 return false;
             },
             allowBlank: true,
             width: 300,
             height: 24,
         });
-        var editor4 = BI.createWidget({
+        const editor4 = createWidget({
             type: "bi.editor",
             cls: "bi-border",
             inputType: "password",
@@ -61,30 +66,35 @@ Demo.Editor = BI.inherit(BI.Widget, {
             width: 300,
             height: 24,
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: editor1,
                     left: 0,
                     top: 0,
-            }, {
+                },
+                {
                     el: editor2,
                     left: 250,
                     top: 30,
-            }, {
+                },
+                {
                     el: editor3,
                     left: 500,
                     top: 60,
-            }, {
+                },
+                {
                     el: editor4,
                     left: 700,
                     top: 60,
-            }, {
+                },
+                {
                     el: {
                         type: "bi.button",
                         text: "disable",
-                    handler: function () {
+                        handler() {
                             editor1.setEnable(false);
                             editor2.setEnable(false);
                             editor3.setEnable(false);
@@ -93,11 +103,12 @@ Demo.Editor = BI.inherit(BI.Widget, {
                     },
                     left: 100,
                     bottom: 60,
-            }, {
+                },
+                {
                     el: {
                         type: "bi.button",
                         text: "enable",
-                    handler: function () {
+                        handler() {
                             editor1.setEnable(true);
                             editor2.setEnable(true);
                             editor3.setEnable(true);
@@ -106,8 +117,8 @@ Demo.Editor = BI.inherit(BI.Widget, {
                     },
                     left: 200,
                     bottom: 60,
-            }],
+                }
+            ],
         });
-    },
+    }
-});
+}
-BI.shortcut("demo.editor", Demo.Editor);

demo/js/base/editor/demo.multifile_editor.js

@@ -1,26 +1,33 @@
-Demo.CodeEditor = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-editor"
+@shortcut()
-    },
+export class CodeEditor extends Widget {
-    render: function () {
+    static xtype = "demo.multifile_editor";
+
+    props = { baseCls: "demo-editor" };
+
+    render() {
         return {
             type: "bi.absolute",
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.adaptive",
                         cls: "layout-bg1",
-                    items: [{
+                        items: [
+                            {
                                 type: "bi.multifile_editor",
                                 width: 400,
-                        height: 300
+                                height: 300,
-                    }],
+                            }
+                        ],
                         width: 400,
-                    height: 300
+                        height: 300,
                     },
                     top: 50,
-                left: 50
+                    left: 50,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.multifile_editor", Demo.CodeEditor);

demo/js/base/editor/demo.textarea_editor.js

@@ -1,44 +1,52 @@
-Demo.CodeEditor = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, isNotEmptyString } from "@/core";
-    props: {
+import { TextAreaEditor, Msg } from "@/base";
-        baseCls: "demo-editor"
+ 
-    },
+@shortcut()
-    render: function () {
+export class CodeEditor extends Widget {
-        var editor = BI.createWidget({
+    static xtype = "demo.textarea_editor";
+
+    props = { baseCls: "demo-editor" };
+
+    render() {
+        const editor = createWidget({
             type: "bi.textarea_editor",
             cls: "bi-border",
             width: 600,
             height: 400,
             watermark: "请输入内容",
             errorText: "检测内容有误",
-            validationChecker: function (v) {
+            validationChecker(v) {
-                return BI.isNotEmptyString(v);
+                return isNotEmptyString(v);
             },
         });
-        editor.on(BI.TextAreaEditor.EVENT_FOCUS, function () {
+        editor.on(TextAreaEditor.EVENT_FOCUS, () => {
-            BI.Msg.toast("Focus");
+            Msg.toast("Focus");
         });
-        editor.on(BI.TextAreaEditor.EVENT_BLUR, function () {
+        editor.on(TextAreaEditor.EVENT_BLUR, () => {
-            BI.Msg.toast("Blur");
+            Msg.toast("Blur");
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
             hgap: 30,
             vgap: 20,
-            items: [editor, {
+            items: [
+                editor,
+                {
                     type: "bi.button",
                     text: "getValue",
-                handler: function () {
+                    handler() {
-                    BI.Msg.toast(JSON.stringify(editor.getValue()));
+                        Msg.toast(JSON.stringify(editor.getValue()));
-                }
+                    },
-            }, {
+                },
+                {
                     type: "bi.button",
                     text: "setValue",
-                handler: function () {
+                    handler() {
                         editor.setValue("测试数据");
+                    },
                 }
-            }]
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.textarea_editor", Demo.CodeEditor);

demo/js/base/tip/demo.bubble.js

@@ -1,77 +1,84 @@
-Demo.Bubble = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Bubbles } from "@/core";
-    props: {
+
-        baseCls: "demo-bubble"
+@shortcut()
-    },
+export class Bubble extends Widget {
-    render: function () {
+    static xtype = "demo.bubble";
-        var btns = [];
+
-        var items = [
+    props = { baseCls: "demo-bubble" };
+
+    render() {
+        const btns = [];
+        const items = [
             {
                 el: {
-                    ref: function (_ref) {
+                    ref(_ref) {
                         btns.push(_ref);
                     },
                     type: "bi.button",
                     text: "bubble测试(消息)",
                     title: "123",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Bubbles.show("singleBubble1", "bubble测试", this, {
+                        Bubbles.show("singleBubble1", "bubble测试", this, {
-                            level: "common"
+                            level: "common",
                         });
-                    }
+                    },
-                }
+                },
-            }, {
+            },
+            {
                 el: {
-                    ref: function (_ref) {
+                    ref(_ref) {
                         btns.push(_ref);
                     },
                     type: "bi.button",
                     text: "bubble测试(成功)",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Bubbles.show("singleBubble2", "bubble测试", this, {
+                        Bubbles.show("singleBubble2", "bubble测试", this, {
                             offsetStyle: "center",
-                            level: "success"
+                            level: "success",
                         });
-                    }
+                    },
-                }
+                },
-            }, {
+            },
+            {
                 el: {
-                    ref: function (_ref) {
+                    ref(_ref) {
                         btns.push(_ref);
                     },
                     type: "bi.button",
                     text: "bubble测试(错误)",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Bubbles.show("singleBubble3", "bubble测试", this, {
+                        Bubbles.show("singleBubble3", "bubble测试", this, {
                             offsetStyle: "right",
-                            level: "error"
+                            level: "error",
                         });
-                    }
+                    },
-                }
+                },
-            }, {
+            },
+            {
                 el: {
-                    ref: function (_ref) {
+                    ref(_ref) {
                         btns.push(_ref);
                     },
                     type: "bi.button",
                     text: "bubble测试(警告)",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Bubbles.show("singleBubble4", "bubble测试", this, {
+                        Bubbles.show("singleBubble4", "bubble测试", this, {
-                            level: "warning"
+                            level: "warning",
                         });
-                    }
+                    },
-                }
+                },
             }
         ];
+
         return {
             type: "bi.left",
             vgap: 200,
             hgap: 20,
-            items: items
+            items,
         };
     }
-});
+}
-BI.shortcut("demo.bubble", Demo.Bubble);

demo/js/base/tip/demo.title.js

@@ -1,26 +1,33 @@
-Demo.Title = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-title"
+@shortcut()
-    },
+export class Title extends Widget {
-    render: function () {
+    static xtype = "demo.title";
+
+    props = { baseCls: "demo-title" };
+
+    render() {
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     cls: "layout-bg1",
                     height: 50,
                     title: "title提示",
                     text: "移上去有title提示",
-                textAlign: "center"
+                    textAlign: "center",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg6",
                     height: 50,
                     disabled: true,
                     warningTitle: "title错误提示",
                     text: "移上去有title错误提示",
-                textAlign: "center"
+                    textAlign: "center",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg2",
                     height: 50,
@@ -29,31 +36,33 @@ Demo.Title = BI.inherit(BI.Widget, {
                     title: "自定义title提示效果",
                     warningTitle: "自定义title提示效果",
                     text: "自定义title提示效果",
-                textAlign: "center"
+                    textAlign: "center",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg3",
                     height: 50,
                     title: () => "函数返回值作为title提示",
                     text: "title提示支持函数",
-                textAlign: "center"
+                    textAlign: "center",
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg4",
                     height: 50,
-                title: function () {
+                    title() {
                         return {
                             level: "success",
                             text: "自定义title\n提示效果",
-                        textAlign: "center"
+                            textAlign: "center",
                         };
                     },
                     text: "title提示支持对象,作为bi.tooltip的props",
-                textAlign: "center"
+                    textAlign: "center",
-            }],
+                }
+            ],
             hgap: 300,
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-BI.shortcut("demo.title", Demo.Title);

demo/js/base/tip/demo.toast.js

@@ -1,74 +1,86 @@
-Demo.Toast = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+import { Msg } from "@/base";
-        baseCls: "demo-toast"
+
-    },
+@shortcut()
-    render: function () {
+export class Toast extends Widget {
-        var items = [
+    static xtype = "demo.toast";
+
+    props = { baseCls: "demo-toast" };
+
+    render() {
+        const items = [
             {
                 el: {
                     type: "bi.button",
                     text: "简单Toast测试(success)",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Msg.toast("这是一条简单的数据", {
+                        Msg.toast("这是一条简单的数据", {
-                            level: "success"
+                            level: "success",
                         });
-                    }
+                    },
-                }
+                },
-            }, {
+            },
+            {
                 el: {
                     type: "bi.button",
                     text: "很长的Toast测试(normal)",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", {
+                        Msg.toast(
-
+                            "这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据",
-                        });
+                            {}
-                    }
+                        );
-                }
+                    },
-            }, {
+                },
+            },
+            {
                 el: {
                     type: "bi.button",
                     text: "非常长的Toast测试(warning)",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", {
+                        Msg.toast(
+                            "这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据",
+                            {
                                 level: "warning",
-                            autoClose: false
+                                autoClose: false,
-                        });
-                    }
                             }
-            }, {
+                        );
+                    },
+                },
+            },
+            {
                 el: {
                     type: "bi.button",
                     text: "错误提示Toast测试(error)",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Msg.toast("错误提示Toast测试", {
+                        Msg.toast("错误提示Toast测试", {
-                            level: "error"
+                            level: "error",
                         });
-                    }
+                    },
-                }
+                },
-            }, {
+            },
+            {
                 el: {
                     type: "bi.button",
                     text: "错误提示Toast测试(error), 此toast不会自动消失",
                     height: 30,
-                    handler: function () {
+                    handler() {
-                        BI.Msg.toast("错误提示Toast测试", {
+                        Msg.toast("错误提示Toast测试", {
-                            autoClose: false
+                            autoClose: false,
                         });
-                    }
+                    },
-                }
+                },
             }
         ];
-        BI.createWidget({
+        createWidget({
             type: "bi.left",
             element: this,
             vgap: 200,
             hgap: 20,
-            items: items
+            items,
         });
     }
-});
+}
-BI.shortcut("demo.toast", Demo.Toast);

demo/js/base/tree/demo.part_tree.js

@@ -1,81 +1,97 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, TreeView, isNull } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.part_tree";
+
+    props = { baseCls: "demo-func" };
 
-    mounted: function () {
+    mounted() {
         this.partTree.stroke({
-            keyword: "1"
+            keyword: "1",
         });
-    },
+    }
+
+    render() {
+        const self = this;
 
-    render: function () {
-        var self = this;
         return {
             type: "bi.vtape",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     height: 50,
-                text: "先初始化一份数据，然后再异步获取数据的树"
+                    text: "先初始化一份数据，然后再异步获取数据的树",
-            }, {
+                },
+                {
                     type: "bi.part_tree",
-                ref: function (_ref) {
+                    ref(_ref) {
                         self.partTree = _ref;
                     },
                     paras: {
-                    selectedValues: {"1": {}, "2": {"1": {}}}
+                        selectedValues: { 1: {}, 2: { 1: {} } },
                     },
-                itemsCreator: function (op, callback) {
+                    itemsCreator(op, callback) {
-                    if (op.type === BI.TreeView.REQ_TYPE_INIT_DATA) {
+                        if (op.type === TreeView.REQ_TYPE_INIT_DATA) {
                             callback({
-                            items: [{
+                                items: [
+                                    {
                                         id: "1",
                                         text: 1,
                                         isParent: true,
-                                open: true
+                                        open: true,
-                            }, {
+                                    },
+                                    {
                                         id: "11",
                                         pId: "1",
                                         text: 11,
                                         isParent: true,
-                                open: true
+                                        open: true,
-                            }, {
+                                    },
+                                    {
                                         id: "111",
                                         pId: "11",
                                         text: 111,
-                                isParent: true
+                                        isParent: true,
-                            }, {
+                                    },
+                                    {
                                         id: "2",
-                                text: 2
+                                        text: 2,
-                            }, {
+                                    },
+                                    {
                                         id: "3",
-                                text: 3
+                                        text: 3,
-                            }],
+                                    }
-                            hasNext: BI.isNull(op.id)
+                                ],
+                                hasNext: isNull(op.id),
                             });
+
                             return;
                         }
                         callback({
-                        items: [{
+                            items: [
-                            id: (op.id || "") + "1",
+                                {
+                                    id: `${op.id || ""}1`,
                                     pId: op.id,
                                     text: 1,
-                            isParent: true
+                                    isParent: true,
-                        }, {
+                                },
-                            id: (op.id || "") + "2",
+                                {
+                                    id: `${op.id || ""}2`,
                                     pId: op.id,
-                            text: 2
+                                    text: 2,
-                        }, {
+                                },
-                            id: (op.id || "") + "3",
+                                {
+                                    id: `${op.id || ""}3`,
                                     pId: op.id,
-                            text: 3
+                                    text: 3,
-                        }],
+                                }
-                        hasNext: BI.isNull(op.id)
+                            ],
+                            hasNext: isNull(op.id),
                         });
+                    },
                 }
-            }]
+            ],
         };
-
     }
-});
+}
-BI.shortcut("demo.part_tree", Demo.Func);

demo/js/base/tree/demo.sync_tree.js

@@ -1,19 +1,23 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, isNull } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.sync_tree";
 
-    mounted: function () {
+    props = { baseCls: "demo-func" };
+
+    mounted() {
         this.syncTree1.stroke({
-            keyword: "1"
+            keyword: "1",
         });
         this.syncTree2.stroke({
-            keyword: "1"
+            keyword: "1",
         });
-    },
+    }
+
+    render() {
+        const self = this;
 
-    render: function () {
-        var self = this;
         return {
             type: "bi.vtape",
             rowSize: [0.5, 0.5],
@@ -24,39 +28,44 @@ Demo.Func = BI.inherit(BI.Widget, {
                         {
                             type: "bi.label",
                             height: 50,
-                            text: "可以异步获取数据的树"
+                            text: "可以异步获取数据的树",
-                        }, {
+                        },
+                        {
                             type: "bi.async_tree",
-                            ref: function (_ref) {
+                            ref(_ref) {
                                 self.syncTree1 = _ref;
                             },
                             paras: {
-                                selectedValues: { "1": {}, "2": { "1": {} } }
+                                selectedValues: { 1: {}, 2: { 1: {} } },
                             },
-                            itemsCreator: function (op, callback) {
+                            itemsCreator(op, callback) {
                                 callback({
-                                    items: [{
+                                    items: [
-                                        id: (op.id || "") + "1",
+                                        {
+                                            id: `${op.id || ""}1`,
                                             pId: op.id,
-                                        text: (op.id || "") + "1",
+                                            text: `${op.id || ""}1`,
                                             isParent: true,
-                                        iconCls: "close-h-font"
+                                            iconCls: "close-h-font",
-                                    }, {
+                                        },
-                                        id: (op.id || "") + "2",
+                                        {
+                                            id: `${op.id || ""}2`,
                                             pId: op.id,
-                                        text: (op.id || "") + "2",
+                                            text: `${op.id || ""}2`,
-                                        iconCls: "search-font"
+                                            iconCls: "search-font",
-                                    }, {
+                                        },
-                                        id: (op.id || "") + "3",
+                                        {
+                                            id: `${op.id || ""}3`,
                                             pId: op.id,
-                                        text: (op.id || "") + "3",
+                                            text: `${op.id || ""}3`,
-                                        iconCls: "date-font"
+                                            iconCls: "date-font",
-                                    }],
-                                    hasNext: BI.isNull(op.id)
-                                });
                                         }
+                                    ],
+                                    hasNext: isNull(op.id),
+                                });
                             },
-                    ]
+                        }
+                    ],
                 },
                 {
                     type: "bi.vtape",
@@ -64,44 +73,47 @@ Demo.Func = BI.inherit(BI.Widget, {
                         {
                             type: "bi.label",
                             height: 50,
-                            text: "showIcon属性搭配节点iconCls,可以显示图标"
+                            text: "showIcon属性搭配节点iconCls,可以显示图标",
-                        }, {
+                        },
+                        {
                             type: "bi.async_tree",
-                            ref: function (_ref) {
+                            ref(_ref) {
                                 self.syncTree2 = _ref;
                             },
                             paras: {
-                                selectedValues: { "1": {}, "2": { "1": {} } }
+                                selectedValues: { 1: {}, 2: { 1: {} } },
                             },
                             showIcon: true,
-                            itemsCreator: function (op, callback) {
+                            itemsCreator(op, callback) {
                                 callback({
-                                    items: [{
+                                    items: [
-                                        id: (op.id || "") + "1",
+                                        {
+                                            id: `${op.id || ""}1`,
                                             pId: op.id,
-                                        text: (op.id || "") + "1",
+                                            text: `${op.id || ""}1`,
                                             isParent: true,
-                                        iconCls: "close-h-font"
+                                            iconCls: "close-h-font",
-                                    }, {
+                                        },
-                                        id: (op.id || "") + "2",
+                                        {
+                                            id: `${op.id || ""}2`,
                                             pId: op.id,
-                                        text: (op.id || "") + "2",
+                                            text: `${op.id || ""}2`,
-                                        iconCls: "search-font"
+                                            iconCls: "search-font",
-                                    }, {
+                                        },
-                                        id: (op.id || "") + "3",
+                                        {
+                                            id: `${op.id || ""}3`,
                                             pId: op.id,
-                                        text: (op.id || "") + "3",
+                                            text: `${op.id || ""}3`,
-                                        iconCls: "date-font"
+                                            iconCls: "date-font",
-                                    }],
-                                    hasNext: BI.isNull(op.id)
-                                });
                                         }
+                                    ],
+                                    hasNext: isNull(op.id),
+                                });
                             },
-                    ]
                         }
-            ]
+                    ],
+                }
+            ],
         };
-
     }
-});
+}
-BI.shortcut("demo.sync_tree", Demo.Func);

demo/js/base/tree/demo.tree_view.js

@@ -1,52 +1,57 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.tree_view";
+
+    props = { baseCls: "demo-func" };
 
-    _createDefaultTree: function () {
+    _createDefaultTree() {
-        var tree = BI.createWidget({
+        const tree = createWidget({
-            type: "bi.tree_view"
+            type: "bi.tree_view",
         });
         tree.initTree([
-            {id: 1, pId: 0, text: "test1", open: true},
+            { id: 1, pId: 0, text: "test1", open: true },
-            {id: 11, pId: 1, text: "test11"},
+            { id: 11, pId: 1, text: "test11" },
-            {id: 12, pId: 1, text: "test12"},
+            { id: 12, pId: 1, text: "test12" },
-            {id: 111, pId: 11, text: "test111"},
+            { id: 111, pId: 11, text: "test111" },
-            {id: 2, pId: 0, text: "test2", open: true},
+            { id: 2, pId: 0, text: "test2", open: true },
-            {id: 21, pId: 2, text: "test21"},
+            { id: 21, pId: 2, text: "test21" },
-            {id: 22, pId: 2, text: "test22"}
+            { id: 22, pId: 2, text: "test22" }
         ]);
+
         return tree;
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this;
+        const self = this;
-        BI.createWidget({
+        createWidget({
             type: "bi.grid",
             columns: 1,
             rows: 1,
             element: this,
-            items: [{
+            items: [
+                {
                     column: 0,
                     row: 0,
                     el: {
                         type: "bi.vtape",
                         items: [
                             {
-                            el: this._createDefaultTree()
+                                el: this._createDefaultTree(),
                             },
                             {
                                 el: {
                                     type: "bi.label",
                                     text: "tree.initTree([{\"id\":1, \"pId\":0, \"text\":\"test1\", open:true},{\"id\":11, \"pId\":1, \"text\":\"test11\"},{\"id\":12, \"pId\":1, \"text\":\"test12\"},{\"id\":111, \"pId\":11, \"text\":\"test111\"}])",
-                                whiteSpace: "normal"
+                                    whiteSpace: "normal",
                                 },
-                            height: 50
+                                height: 50,
                             }
-                    ]
+                        ],
+                    },
                 }
-            }]
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.tree_view", Demo.Func);

demo/js/case/combo/demo.bubble_combo.js

@@ -1,121 +1,150 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, makeArray } from "@/core";
-    props: {
+import { BubbleCombo } from "@/case/combo/bubblecombo/combo.bubble";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
+export class Func extends Widget {
+    static xtype = "demo.bubble_combo";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
-        var self = this, count = 1;
+        let self = this,
-        var combo1 = BI.createWidget({
+            count = 1;
+        const combo1 = createWidget({
             type: "bi.bubble_combo",
             trigger: "click,hover",
             el: {
                 type: "bi.button",
                 text: "测试",
-                height: 24
+                height: 24,
             },
             popup: {
                 el: {
                     type: "bi.button_group",
-                    items: BI.makeArray(100, {
+                    items: makeArray(100, {
                         type: "bi.text_item",
                         height: 24,
-                        text: "item"
+                        text: "item",
                     }),
-                    layouts: [{
+                    layouts: [
-                        type: "bi.vertical"
+                        {
-                    }]
+                            type: "bi.vertical",
-                },
-                maxHeight: 200
                         }
+                    ],
+                },
+                maxHeight: 200,
+            },
         });
-        var combo2 = BI.createWidget({
+        const combo2 = createWidget({
             type: "bi.bubble_combo",
             direction: "right",
             el: {
                 type: "bi.button",
                 text: "测试",
-                height: 24
+                height: 24,
             },
             popup: {
                 type: "bi.text_bubble_bar_popup_view",
                 text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
-                ref: function () {
+                ref() {
                     self.popup = this;
-                }
                 },
-            listeners: [{
+            },
-                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+            listeners: [
-                action: function () {
+                {
-                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                    eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                    action() {
+                        self.popup.populate(
+                            count++ % 2 === 1
+                                ? "我的文字变少了"
+                                : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"
+                        );
+                    },
                 }
-            }]
+            ],
         });
 
-        var combo3 = BI.createWidget({
+        const combo3 = createWidget({
             type: "bi.bubble_combo",
             el: {
                 type: "bi.button",
                 text: "测试",
-                height: 25
+                height: 25,
             },
             popup: {
                 type: "bi.text_bubble_bar_popup_view",
                 text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
-                ref: function () {
+                ref() {
                     self.popup = this;
-                }
                 },
-            listeners: [{
+            },
-                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+            listeners: [
-                action: function () {
+                {
-                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                    eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                    action() {
+                        self.popup.populate(
+                            count++ % 2 === 1
+                                ? "我的文字变少了"
+                                : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"
+                        );
+                    },
                 }
-            }]
+            ],
         });
 
-        var combo4 = BI.createWidget({
+        const combo4 = createWidget({
             type: "bi.bubble_combo",
             el: {
                 type: "bi.button",
                 text: "测试",
-                height: 25
+                height: 25,
             },
             popup: {
                 type: "bi.text_bubble_bar_popup_view",
                 text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
-                ref: function () {
+                ref() {
                     self.popup = this;
-                }
                 },
-            listeners: [{
+            },
-                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+            listeners: [
-                action: function () {
+                {
-                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                    eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                    action() {
+                        self.popup.populate(
+                            count++ % 2 === 1
+                                ? "我的文字变少了"
+                                : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"
+                        );
+                    },
                 }
-            }]
+            ],
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: combo1,
                     left: 150,
-                top: 10
+                    top: 10,
-            }, {
+                },
+                {
                     el: combo2,
                     left: 10,
-                bottom: 200
+                    bottom: 200,
-            }, {
+                },
+                {
                     el: combo3,
                     right: 10,
-                bottom: 10
+                    bottom: 10,
-            }, {
+                },
+                {
                     el: combo4,
                     right: 10,
-                top: 10
+                    top: 10,
-            }]
+                }
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.bubble_combo", Demo.Func);

demo/js/case/combo/demo.editor_icon_check_combo.js

@@ -1,45 +1,52 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/11.
+
- */
+@shortcut()
-Demo.TextValueCombo = BI.inherit(BI.Widget, {
+export class TextValueCombo extends Widget {
-    props: {
+    static xtype = "demo.editor_icon_check_combo";
-        baseCls: ""
+
-    },
+    props = { baseCls: "" };
-    render: function () {
+
-        var self = this;
+    render() {
+        const self = this;
+
         return {
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.editor_icon_check_combo",
-                ref: function () {
+                    ref() {
                         self.combo = this;
                     },
                     watermark: "默认值",
                     width: 200,
                     height: 24,
                     value: 2,
-                items: [{
+                    items: [
+                        {
                             // text: "MVC-1",
-                    value: "1"
+                            value: "1",
-                }, {
+                        },
+                        {
                             // text: "MVC-2",
-                    value: "2"
+                            value: "2",
-                }, {
+                        },
+                        {
                             // text: "MVC-3",
-                    value: "3"
+                            value: "3",
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.button",
                     width: 90,
                     height: 25,
                     text: "setValue为空",
-                handler: function () {
+                    handler() {
-                    self.combo.setValue()
+                        self.combo.setValue();
+                    },
                 }
-            }],
+            ],
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-
-BI.shortcut("demo.editor_icon_check_combo", Demo.TextValueCombo);

demo/js/case/combo/demo.icon_combo.js

@@ -1,39 +1,41 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/12.
- */
-Demo.IconCombo = BI.inherit(BI.Widget, {
-    props: {
-        baseCls: ""
-    },
 
-    render: function () {
+@shortcut()
+export class IconCombo extends Widget {
+    static xtype = "demo.icon_combo";
 
-        var self = this;
+    props = { baseCls: "" };
 
+    render() {
+        const self = this;
 
         return {
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.icon_combo",
                     container: "body",
-                ref: function (_ref) {
+                    ref(_ref) {
                         self.refs = _ref;
                     },
                     value: "第二项",
-                items: [{
+                    items: [
+                        {
                             value: "第一项",
-                    iconCls: "close-font"
+                            iconCls: "close-font",
-                }, {
+                        },
+                        {
                             value: "第二项",
-                    iconCls: "search-font"
+                            iconCls: "search-font",
-                }, {
+                        },
+                        {
                             value: "第三项",
-                    iconCls: "copy-font"
+                            iconCls: "copy-font",
-                }]
+                        }
-            }],
+                    ],
-            vgap: 20
+                }
+            ],
+            vgap: 20,
         };
     }
-});
+}
-
-BI.shortcut("demo.icon_combo", Demo.IconCombo);

demo/js/case/combo/demo.icon_text_value_combo.js

@@ -1,36 +1,40 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Windy on 2017/12/13.
+
- */
+@shortcut()
-Demo.IconTextValueCombo = BI.inherit(BI.Widget, {
+export class IconTextValueCombo extends Widget {
-    props: {
+    static xtype = "demo.icon_text_value_combo";
-        baseCls: ""
-    },
-    render: function () {
 
+    props = { baseCls: "" };
+
+    render() {
         return {
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.icon_text_value_combo",
                     text: "默认值",
                     // defaultIconCls: "next-page-h-font",
                     width: 300,
-                items: [{
+                    items: [
+                        {
                             text: "MVC-1",
                             iconCls: "close-font",
-                    value: 1
+                            value: 1,
-                }, {
+                        },
+                        {
                             text: "MVC-2",
                             iconCls: "date-font",
-                    value: 2
+                            value: 2,
-                }, {
+                        },
+                        {
                             text: "MVC-3",
                             iconCls: "search-close-h-font",
-                    value: 3
+                            value: 3,
-                }]
+                        }
-            }],
+                    ],
-            vgap: 20
+                }
+            ],
+            vgap: 20,
         };
     }
-});
+}
-
-BI.shortcut("demo.icon_text_value_combo", Demo.IconTextValueCombo);

demo/js/case/combo/demo.search_text_value_combo.js

@@ -1,102 +1,122 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Windy on 2018/2/4.
+import { Msg } from "@/base";
- */
+import { AllValueMultiTextValueCombo } from "@/component";
-Demo.SearchTextValueCombo = BI.inherit(BI.Widget, {
+
-    props: {
+@shortcut()
-        baseCls: ""
+export class SearchTextValueCombo extends Widget {
-    },
+    static xtype = "demo.search_text_value_combo";
-    render: function () {
+
-        var combo, searchCombo;
+    props = { baseCls: "" };
+
+    render() {
+        let combo, searchCombo;
+
         return {
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.search_text_value_combo",
-                ref: function () {
+                    ref() {
                         combo = this;
                     },
                     warningTitle: "111",
                     text: "默认值",
                     value: 14,
                     width: 300,
-                items: [{
+                    items: [
+                        {
                             text: "ABC-1",
                             iconCls: "date-font",
-                    value: 1
+                            value: 1,
-                }, {
+                        },
+                        {
                             text: "BCD-2",
                             iconCls: "search-font",
-                    value: 2
+                            value: 2,
-                }, {
+                        },
+                        {
                             text: "CDE-3",
                             iconCls: "pull-right-font",
-                    value: 3
+                            value: 3,
-                }, {
+                        },
+                        {
                             text: "DEF-3",
                             iconCls: "pull-right-font",
-                    value: 4
+                            value: 4,
-                }, {
+                        },
+                        {
                             text: "FEG-3",
                             iconCls: "pull-right-font",
-                    value: 5
+                            value: 5,
-                }, {
+                        },
+                        {
                             text: "FGH-3",
                             iconCls: "pull-right-font",
-                    value: 6
+                            value: 6,
-                }, {
+                        },
+                        {
                             text: "GHI-3",
                             iconCls: "pull-right-font",
-                    value: 7
+                            value: 7,
-                }, {
+                        },
+                        {
                             text: "HIJ-3",
                             iconCls: "pull-right-font",
-                    value: 8
+                            value: 8,
-                }, {
+                        },
+                        {
                             text: "IJK-3",
                             iconCls: "pull-right-font",
-                    value: 9
+                            value: 9,
-                }, {
+                        },
+                        {
                             text: "JKL-3",
                             iconCls: "pull-right-font",
-                    value: 10
+                            value: 10,
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.all_value_multi_text_value_combo",
                     items: Demo.CONSTANTS.ITEMS,
                     text: "提示文本",
                     width: 200,
                     value: {
                         type: 1,
-                    value: ["1", "2", "柳州市城贸金属材料有限责任公司", "3"]
+                        value: ["1", "2", "柳州市城贸金属材料有限责任公司", "3"],
                     },
-                ref: function () {
+                    ref() {
                         searchCombo = this;
                     },
-                listeners: [{
+                    listeners: [
-                    eventName: "BI.AllValueMultiTextValueCombo.EVENT_CONFIRM",
+                        {
-                    action: function () {
+                            eventName: AllValueMultiTextValueCombo.EVENT_CONFIRM,
+                            action() {
                                 BI.Msg.toast(JSON.stringify(searchCombo.getValue()));
+                            },
                         }
-                }]
+                    ],
-            }, {
+                },
+                {
                     type: "bi.button",
                     text: "setValue(3)",
                     width: 90,
                     height: 25,
-                handler: function () {
+                    handler() {
                         combo.setValue(11);
-                }
+                    },
-            }, {
+                },
+                {
                     type: "bi.button",
                     text: "getValue()",
                     width: 90,
                     height: 25,
-                handler: function () {
+                    handler() {
                         BI.Msg.toast(JSON.stringify(searchCombo.getValue()));
+                    },
                 }
-            }],
+            ],
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-
-BI.shortcut("demo.search_text_value_combo", Demo.SearchTextValueCombo);

demo/js/case/combo/demo.text_value_down_list_combo.js

@@ -1,68 +1,83 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/11.
+import { Msg } from "@/base";
- */
+
-Demo.TextValueDownListCombo = BI.inherit(BI.Widget, {
+@shortcut()
-    props: {
+export class TextValueDownListCombo extends Widget {
-        baseCls: ""
+    static xtype = "demo.text_value_down_list_combo";
-    },
+
+    props = { baseCls: "" };
+
+    render() {
+        const self = this;
 
-    render: function () {
-        var self = this;
         return {
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.text_value_down_list_combo",
                     width: 300,
-                ref: function (_ref) {
+                    ref(_ref) {
                         self.refs = _ref;
                     },
                     text: "默认值",
                     value: 11,
-                items: [[{
+                    items: [
+                        [
+                            {
                                 text: "属于",
                                 value: 1,
-                    cls: "dot-e-font"
+                                cls: "dot-e-font",
-                }, {
+                            },
+                            {
                                 text: "不属于",
                                 value: 2,
-                    cls: "dot-e-font"
+                                cls: "dot-e-font",
-                }], [{
+                            }
+                        ],
+                        [
+                            {
                                 el: {
                                     text: "大于",
                                     value: 3,
-                        iconCls1: "dot-e-font"
+                                    iconCls1: "dot-e-font",
                                 },
                                 value: 3,
-                    children: [{
+                                children: [
+                                    {
                                         text: "固定值",
                                         value: 4,
-                        cls: "dot-e-font"
+                                        cls: "dot-e-font",
-                    }, {
+                                    },
+                                    {
                                         text: "平均值",
                                         value: 5,
-                        cls: "dot-e-font"
+                                        cls: "dot-e-font",
-                    }]
+                                    }
-                }]]
+                                ],
-            }, {
+                            }
+                        ]
+                    ],
+                },
+                {
                     type: "bi.button",
                     width: 90,
                     height: 25,
                     text: "setValue",
-                handler: function () {
+                    handler() {
                         self.refs.setValue(2);
-                }
+                    },
-            }, {
+                },
+                {
                     type: "bi.button",
                     width: 90,
                     height: 25,
                     text: "getValue",
-                handler: function () {
+                    handler() {
-                    BI.Msg.alert("", JSON.stringify(self.refs.getValue()));
+                        Msg.alert("", JSON.stringify(self.refs.getValue()));
+                    },
                 }
-            }],
+            ],
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-
-BI.shortcut("demo.text_value_down_list_combo", Demo.TextValueDownListCombo);

demo/js/case/combo/demo.text_vlaue_check_combo.js

@@ -1,43 +1,51 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/11.
+import { Msg } from "@/base";
- */
+
-Demo.TextValueCheckCombo = BI.inherit(BI.Widget, {
+@shortcut()
-    props: {
+export class TextValueCheckCombo extends Widget {
-        baseCls: ""
+    static xtype = "demo.text_value_check_combo";
-    },
+
-    render: function () {
+    props = { baseCls: "" };
-        var self = this;
+
+    render() {
+        const self = this;
+        
         return {
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.text_value_check_combo",
-                ref: function () {
+                    ref () {
                         self.combo = this;
                     },
                     text: "默认值",
-                //value: 1,
+                    // value: 1,
                     width: 300,
-                items: [{
+                    items: [
+                        {
                             text: "MVC-1",
-                    value: 1
+                            value: 1,
-                }, {
+                        },
+                        {
                             text: "MVC-2",
-                    value: 2
+                            value: 2,
-                }, {
+                        },
+                        {
                             text: "MVC-3",
-                    value: 3
+                            value: 3,
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.button",
                     width: 90,
                     height: 25,
-                handler: function () {
+                    handler () {
                         BI.Msg.alert("", JSON.stringify(self.combo.getValue()));
+                    },
                 }
-            }],
+            ],
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-
-BI.shortcut("demo.text_value_check_combo", Demo.TextValueCheckCombo);

demo/js/case/demo.calendar.js

@@ -1,32 +1,35 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.calendar";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
+        const self = this;
+        const date = new Date();
 
-    render: function () {
-        var self = this;
-        var date = new Date();
         return {
             type: "bi.calendar",
-            ref: function () {
+            ref() {
                 self.calendar = this;
             },
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             year: date.getFullYear(),
             month: date.getMonth(),
-            day: date.getDate()
+            day: date.getDate(),
         };
-    },
+    }
 
-    mounted: function () {
+    mounted() {
-        var date = new Date();
+        const date = new Date();
         this.calendar.setValue({
             year: date.getFullYear(),
             month: date.getMonth(),
-            day: date.getDate()
+            day: date.getDate(),
         });
     }
-});
+}
-BI.shortcut("demo.calendar", Demo.Func);

demo/js/case/demo.click.effect.js

@@ -1,40 +1,53 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createItems } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.click_item_effect";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
         return {
             type: "bi.vertical",
-            items: BI.createItems([{
+            items: createItems(
+                [
+                    {
                         text: "bi-list-item",
-                cls: "bi-list-item close-font"
+                        cls: "bi-list-item close-font",
-            }, {
+                    },
+                    {
                         text: "bi-list-item-simple",
-                cls: "bi-list-item-simple close-font"
+                        cls: "bi-list-item-simple close-font",
-            }, {
+                    },
+                    {
                         text: "bi-list-item-effect",
-                cls: "bi-list-item-effect close-font"
+                        cls: "bi-list-item-effect close-font",
-            }, {
+                    },
+                    {
                         text: "bi-list-item-active",
-                cls: "bi-list-item-active close-font"
+                        cls: "bi-list-item-active close-font",
-            }, {
+                    },
+                    {
                         text: "bi-list-item-active2",
-                cls: "bi-list-item-active2 close-font"
+                        cls: "bi-list-item-active2 close-font",
-            }, {
+                    },
+                    {
                         text: "bi-list-item-select",
-                cls: "bi-list-item-select close-font"
+                        cls: "bi-list-item-select close-font",
-            }, {
+                    },
+                    {
                         text: "bi-list-item-select2",
-                cls: "bi-list-item-select2 close-font"
+                        cls: "bi-list-item-select2 close-font",
-            }], {
+                    }
+                ],
+                {
                     type: "bi.icon_text_item",
                     logic: {
-                    dynamic: true
+                        dynamic: true,
+                    },
                 }
-            }),
+            ),
-            vgap: 10
+            vgap: 10,
         };
     }
-});
+}
-BI.shortcut("demo.click_item_effect", Demo.Func);

demo/js/case/demo.color_chooser.js

@@ -1,40 +1,46 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.color_chooser";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
         return {
             type: "bi.absolute",
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.color_chooser",
-                    recommendColorsGetter: function () {
+                        recommendColorsGetter() {
-                        return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"]
+                            return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"];
                         },
                         width: 24,
-                    height: 24
+                        height: 24,
                     },
                     left: 100,
-                top: 250
+                    top: 250,
-            }, {
+                },
+                {
                     el: {
                         type: "bi.simple_color_chooser",
                         width: 30,
-                    height: 24
+                        height: 24,
                     },
                     left: 400,
-                top: 250
+                    top: 250,
-            }, {
+                },
+                {
                     el: {
                         type: "bi.color_chooser",
                         width: 230,
-                    height: 24
+                        height: 24,
                     },
                     left: 100,
-                top: 350
+                    top: 350,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.color_chooser", Demo.Func);

demo/js/case/demo.color_chooser_popup.js

@@ -1,27 +1,32 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.color_chooser_popup";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
         return {
             type: "bi.absolute",
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.color_chooser_popup",
-                    cls: "bi-card"
+                        cls: "bi-card",
                     },
                     left: 100,
-                top: 250
+                    top: 250,
-            }, {
+                },
+                {
                     el: {
                         type: "bi.simple_color_chooser_popup",
-                    cls: "bi-card"
+                        cls: "bi-card",
                     },
                     left: 400,
-                top: 250
+                    top: 250,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.color_chooser_popup", Demo.Func);

demo/js/case/demo.segment.js

@@ -1,28 +1,36 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func",
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.segment";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
-        BI.createWidget({
+        createWidget({
             type: "bi.horizontal",
             element: this,
             vgap: 20,
             hgap: 30,
-            items: [{
+            items: [
+                {
                     type: "bi.segment",
-                items: [{
+                    items: [
+                        {
                             text: "较长的选项1",
                             value: 1,
-                }, {
+                        },
+                        {
                             text: "选项2",
                             value: 2,
-                }, {
+                        },
+                        {
                             text: "选项3",
                             value: 3,
-                }],
+                        }
-            }],
+                    ],
+                }
+            ],
         });
-    },
+    }
-});
+}
-BI.shortcut("demo.segment", Demo.Func);

demo/js/case/editor/demo.clear_editor.js

@@ -1,23 +1,24 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/11.
+
- */
+@shortcut()
-Demo.ClearEditor = BI.inherit(BI.Widget, {
+export class ClearEditor extends Widget {
-    props: {
+    static xtype = "demo.clear_editor";
-        baseCls: ""
+
-    },
+    props = { baseCls: "" };
-    render: function () {
+
+    render() {
         return {
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.clear_editor",
                     cls: "bi-border",
                     width: 300,
                     watermark: "这个是带清除按钮的",
-                value: 123
+                    value: 123,
-            }],
+                }
-            vgap: 20
+            ],
+            vgap: 20,
         };
     }
-});
+}
-
-BI.shortcut("demo.clear_editor", Demo.ClearEditor);

demo/js/case/editor/demo.shelter_editor.js

@@ -1,47 +1,48 @@
-/**
+import { shortcut, Widget, createWidget } from "@/core";
- * Created by Dailer on 2017/7/11.
+
- */
+@shortcut()
-Demo.ClearEditor = BI.inherit(BI.Widget, {
+export class ClearEditor extends Widget {
-    props: {
+    static xtype = "demo.shelter_editor";
-        baseCls: ""
+
-    },
+    props = { baseCls: "" };
-    render: function () {
+
-        var editor = BI.createWidget({
+    render() {
+        const editor = createWidget({
             type: "bi.shelter_editor",
             cls: "bi-border",
-            validationChecker: function (v) {
+            validationChecker(v) {
                 return v != "a";
             },
             watermark: "可以设置标记的输入框",
             value: "这是一个遮罩",
-            keyword: "z"
+            keyword: "z",
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
             hgap: 30,
             vgap: 20,
             bgap: 50,
-            items: [editor]
+            items: [editor],
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.button",
                         text: "focus",
                         height: 25,
-                    handler: function () {
+                        handler() {
                             editor.focus();
-                    }
+                        },
                     },
                     right: 10,
                     left: 10,
-                bottom: 10
+                    bottom: 10,
-            }]
+                }
+            ],
         });
     }
-});
+}
-
-BI.shortcut("demo.shelter_editor", Demo.ClearEditor);

demo/js/case/editor/demo.sign_editor.js

@@ -1,29 +1,28 @@
-/**
+import { shortcut, Widget, createWidget } from "@/core";
- * Created by Dailer on 2017/7/14.
+
- */
+@shortcut()
-Demo.SignEditor = BI.inherit(BI.Widget, {
+export class SignEditor extends Widget {
-    props: {
+    static xtype = "demo.sign_editor";
-        baseCls: ""
+
-    },
+    props = { baseCls: "" };
-    render: function () {
+
-        var editor = BI.createWidget({
+    render() {
+        const editor = createWidget({
             type: "bi.sign_editor",
             cls: "bi-border bi-focus-shadow",
-            validationChecker: function (v) {
+            validationChecker(v) {
                 return v != "abc";
             },
             watermark: "可以设置标记的输入框",
-            text: "这是一个标记，点击它即可进行输入"
+            text: "这是一个标记，点击它即可进行输入",
         });
         editor.setValue(2);
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
             hgap: 30,
             vgap: 20,
-            items: [editor]
+            items: [editor],
         });
     }
-});
+}
-
-BI.shortcut("demo.sign_editor", Demo.SignEditor);

demo/js/case/editor/demo.simple_state_editor.js

@@ -1,33 +1,34 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/11.
+
- */
+@shortcut()
-Demo.SimpleStateEditor = BI.inherit(BI.Widget, {
+export class SimpleStateEditor extends Widget {
-    props: {
+    static xtype = "demo.simple_state_editor";
-        baseCls: ""
+
-    },
+    props = { baseCls: "" };
-    render: function () {
+
-        var self = this;
+    render() {
+        const self = this;
+
         return {
             type: "bi.horizontal_adapt",
-            items: [{
+            items: [
+                {
                     type: "bi.simple_state_editor",
-                ref: function () {
+                    ref() {
                         self.editor = this;
                     },
                     cls: "bi-border",
-                width: 300
+                    width: 300,
-            }],
+                }
-            vgap: 20
+            ],
-
+            vgap: 20,
         };
-    },
+    }
 
-    mounted: function () {
+    mounted() {
-        var self = this;
+        const self = this;
-        setTimeout(function () {
+        setTimeout(() => {
             self.editor.setState(["*", "*"]);
         }, 1000);
     }
-});
+}
-
-BI.shortcut("demo.simple_state_editor", Demo.SimpleStateEditor);

demo/js/case/editor/demo.state_editor.js

@@ -1,34 +1,34 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/11.
+
- */
+@shortcut()
-Demo.StateEditor = BI.inherit(BI.Widget, {
+export class StateEditor extends Widget {
-    props: {
+    static xtype = "demo.state_editor";
-        baseCls: ""
+
-    },
+    props = { baseCls: "" };
-    render: function () {
+
-        var self = this;
+    render() {
+        const self = this;
+
         return {
             type: "bi.horizontal_adapt",
-            items: [{
+            items: [
+                {
                     type: "bi.state_editor",
-                ref: function () {
+                    ref() {
                         self.editor = this;
                     },
                     cls: "bi-border",
-                width: 300
+                    width: 300,
-            }],
+                }
-            vgap: 20
+            ],
-
+            vgap: 20,
         };
-    },
+    }
-
 
-    mounted: function () {
+    mounted() {
-        var self = this;
+        const self = this;
-        setTimeout(function () {
+        setTimeout(() => {
             self.editor.setState(["*", "*"]);
         }, 1000);
     }
-});
+}
-
-BI.shortcut("demo.state_editor", Demo.StateEditor);

demo/js/case/item/demo.multi_select_item.js

@@ -1,22 +1,26 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.multi_select_item";
 
-    render: function () {
+    props = { baseCls: "demo-func" };
 
+    render() {
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     height: 30,
-                text: "复选item"
+                    text: "复选item",
-            }, {
+                },
+                {
                     type: "bi.multi_select_item",
-                text: "复选项"
+                    text: "复选项",
-            }],
+                }
-            hgap: 300
+            ],
+            hgap: 300,
         };
     }
-});
+}
-BI.shortcut("demo.multi_select_item", Demo.Func);

demo/js/case/item/demo.single_select_item.js

@@ -1,25 +1,24 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/25.
- */
 
-Demo.Items = BI.inherit(BI.Widget, {
+@shortcut()
-
+export class Items extends Widget {
-    render: function () {
+    static xtype = "demo.single_select_item";
 
+    render() {
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     height: 30,
-                text: "单选item"
+                    text: "单选item",
-            }, {
+                },
+                {
                     type: "bi.single_select_item",
-                text: "单选项"
+                    text: "单选项",
-            }],
+                }
-            hgap: 300
+            ],
+            hgap: 300,
         };
     }
-});
+}
-
-
-BI.shortcut("demo.single_select_item", Demo.Items);

demo/js/case/item/demo.single_select_radio_item.js

@@ -1,25 +1,24 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by Dailer on 2017/7/25.
- */
 
-Demo.Items = BI.inherit(BI.Widget, {
+@shortcut()
-
+export class Items extends Widget {
-    render: function () {
+    static xtype = "demo.single_select_radio_item";
 
+    render() {
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     height: 30,
-                text: "单选item"
+                    text: "单选item",
-            }, {
+                },
+                {
                     type: "bi.single_select_radio_item",
-                text: "单选项"
+                    text: "单选项",
-            }],
+                }
-            hgap: 300
+            ],
+            hgap: 300,
         };
     }
-});
+}
-
-
-BI.shortcut("demo.single_select_radio_item", Demo.Items);

demo/js/case/list/demo.lazy_loader.js

@@ -1,23 +1,27 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.lazy_loader";
 
-    render: function () {
+    props = { baseCls: "demo-func" };
-        var self = this;
+
+    render() {
+        const self = this;
         BI.createWidget({
             type: "bi.lazy_loader",
             element: this,
             el: {
-                layouts: [{
+                layouts: [
+                    {
                         type: "bi.left",
-                    hgap: 5
+                        hgap: 5,
-                }]
+                    }
+                ],
             },
             items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), {
-                type: "bi.button"
+                type: "bi.button",
-            })
+            }),
         });
     }
-});
+}
-BI.shortcut("demo.lazy_loader", Demo.Func);

demo/js/case/list/demo.select_list.js

@@ -1,26 +1,28 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, createItems, deepClone, Selection  } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.select_list";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
-        var self = this;
+        const self = this;
-        BI.createWidget({
+        createWidget({
             type: "bi.select_list",
             toolbar: {
                 type: "bi.multi_select_bar",
-                iconWrapperWidth: 26
+                iconWrapperWidth: 26,
             },
             element: this,
             el: {
                 el: {
-                    chooseType: BI.Selection.Multi
+                    chooseType: Selection.Multi,
-                }
+                },
             },
-            items: BI.createItems(BI.deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), {
+            items: createItems(deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), {
-                type: "bi.multi_select_item"
+                type: "bi.multi_select_item",
-            })
+            }),
         });
     }
-});
+}
-BI.shortcut("demo.select_list", Demo.Func);

demo/js/case/pager/demo.all_count_pager.js

@@ -1,25 +1,30 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.all_count_pager";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             hgap: 200,
             vgap: 50,
             element: this,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     height: 30,
-                text: " (测试条件：总页数为3)"
+                    text: " (测试条件：总页数为3)",
-            }, {
+                },
+                {
                     type: "bi.all_count_pager",
                     pages: 3,
                     curr: 1,
-                count: 1000
+                    count: 1000,
-            }]
+                }
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.all_count_pager", Demo.Func);

demo/js/case/pager/demo.direction_pager.js

@@ -1,50 +1,54 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.direction_pager";
+
+    props = { baseCls: "demo-func" };
 
-    mounted: function () {
+    mounted() {
         this.pager.populate();
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this;
+        const self = this;
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             hgap: 200,
             vgap: 50,
             element: this,
-            items: [{
+            items: [
+                {
                     type: "bi.direction_pager",
-                ref: function (_ref) {
+                    ref(_ref) {
                         self.pager = _ref;
                     },
                     horizontal: {
                         pages: false, // 总页数
                         curr: 1, // 初始化当前页， pages为数字时可用
 
-                    hasPrev: function (v) {
+                        hasPrev(v) {
                             return v > 1;
                         },
-                    hasNext: function () {
+                        hasNext() {
                             return true;
                         },
-                    firstPage: 1
+                        firstPage: 1,
                     },
                     vertical: {
                         pages: false, // 总页数
                         curr: 1, // 初始化当前页， pages为数字时可用
 
-                    hasPrev: function (v) {
+                        hasPrev(v) {
                             return v > 1;
                         },
-                    hasNext: function () {
+                        hasNext() {
                             return true;
                         },
-                    firstPage: 1
+                        firstPage: 1,
+                    },
                 }
-            }]
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.direction_pager", Demo.Func);

demo/js/case/pane/demo.list_pane.js

@@ -1,34 +1,41 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createItems, deepClone } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.list_pane";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
+        const self = this;
 
-    render: function () {
-        var self = this;
         return {
             type: "bi.list_pane",
-            ref: function () {
+            ref() {
                 self.pane = this;
             },
-            itemsCreator: function (op, callback) {
+            itemsCreator(op, callback) {
-                setTimeout(function () {
+                setTimeout(() => {
-                    callback(BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), {
+                    callback(
+                        createItems(deepClone(Demo.CONSTANTS.ITEMS), {
                             type: "bi.multi_select_item",
-                        height: 25
+                            height: 25,
-                    }));
+                        })
+                    );
                 }, 2000);
             },
             el: {
                 type: "bi.button_group",
-                layouts: [{
+                layouts: [
-                    type: "bi.vertical"
+                    {
-                }]
+                        type: "bi.vertical",
                     }
-        };
+                ],
             },
+        };
+    }
 
-    mounted: function () {
+    mounted() {
         this.pane.populate();
     }
-});
+}
-BI.shortcut("demo.list_pane", Demo.Func);

demo/js/case/pane/demo.multi_popup_view.js

@@ -1,13 +1,18 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createItems, deepClone } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.multi_popup_view";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
+        const self = this;
 
-    render: function () {
-        var self = this;
         return {
             type: "bi.absolute",
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.combo",
                         width: 200,
@@ -16,24 +21,26 @@ Demo.Func = BI.inherit(BI.Widget, {
                             type: "bi.text_button",
                             text: "点击",
                             cls: "bi-border",
-                        height: 30
+                            height: 30,
                         },
                         popup: {
                             type: "bi.multi_popup_view",
                             el: {
                                 type: "bi.button_group",
-                            layouts: [{
+                                layouts: [
-                                type: "bi.vertical"
+                                    {
-                            }],
+                                        type: "bi.vertical",
-                            items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), {
-                                type: "bi.multi_select_item",
-                                height: 25
-                            })
-                        }
                                     }
+                                ],
+                                items: createItems(deepClone(Demo.CONSTANTS.ITEMS), {
+                                    type: "bi.multi_select_item",
+                                    height: 25,
+                                }),
+                            },
+                        },
+                    },
                 }
-            }]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.multi_popup_view", Demo.Func);

demo/js/case/pane/demo.panel.js

@@ -1,28 +1,35 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createItems, deepClone } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.panel";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
+        const self = this;
 
-    render: function () {
-        var self = this;
         return {
             type: "bi.panel",
             title: "title",
-            titleButtons: [{
+            titleButtons: [
+                {
                     type: "bi.button",
-                text: "操作"
+                    text: "操作",
-            }],
+                }
+            ],
             el: {
                 type: "bi.button_group",
-                layouts: [{
+                layouts: [
-                    type: "bi.vertical"
+                    {
-                }],
+                        type: "bi.vertical",
-                items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), {
-                    type: "bi.multi_select_item",
-                    height: 25
-                })
                     }
+                ],
+                items: createItems(deepClone(Demo.CONSTANTS.ITEMS), {
+                    type: "bi.multi_select_item",
+                    height: 25,
+                }),
+            },
         };
     }
-});
+}
-BI.shortcut("demo.panel", Demo.Func);

demo/js/case/pane/demo.popup_panel.js

@@ -1,13 +1,18 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createItems, deepClone } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.popup_panel";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
+        const self = this;
 
-    render: function () {
-        var self = this;
         return {
             type: "bi.absolute",
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.combo",
                         width: 200,
@@ -16,24 +21,26 @@ Demo.Func = BI.inherit(BI.Widget, {
                             type: "bi.text_button",
                             text: "点击",
                             cls: "bi-border",
-                        height: 30
+                            height: 30,
                         },
                         popup: {
                             type: "bi.popup_panel",
                             el: {
                                 type: "bi.button_group",
-                            layouts: [{
+                                layouts: [
-                                type: "bi.vertical"
+                                    {
-                            }],
+                                        type: "bi.vertical",
+                                    }
+                                ],
                                 items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), {
                                     type: "bi.multi_select_item",
-                                height: 25
+                                    height: 25,
-                            })
+                                }),
-                        }
+                            },
-                    }
+                        },
+                    },
                 }
-            }]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.popup_panel", Demo.Func);

demo/js/case/tree/demo.display_tree.js

@@ -1,43 +1,53 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.display_tree";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
-        var tree = BI.createWidget({
+        const tree = createWidget({
             type: "bi.display_tree",
-            element: this
+            element: this,
         });
 
-        tree.initTree([{
+        tree.initTree([
+            {
                 id: 1,
                 text: "第一项",
-            open: true
+                open: true,
-        }, {
+            },
+            {
                 id: 2,
-            text: "第二项"
+                text: "第二项",
-        }, {
+            },
+            {
                 id: 11,
                 pId: 1,
                 text: "子项1(共2个)",
-            open: true
+                open: true,
-        }, {
+            },
+            {
                 id: 111,
                 pId: 11,
-            text: "子子项1"
+                text: "子子项1",
-        }, {
+            },
+            {
                 id: 112,
                 pId: 11,
-            text: "子子项2"
+                text: "子子项2",
-        }, {
+            },
+            {
                 id: 12,
                 pId: 1,
-            text: "子项2"
+                text: "子项2",
-        }, {
+            },
+            {
                 id: 13,
                 pId: 1,
-            text: "子项3"
+                text: "子项3",
-        }]);
+            }
+        ]);
     }
-});
+}
-BI.shortcut("demo.display_tree", Demo.Func);

demo/js/case/tree/demo.level_tree.js

@@ -1,92 +1,111 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+import { Msg } from "@/base";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
+export class Func extends Widget {
+    static xtype = "demo.level_tree";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
-        var tree = BI.createWidget({
+        const tree = BI.createWidget({
             type: "bi.level_tree",
             chooseType: 0,
-            items: [{
+            items: [
+                {
                     id: 1,
                     text: "第一项",
                     value: 1,
-                isParent: true
+                    isParent: true,
-            }, {
+                },
+                {
                     id: 2,
                     text: "第二项",
                     value: 2,
-                isParent: true
+                    isParent: true,
-            }, {
+                },
+                {
                     id: 3,
                     text: "第三项",
                     value: 1,
                     isParent: true,
-                open: true
+                    open: true,
-            }, {
+                },
+                {
                     id: 4,
                     text: "第四项",
-                value: 1
+                    value: 1,
-            }, {
+                },
+                {
                     id: 11,
                     pId: 1,
                     text: "子项1",
-                value: 11
+                    value: 11,
-            }, {
+                },
+                {
                     id: 12,
                     pId: 1,
                     text: "子项2",
-                value: 12
+                    value: 12,
-            }, {
+                },
+                {
                     id: 13,
                     pId: 1,
                     text: "子项3",
-                value: 13
+                    value: 13,
-            }, {
+                },
+                {
                     id: 111,
                     pId: 11,
                     text: "子项1-1",
-                value: 111
+                    value: 111,
-            }, {
+                },
+                {
                     id: 21,
                     pId: 2,
                     text: "子项1",
-                value: 21
+                    value: 21,
-            }, {
+                },
+                {
                     id: 31,
                     pId: 3,
                     text: "子项1",
-                value: 31
+                    value: 31,
-            }, {
+                },
+                {
                     id: 32,
                     pId: 3,
                     text: "子项2",
-                value: 32
+                    value: 32,
-            }, {
+                },
+                {
                     id: 33,
                     pId: 3,
                     text: "子项3",
-                value: 33
+                    value: 33,
-            }]
+                }
+            ],
         });
 
         BI.createWidget({
             type: "bi.vtape",
             element: this,
-            items: [{
+            items: [
-                el: tree
+                {
-            }, {
+                    el: tree,
+                },
+                {
                     height: 30,
                     el: {
                         type: "bi.button",
                         height: 30,
                         text: "getValue",
-                    handler: function () {
+                        handler() {
                             BI.Msg.alert("", tree.getValue());
+                        },
+                    },
                 }
-                }
+            ],
-            }]
         });
     }
-});
+}
-BI.shortcut("demo.level_tree", Demo.Func);

demo/js/case/tree/demo.simple_tree.js

@@ -1,57 +1,71 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+import { Msg } from "@/base";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
+export class Func extends Widget {
+    static xtype = "demo.simple_tree";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
         // value值一定要是字符串
-        var tree = BI.createWidget({
+        const tree = BI.createWidget({
             type: "bi.simple_tree",
-            items: [{
+            items: [
+                {
                     id: 1,
                     text: "第一项",
-                value: "1"
+                    value: "1",
-            }, {
+                },
+                {
                     id: 2,
                     text: "第二项",
-                value: "2"
+                    value: "2",
-            }, {
+                },
+                {
                     id: 3,
                     text: "第三项",
                     value: "3",
-                open: true
+                    open: true,
-            }, {
+                },
+                {
                     id: 11,
                     pId: 1,
                     text: "子项1",
-                value: "11"
+                    value: "11",
-            }, {
+                },
+                {
                     id: 12,
                     pId: 1,
                     text: "子项2",
-                value: "12"
+                    value: "12",
-            }, {
+                },
+                {
                     id: 13,
                     pId: 1,
                     text: "子项3",
-                value: "13"
+                    value: "13",
-            }, {
+                },
+                {
                     id: 31,
                     pId: 3,
                     text: "子项1",
-                value: "31"
+                    value: "31",
-            }, {
+                },
+                {
                     id: 32,
                     pId: 3,
                     text: "子项2",
-                value: "32"
+                    value: "32",
-            }, {
+                },
+                {
                     id: 33,
                     pId: 3,
                     text: "子项3",
-                value: "33"
+                    value: "33",
-            }],
+                }
-            value: ["31", "32", "33"]
+            ],
+            value: ["31", "32", "33"],
         });
 
         // tree.populate([{
@@ -101,30 +115,33 @@ Demo.Func = BI.inherit(BI.Widget, {
         BI.createWidget({
             type: "bi.vtape",
             element: this,
-            items: [{
+            items: [
-                el: tree
+                {
-            }, {
+                    el: tree,
+                },
+                {
                     height: 30,
                     el: {
                         type: "bi.button",
                         height: 30,
                         text: "setValue(['31', '32', '33'])",
-                    handler: function () {
+                        handler() {
                             tree.setValue(["31", "32", "33"]);
-                    }
+                        },
-                }
+                    },
-            }, {
+                },
+                {
                     height: 30,
                     el: {
                         type: "bi.button",
                         height: 30,
                         text: "getValue",
-                    handler: function () {
+                        handler() {
                             BI.Msg.alert("", JSON.stringify(tree.getValue()));
+                        },
+                    },
                 }
-                }
+            ],
-            }]
         });
     }
-});
+}
-BI.shortcut("demo.simple_tree", Demo.Func);

demo/js/case/triggers/demo.editor_trigger.js

@@ -1,24 +1,29 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.editor_trigger";
+
+    props = { baseCls: "demo-func" };
 
-    render: function () {
+    render() {
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
-                text: "输入框加图标的trigger"
+                    text: "输入框加图标的trigger",
-            }, {
+                },
+                {
                     type: "bi.editor_trigger",
                     watermark: "这是水印",
                     width: 200,
-                height: 24
+                    height: 24,
-            }],
+                }
+            ],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         });
     }
-});
+}
-BI.shortcut("demo.editor_trigger", Demo.Func);

demo/js/case/triggers/demo.icon_trigger.js

@@ -1,24 +1,28 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.icon_trigger";
 
-    render: function () {
+    props = { baseCls: "demo-func" };
 
-        BI.createWidget({
+    render() {
+        createWidget({
             type: "bi.vertical",
             element: this,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
-                text: "只有一个图标的trigger"
+                    text: "只有一个图标的trigger",
-            }, {
+                },
+                {
                     type: "bi.icon_trigger",
                     width: 30,
-                height: 24
+                    height: 24,
-            }],
+                }
+            ],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         });
     }
-});
+}
-BI.shortcut("demo.icon_trigger", Demo.Func);

demo/js/case/triggers/demo.select_text_trigger.js

@@ -1,25 +1,29 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.select_text_trigger";
 
-    render: function () {
+    props = { baseCls: "demo-func" };
 
-        BI.createWidget({
+    render() {
+        createWidget({
             type: "bi.vertical",
             element: this,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
-                text: "可被选择的trigger"
+                    text: "可被选择的trigger",
-            }, {
+                },
+                {
                     type: "bi.select_text_trigger",
                     text: "这是一个简单的trigger",
                     width: 200,
-                height: 24
+                    height: 24,
-            }],
+                }
+            ],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         });
     }
-});
+}
-BI.shortcut("demo.select_text_trigger", Demo.Func);

demo/js/case/triggers/demo.text_trigger.js

@@ -1,25 +1,29 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.text_trigger";
 
-    render: function () {
+    props = { baseCls: "demo-func" };
 
-        BI.createWidget({
+    render() {
+        createWidget({
             type: "bi.vertical",
             element: this,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
-                text: "文本加图标的trigger"
+                    text: "文本加图标的trigger",
-            }, {
+                },
+                {
                     type: "bi.text_trigger",
                     text: "这是一个简单的trigger",
                     width: 200,
-                height: 24
+                    height: 24,
-            }],
+                }
+            ],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         });
     }
-});
+}
-BI.shortcut("demo.text_trigger", Demo.Func);

demo/js/center.js

@@ -1,26 +1,16 @@
-Demo.Center = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-center"
+@shortcut()
-    },
+export class Center extends Widget {
-    render: function () {
+    static xtype = "demo.center";
-        var self = this;
+
-        return {
+    props = { baseCls: "demo-center" };
-            type: "bi.router_view"
+
-        }
+    render() {
-    }
+        const self = this;
-});
-BI.shortcut("demo.center", Demo.Center);
         
-Demo.Router = BI.inherit(BI.Widget, {
-    props: {
-        baseCls: "demo-router"
-    },
-    render: function () {
-        var self = this;
-        var params = BI.Router.$router.history.current.params;
         return {
-            type: params.componentId
+            type: "bi.router_view",
-        }
+        };
     }
-});
+}
-BI.shortcut("demo.router", Demo.Router);

demo/js/component/demo.form.js

@@ -1,100 +1,111 @@
-/**
+import { shortcut, Widget, createWidget, isEmpty, isNotEmptyArray } from "@/core";
- * @author windy
+
- * @version 2.0
+@shortcut()
- * Created by windy on 2022/1/11
+export class Form extends Widget {
- */
+    static xtype = "demo.form";
-Demo.Form = BI.inherit(BI.Widget, {
+
-    props: {
+    props = { baseCls: "demo-form" };
-        baseCls: "demo-form"
+
-    },
+    render() {
-    render: function () {
+        const widget = BI.createWidget({
-        var widget = BI.createWidget({
             type: "bi.custom_form",
             width: 300,
             labelWidth: 100,
-            items: [{
+            items: [
-                validate: function (v) {
+                {
+                    validate(v) {
                         return v !== "a" && v !== "";
                     },
-                tip: function (v) {
+                    tip(v) {
                         if (BI.isEmpty(v)) {
                             return "不能为空";
                         }
-                    return "不合法格式"
+
+                        return "不合法格式";
                     },
                     label: "E-mail",
                     el: {
-                    type: 'bi.text_editor',
+                        type: "bi.text_editor",
                         watermark: "输入a报错",
                         allowBlank: true,
-                }
+                    },
-            }, {
+                },
-                validate: function (v) {
+                {
+                    validate(v) {
                         return BI.isNotEmptyArray(v);
                     },
-                tip: function () {
+                    tip() {
                         return "不能为空";
                     },
                     label: "性别",
                     el: {
-                    type: 'bi.text_value_combo',
+                        type: "bi.text_value_combo",
                         text: "请选择",
-                    items: [{
+                        items: [
+                            {
                                 text: "男",
-                        value: 1
+                                value: 1,
-                    }, {
+                            },
+                            {
                                 text: "女",
-                        value: 2
+                                value: 2,
-                    }]
                             }
-            }, {
+                        ],
-                validate: function (v) {
+                    },
+                },
+                {
+                    validate(v) {
                         return v !== "";
                     },
-                tip: function () {
+                    tip() {
                         return "不能为空";
                     },
                     label: "姓名",
                     el: {
-                    type: 'bi.text_editor',
+                        type: "bi.text_editor",
                         watermark: "输入姓名",
                         allowBlank: true,
-                }
+                    },
-            }, {
+                },
-                validate: function (v) {
+                {
+                    validate(v) {
                         return v !== "";
                     },
-                tip: function () {
+                    tip() {
                         return "不能为空";
                     },
                     label: "姓名",
                     el: {
-                    type: 'bi.textarea_editor',
+                        type: "bi.textarea_editor",
-                    cls: 'bi-border',
+                        cls: "bi-border",
                         watermark: "输入简介",
                         allowBlank: true,
                         height: 200,
+                    },
                 }
-            }],
+            ],
             layout: {
                 type: "bi.vertical",
-                vgap: 30
+                vgap: 30,
-            }
+            },
         });
+
         return {
             type: "bi.vertical",
             hgap: 200,
             vgap: 10,
-            items: [widget, {
+            items: [
+                widget,
+                {
                     type: "bi.button",
                     text: "提交",
-                handler: function () {
+                    handler() {
                         widget.validate();
 
                         console.log(widget.getValue());
+                    },
                 }
-            }]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.form", Demo.Form);

demo/js/component/demo.treevaluechoosercombo.js

@@ -1,24 +1,27 @@
-Demo.TreeValueChooser = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, deepClone } from "@/core";
-    props: {
+
-        baseCls: "demo-tree-value-chooser-combo"
+@shortcut()
-    },
+export class TreeValueChooser extends Widget {
-    render: function () {
+    static xtype = "demo.tree_value_chooser_combo";
 
-        var widget = BI.createWidget({
+    props = { baseCls: "demo-tree-value-chooser-combo" };
+
+    render() {
+        const widget = createWidget({
             type: "bi.tree_value_chooser_combo",
             width: 300,
-            // items: BI.deepClone(Demo.CONSTANTS.TREEITEMS),
+            // items: deepClone(Demo.CONSTANTS.TREEITEMS),
-            itemsCreator: function (op, callback) {
+            itemsCreator(op, callback) {
-                callback(BI.deepClone(Demo.CONSTANTS.TREEITEMS));
+                callback(deepClone(Demo.CONSTANTS.TREEITEMS));
             },
             defaultText: "请选择",
         });
+
         return {
             type: "bi.vertical",
             hgap: 200,
             vgap: 10,
-            items: [widget]
+            items: [widget],
         };
     }
-});
+}
-BI.shortcut("demo.tree_value_chooser_combo", Demo.TreeValueChooser);

demo/js/component/demo.treevaluechooserpane.js

@@ -1,16 +1,18 @@
-Demo.TreeValueChooser = BI.inherit(BI.Widget, {
+import { shortcut, Widget, deepClone } from "@/core";
-    props: {
-        baseCls: "demo-tree-value-chooser"
-    },
-    render: function () {
 
+@shortcut()
+export class TreeValueChooser extends Widget {
+    static xtype = "demo.tree_value_chooser_pane";
+
+    props = { baseCls: "demo-tree-value-chooser" };
+
+    render() {
         return {
             type: "bi.tree_value_chooser_pane",
-            items: BI.deepClone(Demo.CONSTANTS.TREEITEMS)
+            items: deepClone(Demo.CONSTANTS.TREEITEMS),
             // itemsCreator: function (op, callback) {
             //     callback(tree);
             // }
         };
     }
-});
+}
-BI.shortcut("demo.tree_value_chooser_pane", Demo.TreeValueChooser);

demo/js/component/demo.valuechoosercombo.js

@@ -1,20 +1,24 @@
-Demo.ValueChooserCombo = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, deepClone } from "@/core";
-    props: {
+
-        baseCls: "demo-value-chooser-combo"
+@shortcut()
-    },
+export class ValueChooserCombo extends Widget {
-    render: function () {
+    static xtype = "demo.value_chooser_combo";
-        var widget = BI.createWidget({
+
+    props = { baseCls: "demo-value-chooser-combo" };
+
+    render() {
+        const widget = createWidget({
             type: "bi.value_chooser_combo",
-            itemsCreator: function (op, callback) {
+            itemsCreator (op, callback) {
-                callback(BI.deepClone(Demo.CONSTANTS.ITEMS));
+                callback(deepClone(Demo.CONSTANTS.ITEMS));
-            }
+            },
         });
+        
         return {
             type: "bi.vertical",
             hgap: 200,
             vgap: 10,
-            items: [widget]
+            items: [widget],
         };
     }
-});
+}
-BI.shortcut("demo.value_chooser_combo", Demo.ValueChooserCombo);

demo/js/component/demo.valuechooserpane.js

@@ -1,15 +1,18 @@
-Demo.ValueChooserPane = BI.inherit(BI.Widget, {
+import { shortcut, Widget, deepClone } from "@/core";
-    props: {
+
-        baseCls: "demo-value-chooser-pane"
+@shortcut()
-    },
+export class ValueChooserPane extends Widget {
-    render: function () {
+    static xtype = "demo.value_chooser_pane";
+
+    props = { baseCls: "demo-value-chooser-pane" };
+
+    render() {
         return {
             type: "bi.value_chooser_pane",
-            items: BI.deepClone(Demo.CONSTANTS.ITEMS)
+            items: deepClone(Demo.CONSTANTS.ITEMS),
             // itemsCreator: function (op, callback) {
-            //     callback(BI.deepClone(Demo.CONSTANTS.ITEMS));
+            //     callback(deepClone(Demo.CONSTANTS.ITEMS));
             // }
         };
     }
-});
+}
-BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane);

demo/js/config/demo.pane.js

@@ -1,36 +1,34 @@
-/**
+import { shortcut } from "@/core";
- * author: young
+import { Pane as BIPane } from "@/base";
- * createdDate: 2018/11/30
- * description:
- */
-!(function () {
-    var Pane = BI.inherit(BI.Pane, {
-        props: {
 
-        },
+@shortcut()
+export class Pane extends BIPane {
+    static xtype = "demo.pane";
 
-        mounted: function () {
+    props = {};
-            console.log('loading pane mounted');
-        },
 
-        render: function () {
+    mounted() {
+        console.log("loading pane mounted");
+    }
+
+    render() {
         return {
             type: "bi.center_adapt",
-                items: [{
+            items: [
+                {
                     type: "bi.label",
-                    text: "this is pane center"
+                    text: "this is pane center",
-                }]
+                }
+            ],
         };
-        },
+    }
 
-        beforeRender: function (callback) {
+    beforeRender(callback) {
-            var self = this;
+        const self = this;
         this.loading();
-            setTimeout(function () {
+        setTimeout(() => {
             self.loaded();
             callback();
         }, 3000);
     }
-    });
+}
-    BI.shortcut("demo.pane", Pane);
-})();

demo/js/core/abstract/combination/demo.combo.js

@@ -1,25 +1,23 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, createItems, deepClone, map, delay, random, makeArray } from "@/core";
-    props: {
+import { Msg } from "@/base";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
-    years: [{
+export class Func extends Widget {
-        text: "2010年", value: 2010, iconCls: "close-ha-font"
+    static xtype = "demo.combo";
-    }, {
+
-        text: "2011年", value: 2011
+    props = { baseCls: "demo-func" };
-    }, {
+    years = [
-        text: "2012年", value: 2012, iconCls: "close-ha-font"
+        { text: "2010年", value: 2010, iconCls: "close-ha-font" },
-    }, {
+        { text: "2011年", value: 2011 },
-        text: "2013年", value: 2013
+        { text: "2012年", value: 2012, iconCls: "close-ha-font" },
-    }, {
+        { text: "2013年", value: 2013 },
-        text: "2014年", value: 2014, iconCls: "close-ha-font"
+        { text: "2014年", value: 2014, iconCls: "close-ha-font" },
-    }, {
+        { text: "2015年", value: 2015, iconCls: "close-ha-font" },
-        text: "2015年", value: 2015, iconCls: "close-ha-font"
+        { text: "2016年", value: 2016, iconCls: "close-ha-font" },
-    }, {
+        { text: "2017年", value: 2017, iconCls: "close-ha-font" }
-        text: "2016年", value: 2016, iconCls: "close-ha-font"
+    ];
-    }, {
+    child = [
-        text: "2017年", value: 2017, iconCls: "close-ha-font"
+        {
-    }],
-    child: [{
             type: "bi.combo_group",
             el: {
                 type: "bi.icon_text_icon_item",
@@ -27,469 +25,426 @@ Demo.Func = BI.inherit(BI.Widget, {
                 value: 2010,
                 height: 25,
                 iconCls1: "close-ha-font",
-            iconCls2: "close-ha-font"
+                iconCls2: "close-ha-font",
             },
-        items: [{
+            items: [
-            type: "bi.single_select_item",
+                { type: "bi.single_select_item", height: 25, text: "一月", value: 11 },
-            height: 25,
+                {
-            text: "一月",
-            value: 11
-        }, {
                     type: "bi.icon_text_icon_item",
                     height: 25,
                     text: "二月",
                     value: 12,
                     iconCls1: "close-ha-font",
                     iconCls2: "close-ha-font",
-            children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }]
+                    children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }],
-        }]
-    }, {
-        text: "2011年", value: 2011
-    }, {
-        text: "2012年", value: 2012, iconCls: "close-ha-font"
-    }, {
-        text: "2013年", value: 2013
-    }, {
-        text: "2014年", value: 2014, iconCls: "close-ha-font"
-    }, {
-        text: "2015年", value: 2015, iconCls: "close-ha-font"
-    }],
-
-    months: [[{
-        el: {
-            text: "一月", value: 1
-        }
-    }, {
-        el: {
-            text: "二月", value: 2
-        }
-    }], [{
-        el: {
-            text: "三月", value: 3
-        }
-    }, {
-        el: {
-            text: "四月", value: 4
-        }
-    }], [{
-        el: {
-            text: "五月", value: 5
-        }
-    }, {
-        el: {
-            text: "六月", value: 6
-        }
-    }], [{
-        el: {
-            text: "七月", value: 7
-        }
-    }, {
-        el: {
-            text: "八月", value: 8
-        }
-    }], [{
-        el: {
-            text: "九月", value: 9
-        }
-    }, {
-        el: {
-            text: "十月", value: 10
-        }
-    }], [{
-        el: {
-            text: "十一月", value: 11
-        }
-    }, {
-        el: {
-            text: "十二月", value: 12
-        }
-    }]],
-
-    dynamic: [
-        {
-            text: "2010年", value: 1
-        }, {
-            text: "20112222年", value: 2
-        }, {
-            text: "201233333年", value: 3
-        }, {
-            text: "2013年", value: 4
-        }, {
-            text: "2012324年", value: 5
-        }, {
-            text: "2015年", value: 6
-        }, {
-            text: "2016年", value: 7
-        }, {
-            text: "201744444444444444444444444444444444444年", value: 8
                 }
             ],
+        },
+        { text: "2011年", value: 2011 },
+        { text: "2012年", value: 2012, iconCls: "close-ha-font" },
+        { text: "2013年", value: 2013 },
+        { text: "2014年", value: 2014, iconCls: "close-ha-font" },
+        { text: "2015年", value: 2015, iconCls: "close-ha-font" }
+    ];
+    months = [
+        [{ el: { text: "一月", value: 1 } }, { el: { text: "二月", value: 2 } }],
+        [{ el: { text: "三月", value: 3 } }, { el: { text: "四月", value: 4 } }],
+        [{ el: { text: "五月", value: 5 } }, { el: { text: "六月", value: 6 } }],
+        [{ el: { text: "七月", value: 7 } }, { el: { text: "八月", value: 8 } }],
+        [{ el: { text: "九月", value: 9 } }, { el: { text: "十月", value: 10 } }],
+        [{ el: { text: "十一月", value: 11 } }, { el: { text: "十二月", value: 12 } }]
+    ];
+    dynamic = [
+        { text: "2010年", value: 1 },
+        { text: "20112222年", value: 2 },
+        { text: "201233333年", value: 3 },
+        { text: "2013年", value: 4 },
+        { text: "2012324年", value: 5 },
+        { text: "2015年", value: 6 },
+        { text: "2016年", value: 7 },
+        { text: "201744444444444444444444444444444444444年", value: 8 }
+    ];
+    week = [
+        { text: "周一", value: 100, iconClsLeft: "close-ha-font", iconClsRight: "close-font" },
+        { text: "周二", value: 101, iconClsLeft: "close-ha-font" },
+        { text: "周三", value: 102 },
+        { text: "周四", value: 103, iconClsRight: "close-ha-font" },
+        { text: "周五", value: 104, iconClsLeft: "close-ha-font", iconClsRight: "close-font" },
+        { text: "周六", value: 105, iconClsLeft: "close-font", iconClsRight: "close-ha-font" },
+        { text: "周日", value: 106, iconClsLeft: "close-font" }
+    ];
 
-    week: [{
+    _createTop() {
-        text: "周一", value: 100, iconClsLeft: "close-ha-font", iconClsRight: "close-font"
+        const self = this;
-    }, {
-        text: "周二", value: 101, iconClsLeft: "close-ha-font"
-    }, {
-        text: "周三", value: 102
-    }, {
-        text: "周四", value: 103, iconClsRight: "close-ha-font"
-    }, {
-        text: "周五", value: 104, iconClsLeft: "close-ha-font", iconClsRight: "close-font"
-    }, {
-        text: "周六", value: 105, iconClsLeft: "close-font", iconClsRight: "close-ha-font"
-    }, {
-        text: "周日", value: 106, iconClsLeft: "close-font"
-    }],
-    _createTop: function () {
-        var self = this;
 
-        var yearCombo = BI.createWidget({
+        const yearCombo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.button",
                 text: "简单下拉框",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
                     type: "bi.button_group",
-                    items: BI.createItems(BI.deepClone(this.years), {
+                    items: createItems(deepClone(this.years), {
                         type: "bi.single_select_radio_item",
                         height: 25,
-                        handler: function (v) {
+                        handler(v) {},
-
-                        }
                     }),
-                    layouts: [{
+                    layouts: [
-                        type: "bi.vertical"
+                        {
-                    }]
+                            type: "bi.vertical",
                         }
+                    ],
+                },
             },
-            width: 200
+            width: 200,
         });
 
-        var multiCombo = BI.createWidget({
+        var multiCombo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.button",
                 text: "多选下拉框",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
-                    items: BI.createItems(BI.deepClone(this.years), {
+                    items: createItems(deepClone(this.years), {
                         type: "bi.multi_select_item",
                         height: 25,
-                        handler: function (v) {
+                        handler(v) {},
-
-                        }
                     }),
                     chooseType: 1,
-                    layouts: [{
+                    layouts: [
-                        type: "bi.vertical"
+                        {
-                    }]
+                            type: "bi.vertical",
+                        }
+                    ],
                 },
                 tool: {
                     type: "bi.label",
                     text: "这是一个下拉框",
-                    height: 35
+                    height: 35,
                 },
-                tabs: [{
+                tabs: [
+                    {
                         type: "bi.multi_select_bar",
                         height: 25,
                         text: "全选",
-                    onCheck: function (v) {
+                        onCheck(v) {
                             if (v) {
-                            multiCombo.setValue(BI.map(BI.deepClone(self.years), "value"));
+                                multiCombo.setValue(map(deepClone(self.years), "value"));
                             } else {
                                 multiCombo.setValue([]);
                             }
-
                         },
-                    isAllCheckedBySelectedValue: function (selectedValue) {
+                        isAllCheckedBySelectedValue(selectedValue) {
                             return selectedValue.length == self.years.length;
                             //                        return true;
+                        },
                     }
-                }],
+                ],
-                buttons: [{
+                buttons: [
+                    {
                         type: "bi.text_button",
                         text: "清空",
-                    handler: function () {
+                        handler() {
                             multiCombo.setValue([]);
-                    }
+                        },
-                }, {
+                    },
+                    {
                         type: "bi.text_button",
                         text: "确定",
-                    handler: function () {
+                        handler() {
-                        BI.Msg.alert("", multiCombo.getValue());
+                            Msg.alert("", multiCombo.getValue());
+                        },
                     }
-                }]
+                ],
             },
-            width: 200
+            width: 200,
         });
 
-        var dynamicPopupCombo = BI.createWidget({
+        const dynamicPopupCombo = createWidget({
             type: "bi.combo",
             isNeedAdjustWidth: false,
             offsetStyle: "center",
             el: {
                 type: "bi.button",
                 text: "动态调整宽度",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
-                    items: BI.createItems(BI.deepClone(this.dynamic), {
+                    items: createItems(deepClone(this.dynamic), {
                         type: "bi.single_select_item",
-                        height: 25
+                        height: 25,
                     }),
-                    layouts: [{
+                    layouts: [
-                        type: "bi.vertical"
+                        {
-                    }]
+                            type: "bi.vertical",
                         }
+                    ],
+                },
             },
-            width: 200
+            width: 200,
         });
 
-        var dynamicCombo = BI.createWidget({
+        var dynamicCombo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.button",
                 text: "搜索",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
                     type: "bi.loader",
                     logic: {
                         dynamic: true,
-                        scrolly: true
+                        scrolly: true,
                     },
                     el: {
                         behaviors: {
-                            redmark: function () {
+                            redmark() {
                                 return true;
-                            }
                             },
-                        layouts: [{
-                            type: "bi.vertical"
-                        }]
                         },
-                    itemsCreator: function (options, popuplate) {
+                        layouts: [
-                        var times = options.times;
+                            {
-                        BI.delay(function () {
+                                type: "bi.vertical",
+                            }
+                        ],
+                    },
+                    itemsCreator(options, popuplate) {
+                        const times = options.times;
+                        delay(() => {
                             if (times == 3) {
-                                popuplate([{
+                                popuplate([
+                                    {
                                         type: "bi.single_select_item",
                                         text: "这是最后一个",
                                         value: "这是最后一个",
                                         py: "zszhyg",
-                                    height: 25
+                                        height: 25,
-                                }]);
+                                    }
+                                ]);
+
                                 return;
                             }
 
-                            var map = BI.map(BI.makeArray(3, null), function (i, v) {
+                            const map = map(makeArray(3, null), (i, v) => {
-                                var val = i + "_" + BI.random(1, 100);
+                                const val = `${i}_${random(1, 100)}`;
+
                                 return {
                                     type: "bi.single_select_item",
                                     text: val,
                                     value: val,
-                                    height: 25
+                                    height: 25,
                                 };
                             });
                             popuplate(map);
-
                         }, 1000);
-
                     },
-                    hasNext: function (options) {
+                    hasNext(options) {
                         return options.times < 3;
-                    }
                     },
-                buttons: [{
+                },
+                buttons: [
+                    {
                         type: "bi.text_button",
                         text: "清空",
-                    handler: function () {
+                        handler() {
                             dynamicCombo.setValue([]);
-                    }
+                        },
-                }, {
+                    },
+                    {
                         type: "bi.text_button",
                         text: "确定",
-                    handler: function () {
+                        handler() {
-                        BI.Msg.alert("", dynamicCombo.getValue());
+                            Msg.alert("", dynamicCombo.getValue());
+                        },
                     }
-                }]
+                ],
             },
-            width: 200
+            width: 200,
         });
 
-        return BI.createWidget({
+        return createWidget({
             type: "bi.left",
             items: [yearCombo, multiCombo, dynamicPopupCombo, dynamicCombo],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         });
-    },
+    }
 
-    _createBottom: function () {
+    _createBottom() {
-        var combo = BI.createWidget({
+        const combo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.text_button",
                 cls: "button-combo",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
                     type: "bi.button_group",
-                    items: BI.createItems(BI.deepClone(this.years), {
+                    items: createItems(deepClone(this.years), {
                         type: "bi.single_select_item",
                         iconWidth: 25,
                         height: 25,
-                        handler: function (v) {
+                        handler(v) {},
-
-                        }
                     }),
                     chooseType: 1,
-                    layouts: [{
+                    layouts: [
-                        type: "bi.vertical"
+                        {
-                    }]
+                            type: "bi.vertical",
                         }
+                    ],
                 },
-            width: 200
+            },
+            width: 200,
         });
-        combo.setValue(BI.deepClone(this.years)[0].value);
+        combo.setValue(deepClone(this.years)[0].value);
 
-        var childCombo = BI.createWidget({
+        const childCombo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.text_button",
                 cls: "button-combo",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
                     type: "bi.button_tree",
-                    items: BI.createItems(BI.deepClone(this.child), {
+                    items: createItems(deepClone(this.child), {
                         type: "bi.single_select_item",
                         height: 25,
-                        handler: function (v) {
+                        handler(v) {},
-
-                        }
                     }),
-                    layouts: [{
+                    layouts: [
-                        type: "bi.vertical"
+                        {
-                    }]
+                            type: "bi.vertical",
                         }
+                    ],
                 },
-            width: 200
+            },
+            width: 200,
         });
-        childCombo.setValue(BI.deepClone(this.child)[0].items[0].value);
+        childCombo.setValue(deepClone(this.child)[0].items[0].value);
 
-        var monthCombo = BI.createWidget({
+        const monthCombo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.button",
                 text: "多层样式下拉框",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
-                    items: BI.createItems(BI.deepClone(this.months), {
+                    items: createItems(deepClone(this.months), {
                         type: "bi.single_select_item",
                         cls: "button-combo",
-                        handler: function (v) {
+                        handler(v) {},
-
-                        }
                     }),
-                    layouts: [{
+                    layouts: [
+                        {
                             type: "bi.adaptive",
-                        items: [{
+                            items: [
+                                {
                                     el: {
                                         type: "bi.table",
                                         columns: 2,
                                         rows: 6,
                                         columnSize: [0.5, "fill"],
-                                rowSize: 30
+                                        rowSize: 30,
                                     },
                                     left: 4,
                                     right: 4,
                                     top: 2,
-                            bottom: 2
+                                    bottom: 2,
-                        }]
+                                }
-                    }, {
+                            ],
+                        },
+                        {
                             type: "bi.absolute",
-                        el: { left: 4, top: 2, right: 4, bottom: 2 }
+                            el: { left: 4, top: 2, right: 4, bottom: 2 },
-                    }]
                         }
+                    ],
+                },
             },
-            width: 200
+            width: 200,
         });
 
-        var yearCombo = BI.createWidget({
+        const yearCombo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.button",
                 text: "自定义控件",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
                     type: "bi.navigation",
                     direction: "bottom",
                     logic: {
-                        dynamic: true
+                        dynamic: true,
                     },
                     tab: {
                         height: 30,
-                        items: [{
+                        items: [
+                            {
                                 once: false,
                                 text: "后退",
                                 value: -1,
-                            cls: "mvc-button layout-bg3"
+                                cls: "mvc-button layout-bg3",
-                        }, {
+                            },
+                            {
                                 once: false,
                                 text: "前进",
                                 value: 1,
-                            cls: "mvc-button layout-bg4"
+                                cls: "mvc-button layout-bg4",
-                        }]
+                            }
+                        ],
                     },
-                    cardCreator: function (v) {
+                    cardCreator(v) {
-                        return BI.createWidget({
+                        return createWidget({
                             type: "bi.text_button",
                             whiteSpace: "normal",
-                            text: new Date().getFullYear() + v
+                            text: new Date().getFullYear() + v,
                         });
-                    }
-                }
                     },
-            width: 200
+                },
+            },
+            width: 200,
         });
 
-        return BI.createWidget({
+        return createWidget({
             type: "bi.left",
             items: [combo, childCombo, monthCombo, yearCombo],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         });
-    },
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.grid",
             columns: 1,
             rows: 2,
-            items: [{
+            items: [
+                {
                     column: 0,
                     row: 0,
-                el: this._createTop()
+                    el: this._createTop(),
-            }, {
+                },
+                {
                     column: 0,
                     row: 1,
-                el: this._createBottom()
+                    el: this._createBottom(),
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.combo", Demo.Func);

demo/js/core/abstract/combination/demo.combo2.js

@@ -1,33 +1,36 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.combo2";
 
-    _createEl: function () {
+    props = { baseCls: "demo-func" };
+
+    _createEl() {
         return {
             type: "bi.button",
             height: 25,
-            text: "点击"
+            text: "点击",
         };
-    },
+    }
 
-    oneCombo: function () {
+    oneCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustLength: 5,
             el: this._createEl(),
             popup: {
                 el: {
                     type: "bi.layout",
-                    height: 500
+                    height: 500,
                 },
-                maxHeight: 400
+                maxHeight: 400,
-            }
-        });
             },
+        });
+    }
 
-    twoCombo: function () {
+    twoCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustXOffset: 25,
             adjustYOffset: 5,
@@ -36,14 +39,14 @@ Demo.Func = BI.inherit(BI.Widget, {
             popup: {
                 el: {
                     type: "bi.layout",
-                    height: 1200
+                    height: 1200,
-                }
+                },
-            }
-        });
             },
+        });
+    }
 
-    threeCombo: function () {
+    threeCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustYOffset: 5,
             el: this._createEl(),
@@ -51,14 +54,14 @@ Demo.Func = BI.inherit(BI.Widget, {
             popup: {
                 el: {
                     type: "bi.layout",
-                    height: 1200
+                    height: 1200,
-                }
+                },
-            }
-        });
             },
+        });
+    }
 
-    fourCombo: function () {
+    fourCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustXOffset: 25,
             adjustYOffset: 5,
@@ -68,14 +71,14 @@ Demo.Func = BI.inherit(BI.Widget, {
             popup: {
                 el: {
                     type: "bi.layout",
-                    height: 1200
+                    height: 1200,
-                }
+                },
-            }
-        });
             },
+        });
+    }
 
-    fiveCombo: function () {
+    fiveCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustXOffset: 25,
             adjustYOffset: 5,
@@ -85,15 +88,15 @@ Demo.Func = BI.inherit(BI.Widget, {
             popup: {
                 el: {
                     type: "bi.layout",
-                    height: 1200
+                    height: 1200,
                 },
-                maxHeight: 2000
+                maxHeight: 2000,
-            }
-        });
             },
+        });
+    }
 
-    sixCombo: function () {
+    sixCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustXOffset: 25,
             adjustYOffset: 5,
@@ -103,14 +106,14 @@ Demo.Func = BI.inherit(BI.Widget, {
             popup: {
                 el: {
                     type: "bi.layout",
-                    height: 1200
+                    height: 1200,
-                }
-            }
-        });
                 },
+            },
+        });
+    }
 
-    sevenCombo: function () {
+    sevenCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustXOffset: 25,
             adjustYOffset: 5,
@@ -123,14 +126,14 @@ Demo.Func = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.layout",
                     width: 200,
-                    height: 1200
+                    height: 1200,
-                }
-            }
-        });
                 },
+            },
+        });
+    }
 
-    eightCombo: function () {
+    eightCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             adjustXOffset: 25,
             adjustYOffset: 5,
@@ -143,21 +146,22 @@ Demo.Func = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.layout",
                     width: 200,
-                    height: 200
+                    height: 200,
-                }
-            }
-        });
                 },
+            },
+        });
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.grid",
             hgap: 10,
             vgap: 5,
-            items: [[this.oneCombo(), this.twoCombo(), this.threeCombo()],
+            items: [
+                [this.oneCombo(), this.twoCombo(), this.threeCombo()],
                 [this.fourCombo(), this.fiveCombo(), this.sixCombo()],
-                [this.sevenCombo(), this.eightCombo()]]
+                [this.sevenCombo(), this.eightCombo()]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.combo2", Demo.Func);

demo/js/core/abstract/combination/demo.combo3.js

@@ -1,19 +1,22 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.combo3";
+
+    props = { baseCls: "demo-func" };
 
-    _createEl: function () {
+    _createEl() {
         return {
             type: "bi.label",
-            cls:"bi-border",
+            cls: "bi-border",
             height: "100%",
-            text: "点击"
+            text: "点击",
         };
-    },
+    }
 
-    oneCombo: function () {
+    oneCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             direction: "right,innerRight",
             isNeedAdjustWidth: false,
@@ -23,14 +26,14 @@ Demo.Func = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.layout",
                     width: 200,
-                    height: 200
+                    height: 200,
-                }
+                },
-            }
-        });
             },
+        });
+    }
 
-    twoCombo: function () {
+    twoCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             direction: "right,innerRight",
             isNeedAdjustWidth: false,
@@ -40,14 +43,14 @@ Demo.Func = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.layout",
                     width: 1000,
-                    height: 200
+                    height: 200,
-                }
+                },
-            }
-        });
             },
+        });
+    }
 
-    threeCombo: function () {
+    threeCombo() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.combo",
             direction: "right,innerRight",
             isNeedAdjustWidth: false,
@@ -57,19 +60,18 @@ Demo.Func = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.layout",
                     width: 400,
-                    height: 200
+                    height: 200,
-                }
+                },
-            }
-        });
             },
+        });
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.grid",
             hgap: 10,
             vgap: 5,
-            items: [[this.oneCombo()], [this.twoCombo()], [this.threeCombo()]]
+            items: [[this.oneCombo()], [this.twoCombo()], [this.threeCombo()]],
         };
     }
-});
+}
-BI.shortcut("demo.combo3", Demo.Func);

demo/js/core/abstract/combination/demo.combo_group.js

@@ -1,89 +1,81 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, createItems, deepClone  } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.combo_group";
 
-    child: [{
+    props = { baseCls: "demo-func" };
+    child = [
+        {
             type: "bi.combo_group",
-        el: {
+            el: { type: "bi.icon_text_icon_item", text: "2010年", value: 2010, height: 25, iconCls: "close-ha-font" },
-            type: "bi.icon_text_icon_item",
+            items: [
-            text: "2010年",
+                { type: "bi.single_select_item", height: 25, text: "一月", value: 11 },
-            value: 2010,
+                {
-            height: 25,
-            iconCls: "close-ha-font"
-        },
-        items: [{
-            type: "bi.single_select_item",
-            height: 25,
-            text: "一月",
-            value: 11
-        }, {
                     type: "bi.icon_text_icon_item",
                     height: 25,
                     text: "二月",
                     value: 12,
                     iconCls1: "close-ha-font",
                     iconCls2: "close-ha-font",
-            children: [{type: "bi.single_select_item", text: "一号", value: 101, height: 25}]
+                    children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }],
-        }]
+                }
-    }, {
+            ],
-        text: "2011年", value: 2011
+        },
-    }, {
+        { text: "2011年", value: 2011 },
-        text: "2012年", value: 2012, iconCls: "close-ha-font"
+        { text: "2012年", value: 2012, iconCls: "close-ha-font" },
-    }, {
+        { text: "2013年", value: 2013 },
-        text: "2013年", value: 2013
+        { text: "2014年", value: 2014, iconCls: "close-ha-font" },
-    }, {
+        { text: "2015年", value: 2015, iconCls: "close-ha-font" }
-        text: "2014年", value: 2014, iconCls: "close-ha-font"
+    ];
-    }, {
-        text: "2015年", value: 2015, iconCls: "close-ha-font"
-    }],
 
-    _createBottom: function () {
+    _createBottom() {
-        var childCombo = BI.createWidget({
+        const childCombo = createWidget({
             type: "bi.combo",
             el: {
                 type: "bi.text_button",
                 cls: "button-combo",
-                height: 30
+                height: 30,
             },
             popup: {
                 el: {
                     type: "bi.button_tree",
-                    items: BI.createItems(BI.deepClone(this.child), {
+                    items: createItems(deepClone(this.child), {
                         type: "bi.single_select_item",
                         height: 25,
-                        handler: function (v) {
+                        handler(v) {},
-
-                        }
                     }),
-                    layouts: [{
+                    layouts: [
-                        type: "bi.vertical"
+                        {
-                    }]
+                            type: "bi.vertical",
                         }
+                    ],
                 },
-            width: 200
+            },
+            width: 200,
         });
-        childCombo.setValue(BI.deepClone(this.child)[0].items[0].value);
+        childCombo.setValue(deepClone(this.child)[0].items[0].value);
 
-        return BI.createWidget({
+        return createWidget({
             type: "bi.left",
             items: [childCombo],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         });
-    },
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.grid",
             columns: 1,
             rows: 1,
-            items: [{
+            items: [
+                {
                     column: 0,
                     row: 0,
-                el: this._createBottom()
+                    el: this._createBottom(),
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.combo_group", Demo.Func);

demo/js/core/abstract/combination/demo.expander.js

@@ -1,41 +1,54 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createItems } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.expander";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
         return {
             type: "bi.vertical",
             hgap: 30,
             vgap: 20,
-            items: [{
+            items: [
+                {
                     type: "bi.expander",
                     el: {
                         type: "bi.icon_text_node",
                         cls: "pull-right-ha-font mvc-border",
                         height: 25,
-                    text: "Expander"
+                        text: "Expander",
                     },
                     popup: {
                         cls: "mvc-border",
-                    items: BI.createItems([{
+                        items: createItems(
+                            [
+                                {
                                     text: "项目1",
-                        value: 1
+                                    value: 1,
-                    }, {
+                                },
+                                {
                                     text: "项目2",
-                        value: 2
+                                    value: 2,
-                    }, {
+                                },
+                                {
                                     text: "项目3",
-                        value: 3
+                                    value: 3,
-                    }, {
+                                },
+                                {
                                     text: "项目4",
-                        value: 4
+                                    value: 4,
-                    }], {
+                                }
+                            ],
+                            {
                                 type: "bi.single_select_item",
-                        height: 25
+                                height: 25,
-                    })
+                            }
+                        ),
+                    },
                 }
-            }]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.expander", Demo.Func);

demo/js/core/abstract/combination/demo.loader.js

@@ -1,27 +1,33 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, deepClone, map, extend } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.loader";
-        var self = this;
+
+    props = { baseCls: "demo-func" };
+
+    render() {
+        const self = this;
         this.all = 0;
-        var items = BI.deepClone(Demo.CONSTANTS.ITEMS);
+        const items = deepClone(Demo.CONSTANTS.ITEMS);
+
         return {
             type: "bi.loader",
-            itemsCreator: function (options, populate) {
+            itemsCreator(options, populate) {
-                setTimeout(function () {
+                setTimeout(() => {
-                    populate(BI.map(items.slice((options.times - 1) * 10, options.times * 10), function (i, v) {
+                    populate(
-                        return BI.extend(v, {
+                        map(items.slice((options.times - 1) * 10, options.times * 10), (i, v) =>
+                            extend(v, {
                                 type: "bi.single_select_item",
-                            height: 25
+                                height: 25,
-                        });
+                            })
-                    }));
+                        )
+                    );
                 }, 1000);
             },
-            hasNext: function (options) {
+            hasNext(options) {
                 return options.times * 10 < items.length;
-            }
+            },
         };
     }
-});
+}
-BI.shortcut("demo.loader", Demo.Func);

demo/js/core/abstract/combination/demo.navigation.js

@@ -1,35 +1,41 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, random, bind } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    _createNav: function (v) {
+    static xtype = "demo.navigation";
-        return BI.createWidget({
+
+    props = { baseCls: "demo-func" };
+
+    _createNav(v) {
+        return createWidget({
             type: "bi.label",
-            cls: "layout-bg" + BI.random(1, 8),
+            cls: `layout-bg${random(1, 8)}`,
-            text: "第" + v + "页"
+            text: `第${v}页`,
         });
-    },
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.navigation",
             showIndex: 0,
             tab: {
                 height: 30,
-                items: [{
+                items: [
+                    {
                         once: false,
                         text: "后退",
                         value: -1,
-                    cls: "mvc-button layout-bg3"
+                        cls: "mvc-button layout-bg3",
-                }, {
+                    },
+                    {
                         once: false,
                         text: "前进",
                         value: 1,
-                    cls: "mvc-button layout-bg4"
+                        cls: "mvc-button layout-bg4",
-                }]
+                    }
+                ],
             },
-            cardCreator: BI.bind(this._createNav, this)
+            cardCreator: bind(this._createNav, this),
         };
     }
-});
+}
-BI.shortcut("demo.navigation", Demo.Func);

demo/js/core/abstract/combination/demo.sercher.js

@@ -1,84 +1,125 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createItems, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.searcher";
+
+    props = { baseCls: "demo-func" };
 
-    _createItems: function (items) {
+    _createItems(items) {
-        return BI.createItems(items, {
+        return createItems(items, {
             type: "bi.multi_select_item",
             height: 25,
-            handler: function (v) {
+            handler(v) {},
-
-            }
         });
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this;
+        const self = this;
-        var items = [{
+        const items = [
-            text: "2010年", value: 2010, py: "2010n", title: "1111111111111111111111111111111111"
+            {
-        }, {
+                text: "2010年",
-            text: "2011年", value: 2011, py: "2011n", title: "1111111111111111111111111111111111"
+                value: 2010,
-        }, {
+                py: "2010n",
-            text: "2012年", value: 2012, py: "2012n", title: "1111111111111111111111111111111111"
+                title: "1111111111111111111111111111111111",
-        }, {
+            },
-            text: "2013年", value: 2013, py: "2013n", title: "1111111111111111111111111111111111"
+            {
-        }, {
+                text: "2011年",
-            text: "2014年", value: 2014, py: "2014n", title: "1111111111111111111111111111111111"
+                value: 2011,
-        }, {
+                py: "2011n",
-            text: "2015年", value: 2015, py: "2015n", title: "1111111111111111111111111111111111"
+                title: "1111111111111111111111111111111111",
-        }, {
+            },
-            text: "2016年", value: 2016, py: "2016n", title: "1111111111111111111111111111111111"
+            {
-        }, {
+                text: "2012年",
-            text: "2017年", value: 2017, py: "2017n", title: "1111111111111111111111111111111111"
+                value: 2012,
-        }];
+                py: "2012n",
+                title: "1111111111111111111111111111111111",
+            },
+            {
+                text: "2013年",
+                value: 2013,
+                py: "2013n",
+                title: "1111111111111111111111111111111111",
+            },
+            {
+                text: "2014年",
+                value: 2014,
+                py: "2014n",
+                title: "1111111111111111111111111111111111",
+            },
+            {
+                text: "2015年",
+                value: 2015,
+                py: "2015n",
+                title: "1111111111111111111111111111111111",
+            },
+            {
+                text: "2016年",
+                value: 2016,
+                py: "2016n",
+                title: "1111111111111111111111111111111111",
+            },
+            {
+                text: "2017年",
+                value: 2017,
+                py: "2017n",
+                title: "1111111111111111111111111111111111",
+            }
+        ];
 
-        var adapter = BI.createWidget({
+        const adapter = createWidget({
             type: "bi.button_group",
             cls: "layout-bg1",
             items: this._createItems(items),
             chooseType: 1,
             behaviors: {},
-            layouts: [{
+            layouts: [
-                type: "bi.vertical"
+                {
-            }]
+                    type: "bi.vertical",
+                }
+            ],
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: adapter,
                     top: 50,
                     left: 50,
                     width: 200,
-                height: 100
+                    height: 100,
-            }]
+                }
+            ],
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.absolute",
                         width: 200,
                         height: 30,
-                    items: [{
+                        items: [
+                            {
                                 el: {
                                     type: "bi.searcher",
-                            adapter: adapter,
+                                    adapter,
                                     width: 200,
-                            height: 30
+                                    height: 30,
                                 },
                                 left: 0,
                                 right: 0,
                                 top: 0,
-                        bottom: 0
+                                bottom: 0,
-                    }]
+                            }
+                        ],
                     },
                     top: 100,
-                left: 300
+                    left: 300,
-            }]
+                }
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.searcher", Demo.Func);

demo/js/core/abstract/combination/demo.switcher.js

@@ -1,59 +1,73 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, createItems } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.switcher";
+
+    props = { baseCls: "demo-func" };
 
-        var adapter = BI.createWidget({
+    render() {
+        const adapter = createWidget({
             type: "bi.label",
             cls: "layout-bg2",
-            text: "将在该处弹出switcher"
+            text: "将在该处弹出switcher",
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: adapter,
                     top: 50,
                     left: 20,
                     width: 200,
-                height: 300
+                    height: 300,
-            }]
+                }
+            ],
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
             hgap: 30,
             vgap: 20,
-            items: [{
+            items: [
+                {
                     type: "bi.switcher",
                     el: {
                         type: "bi.button",
                         height: 25,
-                    text: "Switcher"
+                        text: "Switcher",
                     },
                     popup: {
                         cls: "mvc-border layout-bg5",
-                    items: BI.createItems([{
+                        items: createItems(
+                            [
+                                {
                                     text: "项目1",
-                        value: 1
+                                    value: 1,
-                    }, {
+                                },
+                                {
                                     text: "项目2",
-                        value: 2
+                                    value: 2,
-                    }, {
+                                },
+                                {
                                     text: "项目3",
-                        value: 3
+                                    value: 3,
-                    }, {
+                                },
+                                {
                                     text: "项目4",
-                        value: 4
+                                    value: 4,
-                    }], {
+                                }
+                            ],
+                            {
                                 type: "bi.single_select_item",
-                        height: 25
+                                height: 25,
-                    })
+                            }
+                        ),
                     },
-                adapter: adapter
+                    adapter,
-            }]
+                }
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.switcher", Demo.Func);

demo/js/core/abstract/combination/demo.tab.js

@@ -1,69 +1,80 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, bind } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
+    static xtype = "demo.tab";
+
+    props = { baseCls: "demo-func" };
 
-    _createTabs: function (v) {
+    _createTabs(v) {
         switch (v) {
             case 1:
-                return BI.createWidget({
+                return createWidget({
                     type: "bi.label",
                     cls: "layout-bg1",
-                    text: "面板1"
+                    text: "面板1",
                 });
             case 2:
-                return BI.createWidget({
+                return createWidget({
                     type: "bi.label",
                     cls: "layout-bg2",
-                    text: "面板2"
+                    text: "面板2",
                 });
         }
-    },
+    }
 
-    render: function () {
+    render() {
-        this.tab = BI.createWidget({
+        this.tab = createWidget({
             type: "bi.button_group",
             height: 30,
-            items: [{
+            items: [
+                {
                     text: "Tab1",
                     value: 1,
                     width: 50,
-                cls: "mvc-button layout-bg3"
+                    cls: "mvc-button layout-bg3",
-            }, {
+                },
+                {
                     text: "Tab2",
                     value: 2,
                     width: 50,
-                cls: "mvc-button layout-bg4"
+                    cls: "mvc-button layout-bg4",
-            }],
+                }
-            layouts: [{
+            ],
+            layouts: [
+                {
                     type: "bi.center_adapt",
-                items: [{
+                    items: [
+                        {
                             el: {
                                 type: "bi.horizontal",
-                        width: 100
+                                width: 100,
+                            },
                         }
-                }]
+                    ],
-            }]
+                }
+            ],
         });
 
-        var tab = BI.createWidget({
+        const tab = createWidget({
             direction: "custom",
             type: "bi.tab",
             element: this,
             tab: this.tab,
-            cardCreator: BI.bind(this._createTabs, this)
+            cardCreator: bind(this._createTabs, this),
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: this.tab,
                     left: 200,
-                top: 200
+                    top: 200,
-            }]
+                }
+            ],
         });
 
         tab.setSelect(2);
     }
-});
+}
-BI.shortcut("demo.tab", Demo.Func);

demo/js/core/abstract/demo.button_group.js

@@ -1,62 +1,80 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+import { ButtonGroup } from "@/base";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
-    render: function () {
+export class Func extends Widget {
-        var ref;
+    static xtype = "demo.button_group";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
+        let ref;
+
         return {
             type: "bi.vertical",
-            items: [{
+            items: [
+                {
                     type: "bi.button_group",
-                ref: function (_ref) {
+                    ref(_ref) {
                         ref = _ref;
                     },
-                chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE,
+                    chooseType: ButtonGroup.CHOOSE_TYPE_NONE,
-                layouts: [{
+                    layouts: [
+                        {
                             type: "bi.vertical",
-                    items: [{
+                            items: [
+                                {
                                     type: "bi.vtape",
-                        height: 200
+                                    height: 200,
-                    }]
+                                }
-                }],
+                            ],
-                items: [{
+                        }
+                    ],
+                    items: [
+                        {
                             el: {
                                 type: "bi.label",
-                        text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)"
+                                text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)",
+                            },
+                            height: 150,
                         },
-                    height: 150
+                        {
-                }, {
                             el: {
                                 type: "bi.button",
-                        text: "1"
+                                text: "1",
+                            },
                         }
-                }]
+                    ],
-            }, {
+                },
+                {
                     type: "bi.button",
                     text: "populate",
-                handler: function () {
+                    handler() {
-                    ref.populate([{
+                        ref.populate([
+                            {
                                 el: {
                                     type: "bi.label",
-                            text: "1"
+                                    text: "1",
                                 },
-                        height: 50
+                                height: 50,
-                    }, {
+                            },
+                            {
                                 el: {
                                     type: "bi.button",
-                            text: "2"
+                                    text: "2",
+                                },
+                                height: 50,
                             },
-                        height: 50
+                            {
-                    }, {
                                 el: {
                                     type: "bi.label",
-                            text: "3"
+                                    text: "3",
+                                },
                             }
-                    }]);
+                        ]);
+                    },
                 }
-            }]
+            ],
-
         };
     }
-});
+}
-BI.shortcut("demo.button_group", Demo.Func);

demo/js/core/abstract/demo.button_tree.js

@@ -1,26 +1,36 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+import { ButtonGroup } from "@/base";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
-    render: function () {
+export class Func extends Widget {
+    static xtype = "demo.button_tree";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
         return {
             type: "bi.button_tree",
-            chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+            chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
-            layouts: [{
+            layouts: [
-                type: "bi.vertical"
+                {
-            }, {
+                    type: "bi.vertical",
-                type: "bi.center_adapt"
+                },
-            }],
+                {
-            items: [{
+                    type: "bi.center_adapt",
+                }
+            ],
+            items: [
+                {
                     type: "bi.label",
                     text: "0",
-                value: 0
+                    value: 0,
-            }, {
+                },
+                {
                     type: "bi.button",
                     text: "1",
-                value: 1
+                    value: 1,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.button_tree", Demo.Func);

demo/js/core/abstract/demo.collection_view.js

@@ -1,41 +1,46 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.collection_view";
-        var items = [];
+
-        var cellCount = 100;
+    props = { baseCls: "demo-func" };
-        for (var i = 0; i < cellCount; i++) {
+
+    render() {
+        const items = [];
+        const cellCount = 100;
+        for (let i = 0; i < cellCount; i++) {
             items[i] = {
                 type: "bi.label",
-                text: i
+                text: i,
             };
         }
-        var grid = BI.createWidget({
+        const grid = createWidget({
             type: "bi.collection_view",
             width: 400,
             height: 300,
-            items: items,
+            items,
-            cellSizeAndPositionGetter: function (index) {
+            cellSizeAndPositionGetter(index) {
                 return {
-                    x: index % 10 * 50,
+                    x: (index % 10) * 50,
                     y: Math.floor(index / 10) * 50,
                     width: 50,
-                    height: 50
+                    height: 50,
                 };
-            }
+            },
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: grid,
                     left: 10,
                     right: 10,
                     top: 10,
-                bottom: 10
+                    bottom: 10,
-            }]
+                }
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.collection_view", Demo.Func);

demo/js/core/abstract/demo.custom_tree.js

@@ -1,52 +1,64 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget, deepClone } from "@/core";
-    props: {
+import { Msg } from "@/base";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
+export class Func extends Widget {
+    static xtype = "demo.custom_tree";
 
-    _createDefaultTree: function () {
+    props = { baseCls: "demo-func" };
-        var TREEITEMS = [{id: -1, pId: -2, value: "根目录", open: true, type: "bi.plus_group_node", height: 25},
+
-            {id: 1, pId: -1, value: "第一级目录1", type: "bi.plus_group_node", height: 25},
+    _createDefaultTree() {
-            {id: 11, pId: 1, value: "第二级文件1", type: "bi.single_select_item", height: 25},
+        const TREEITEMS = [
-            {id: 12, pId: 1, value: "第二级目录2", type: "bi.plus_group_node", height: 25},
+            { id: -1, pId: -2, value: "根目录", open: true, type: "bi.plus_group_node", height: 25 },
-            {id: 121, pId: 12, value: "第三级目录1", type: "bi.plus_group_node", height: 25},
+            { id: 1, pId: -1, value: "第一级目录1", type: "bi.plus_group_node", height: 25 },
-            {id: 122, pId: 12, value: "第三级文件1", type: "bi.single_select_item", height: 25},
+            { id: 11, pId: 1, value: "第二级文件1", type: "bi.single_select_item", height: 25 },
-            {id: 1211, pId: 121, value: "第四级目录1", type: "bi.plus_group_node", height: 25},
+            { id: 12, pId: 1, value: "第二级目录2", type: "bi.plus_group_node", height: 25 },
-            {id: 12111, pId: 1211, value: "第五级文件1", type: "bi.single_select_item", height: 25},
+            { id: 121, pId: 12, value: "第三级目录1", type: "bi.plus_group_node", height: 25 },
-            {id: 2, pId: -1, value: "第一级目录2", type: "bi.plus_group_node", height: 25},
+            { id: 122, pId: 12, value: "第三级文件1", type: "bi.single_select_item", height: 25 },
-            {id: 21, pId: 2, value: "第二级目录3", type: "bi.plus_group_node", height: 25},
+            { id: 1211, pId: 121, value: "第四级目录1", type: "bi.plus_group_node", height: 25 },
-            {id: 22, pId: 2, value: "第二级文件2", type: "bi.single_select_item", height: 25},
+            { id: 12111, pId: 1211, value: "第五级文件1", type: "bi.single_select_item", height: 25 },
-            {id: 211, pId: 21, value: "第三级目录2", type: "bi.plus_group_node", height: 25},
+            { id: 2, pId: -1, value: "第一级目录2", type: "bi.plus_group_node", height: 25 },
-            {id: 212, pId: 21, value: "第三级文件2", type: "bi.single_select_item", height: 25},
+            { id: 21, pId: 2, value: "第二级目录3", type: "bi.plus_group_node", height: 25 },
-            {id: 2111, pId: 211, value: "第四级文件1", type: "bi.single_select_item", height: 25}];
+            { id: 22, pId: 2, value: "第二级文件2", type: "bi.single_select_item", height: 25 },
-        this.tree = BI.createWidget({
+            { id: 211, pId: 21, value: "第三级目录2", type: "bi.plus_group_node", height: 25 },
+            { id: 212, pId: 21, value: "第三级文件2", type: "bi.single_select_item", height: 25 },
+            { id: 2111, pId: 211, value: "第四级文件1", type: "bi.single_select_item", height: 25 }
+        ];
+        this.tree = createWidget({
             type: "bi.custom_tree",
             el: {
                 type: "bi.button_tree",
                 chooseType: 0,
-                layouts: [{
+                layouts: [
+                    {
                         type: "bi.vertical",
-                    hgap: 30
+                        hgap: 30,
-                }]
+                    }
+                ],
             },
-            items: BI.deepClone(TREEITEMS)
+            items: deepClone(TREEITEMS),
         });
+
         return this.tree;
-    },
+    }
 
-    _createAsyncTree: function () {
+    _createAsyncTree() {
-        this.asyncTree = BI.createWidget({
+        this.asyncTree = createWidget({
             type: "bi.custom_tree",
-            itemsCreator: function (op, callback) {
+            itemsCreator(op, callback) {
-                if (!op.node) {// 根节点
+                if (!op.node) {
-                    callback([{
+                    // 根节点
+                    callback([
+                        {
                             id: 1,
                             pId: 0,
                             type: "bi.plus_group_node",
                             text: "test1",
                             value: 1,
                             height: 25,
-                        isParent: true
+                            isParent: true,
-                    }, {
+                        },
+                        {
                             id: 2,
                             pId: 0,
                             type: "bi.plus_group_node",
@@ -54,8 +66,9 @@ Demo.Func = BI.inherit(BI.Widget, {
                             value: 1,
                             isParent: true,
                             open: true,
-                        height: 25
+                            height: 25,
-                    }]);
+                        }
+                    ]);
                 } else {
                     if (op.node.id == 1) {
                         callback([
@@ -66,7 +79,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                                 text: "test11",
                                 value: 11,
                                 height: 25,
-                                isParent: true
+                                isParent: true,
                             },
                             {
                                 id: 12,
@@ -74,7 +87,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                                 type: "bi.single_select_item",
                                 text: "test12",
                                 value: 12,
-                                height: 35
+                                height: 35,
                             },
                             {
                                 id: 13,
@@ -82,7 +95,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                                 type: "bi.single_select_item",
                                 text: "test13",
                                 value: 13,
-                                height: 35
+                                height: 35,
                             },
                             {
                                 id: 14,
@@ -90,7 +103,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                                 type: "bi.single_select_item",
                                 text: "test14",
                                 value: 14,
-                                height: 35
+                                height: 35,
                             },
                             {
                                 id: 15,
@@ -98,7 +111,7 @@ Demo.Func = BI.inherit(BI.Widget, {
                                 type: "bi.single_select_item",
                                 text: "test15",
                                 value: 15,
-                                height: 35
+                                height: 35,
                             },
                             {
                                 id: 16,
@@ -106,18 +119,19 @@ Demo.Func = BI.inherit(BI.Widget, {
                                 type: "bi.single_select_item",
                                 text: "test16",
                                 value: 16,
-                                height: 35
+                                height: 35,
                             },
-                            {id: 17, pId: 1, type: "bi.single_select_item", text: "test17", value: 17, height: 35}
+                            { id: 17, pId: 1, type: "bi.single_select_item", text: "test17", value: 17, height: 35 }
                         ]);
                     } else if (op.node.id == 2) {
-                        callback([{
+                        callback([
+                            {
                                 id: 21,
                                 pId: 2,
                                 type: "bi.single_select_item",
                                 text: "test21",
                                 value: 21,
-                            height: 35
+                                height: 35,
                             },
                             {
                                 id: 22,
@@ -125,17 +139,20 @@ Demo.Func = BI.inherit(BI.Widget, {
                                 type: "bi.single_select_item",
                                 text: "test22",
                                 value: 22,
-                            height: 35
+                                height: 35,
-                        }]);
+                            }
+                        ]);
                     } else if (op.node.id == 11) {
-                        callback([{
+                        callback([
+                            {
                                 id: 111,
                                 pId: 11,
                                 type: "bi.single_select_item",
                                 text: "test111",
                                 value: 111,
-                            height: 35
+                                height: 35,
-                        }]);
+                            }
+                        ]);
                     }
                 }
             },
@@ -145,60 +162,71 @@ Demo.Func = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.button_tree",
                     chooseType: 0,
-                    layouts: [{
+                    layouts: [
+                        {
                             type: "bi.vertical",
                             hgap: 30,
-                        vgap: 0
+                            vgap: 0,
-                    }]
-                }
                         }
+                    ],
+                },
+            },
         });
+
         return this.asyncTree;
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this;
+        const self = this;
-        BI.createWidget({
+        createWidget({
             type: "bi.grid",
             columns: 2,
             rows: 1,
             element: this,
-            items: [{
+            items: [
+                {
                     column: 0,
                     row: 0,
                     el: {
                         type: "bi.vtape",
                         items: [
                             {
-                            el: this._createDefaultTree()
+                                el: this._createDefaultTree(),
                             },
                             {
                                 el: {
                                     type: "bi.center",
                                     hgap: 10,
-                                items: [{
+                                    items: [
+                                        {
                                             type: "bi.text_button",
                                             cls: "mvc-button layout-bg2",
                                             text: "getValue",
                                             height: 30,
-                                    handler: function () {
+                                            handler() {
-                                        BI.Msg.alert("", JSON.stringify(self.tree.getValue()));
+                                                Msg.alert("", JSON.stringify(self.tree.getValue()));
-                                    }
+                                            },
-                                }, {
+                                        },
+                                        {
                                             type: "bi.text_button",
                                             cls: "mvc-button layout-bg2",
                                             text: "getNodeByValue(第一级目录1)",
                                             height: 30,
-                                    handler: function () {
+                                            handler() {
-                                        BI.Msg.alert("", "节点名称为: " + self.tree.getNodeByValue("第一级目录1").getValue());
+                                                Msg.alert(
-                                    }
+                                                    "",
-                                }]
+                                                    `节点名称为: ${self.tree.getNodeByValue("第一级目录1").getValue()}`
+                                                );
                                             },
-                            height: 30
                                         }
-                    ]
+                                    ],
+                                },
+                                height: 30,
                             }
-            }, {
+                        ],
+                    },
+                },
+                {
                     column: 1,
                     row: 0,
                     el: {
@@ -207,39 +235,48 @@ Demo.Func = BI.inherit(BI.Widget, {
                             {
                                 type: "bi.label",
                                 text: "异步加载数据",
-                            height: 30
+                                height: 30,
                             },
                             {
-                            el: this._createAsyncTree()
+                                el: this._createAsyncTree(),
                             },
                             {
                                 el: {
                                     type: "bi.center",
                                     hgap: 10,
-                                items: [{
+                                    items: [
+                                        {
                                             type: "bi.text_button",
                                             cls: "mvc-button layout-bg2",
                                             text: "getValue",
                                             height: 30,
-                                    handler: function () {
+                                            handler() {
-                                        BI.Msg.alert("", JSON.stringify(self.asyncTree.getValue()));
+                                                Msg.alert("", JSON.stringify(self.asyncTree.getValue()));
-                                    }
+                                            },
-                                }, {
+                                        },
+                                        {
                                             type: "bi.text_button",
                                             cls: "mvc-button layout-bg2",
                                             text: "getNodeById(11)",
                                             height: 30,
-                                    handler: function () {
+                                            handler() {
-                                        BI.Msg.alert("", "节点名称为: " + (self.asyncTree.getNodeById(11) && self.asyncTree.getNodeById(11).getText()));
+                                                Msg.alert(
+                                                    "",
+                                                    `节点名称为: ${
+                                                        self.asyncTree.getNodeById(11) &&
+                                                        self.asyncTree.getNodeById(11).getText()
+                                                    }`
+                                                );
+                                            },
                                         }
-                                }]
+                                    ],
                                 },
-                            height: 30
+                                height: 30,
                             }
-                    ]
+                        ],
+                    },
                 }
-            }]
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.custom_tree", Demo.Func);

demo/js/core/abstract/demo.grid_view.js

@@ -1,54 +1,62 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, createWidget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.grid_view";
-        var items = [];
+
-        var rowCount = 10000, columnCount = 100;
+    props = { baseCls: "demo-func" };
-        for (var i = 0; i < rowCount; i++) {
+
+    render() {
+        const items = [];
+        const rowCount = 10000,
+            columnCount = 100;
+        for (let i = 0; i < rowCount; i++) {
             items[i] = [];
-            for (var j = 0; j < columnCount; j++) {
+            for (let j = 0; j < columnCount; j++) {
                 items[i][j] = {
                     type: "bi.label",
-                    text: i + "-" + j
+                    text: `${i}-${j}`,
                 };
             }
         }
-        var grid = BI.createWidget({
+        const grid = createWidget({
             type: "bi.grid_view",
             width: 400,
             height: 300,
             estimatedRowSize: 30,
             estimatedColumnSize: 100,
-            items: items,
+            items,
             scrollTop: 100,
-            rowHeightGetter: function () {
+            rowHeightGetter() {
                 return 30;
             },
-            columnWidthGetter: function () {
+            columnWidthGetter() {
                 return 100;
-            }
+            },
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.grid",
                         columns: 1,
                         rows: 1,
-                    items: [{
+                        items: [
+                            {
                                 column: 0,
                                 row: 0,
-                        el: grid
+                                el: grid,
-                    }]
+                            }
+                        ],
                     },
                     left: 10,
                     right: 10,
                     top: 10,
-                bottom: 10
+                    bottom: 10,
-            }]
+                }
+            ],
         });
     }
-});
+}
-BI.shortcut("demo.grid_view", Demo.Func);

demo/js/core/abstract/demo.list_view.js

@@ -1,22 +1,25 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, map, extend } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.list_view";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
         return {
             type: "bi.list_view",
             el: {
-                type: "bi.left"
+                type: "bi.left",
             },
-            items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) {
+            items: map(Demo.CONSTANTS.ITEMS, (i, item) =>
-                return BI.extend({}, item, {
+                extend({}, item, {
                     type: "bi.label",
                     width: 200,
                     height: 200,
-                    text: (i + 1) + "." + item.text
+                    text: `${i + 1}.${item.text}`,
-                });
                 })
+            ),
         };
     }
-});
+}
-BI.shortcut("demo.list_view", Demo.Func);

demo/js/core/abstract/demo.virtual_group.js

@@ -1,111 +1,86 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget, map, range, deepClone } from "@/core";
-    props: {
+import { ButtonGroup } from "@/base";
-        baseCls: "demo-func"
+
-    },
+@shortcut()
+export class Func extends Widget {
+    static xtype = "demo.virtual_group";
+
+    props = { baseCls: "demo-func" };
 
-    _createItems: function () {
+    _createItems() {
-        var items = BI.map(BI.range(1000), function (i) {
+        const items = map(range(1000), i => {
             return {
                 type: "demo.virtual_group_item",
                 value: i,
-                key: i + 1
+                key: i + 1,
             };
         });
+
         return items;
-    },
+    }
+
+    render() {
+        const self = this;
+        const buttonGroupItems = self._createItems();
+        const virtualGroupItems = self._createItems();
 
-    render: function () {
-        var self = this;
-        var buttonGroupItems = self._createItems();
-        var virtualGroupItems = self._createItems();
         return {
             type: "bi.vertical",
             vgap: 20,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     cls: "layout-bg5",
                     height: 50,
-                text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出"
+                    text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出",
-            }, {
+                },
+                {
                     type: "bi.button_group",
                     width: 500,
                     height: 300,
-                ref: function () {
+                    ref() {
                         self.buttonGroup = this;
                     },
-                chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+                    chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
-                layouts: [{
+                    layouts: [
-                    type: "bi.vertical"
+                        {
-                }],
+                            type: "bi.vertical",
-                items: this._createItems()
+                        }
-            }, {
+                    ],
+                    items: this._createItems(),
+                },
+                {
                     type: "bi.button",
                     text: "演示button_group的刷新",
-                handler: function () {
+                    handler() {
                         buttonGroupItems.shift();
-                    self.buttonGroup.populate(BI.deepClone(buttonGroupItems));
+                        self.buttonGroup.populate(deepClone(buttonGroupItems));
-                }
+                    },
-            }, {
+                },
+                {
                     type: "bi.virtual_group",
                     width: 500,
                     height: 300,
-                ref: function () {
+                    ref() {
                         self.virtualGroup = this;
                     },
-                chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+                    chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
-                layouts: [{
+                    layouts: [
-                    type: "bi.vertical"
+                        {
-                }],
+                            type: "bi.vertical",
-                items: this._createItems()
+                        }
-            }, {
+                    ],
+                    items: this._createItems(),
+                },
+                {
                     type: "bi.button",
                     text: "演示virtual_group的刷新",
-                handler: function () {
+                    handler() {
                         virtualGroupItems.shift();
-                    self.virtualGroup.populate(BI.deepClone(virtualGroupItems));
+                        self.virtualGroup.populate(deepClone(virtualGroupItems));
-                }
-            }]
-
-        };
-    }
-});
-BI.shortcut("demo.virtual_group", Demo.Func);
-
-Demo.Item = BI.inherit(BI.Widget, {
-    props: {
-        baseCls: "demo-item",
-        height: 30
                     },
-
+                }
-    render: function () {
+            ],
-        var self = this, o = this.options;
-        return {
-            type: "bi.label",
-            ref: function () {
-                self.label = this;
-            },
-            height: this.options.height,
-            text: "key:" + o.key + ",随机数" + BI.UUID()
         };
-    },
-
-    shouldUpdate: function (nextProps) {
-        var o = this.options;
-        return o.type !== nextProps.type || o.key !== nextProps.key || o.value !== nextProps.value;
-    },
-
-    update: function (item) {
-        this.label.setText(item.value);
-        console.log("更新了一项");
-        return true;// 返回是不是更新成功
-    },
-
-    created: function () {
-        console.log("创建了一项");
-    },
-
-    destroyed: function () {
-        console.log("删除了一项");
     }
-});
+}
-BI.shortcut("demo.virtual_group_item", Demo.Item);

demo/js/core/abstract/demo.virtual_group_item.js

@@ -0,0 +1,43 @@
+import { shortcut, Widget, UUID } from "@/core";
+
+@shortcut()
+export class Item extends Widget {
+    static xtype = "demo.virtual_group_item";
+
+    props = { baseCls: "demo-item", height: 30 };
+
+    render() {
+        const self = this,
+            o = this.options;
+        
+        return {
+            type: "bi.label",
+            ref () {
+                self.label = this;
+            },
+            height: this.options.height,
+            text: `key:${o.key},随机数${UUID()}`,
+        };
+    }
+
+    shouldUpdate(nextProps) {
+        const o = this.options;
+        
+        return o.type !== nextProps.type || o.key !== nextProps.key || o.value !== nextProps.value;
+    }
+
+    update(item) {
+        this.label.setText(item.value);
+        console.log("更新了一项");
+        
+        return true; // 返回是不是更新成功
+    }
+
+    created() {
+        console.log("创建了一项");
+    }
+
+    destroyed() {
+        console.log("删除了一项");
+    }
+}

demo/js/core/abstract/demo.virtual_list.js

@@ -1,18 +1,21 @@
-Demo.Func = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-func"
+@shortcut()
-    },
+export class Func extends Widget {
-    render: function () {
+    static xtype = "demo.virtual_list";
+
+    props = { baseCls: "demo-func" };
+
+    render() {
         return {
             type: "bi.virtual_list",
-            items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) {
+            items: map(Demo.CONSTANTS.ITEMS, (i, item) =>
-                return BI.extend({}, item, {
+                extend({}, item, {
                     type: "bi.label",
                     height: 30,
-                    text: (i + 1) + "." + item.text
+                    text: `${i + 1}.${item.text}`,
-                });
                 })
+            ),
         };
     }
-});
+}
-BI.shortcut("demo.virtual_list", Demo.Func);

demo/js/core/layout/demo.absolute.js

@@ -1,22 +1,27 @@
-Demo.AbsoluteLayout = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-absolute"
+@shortcut()
-    },
+export class AbsoluteLayout extends Widget {
-    render: function () {
+    static xtype = "demo.absolute";
+
+    props = { baseCls: "demo-absolute" };
+
+    render() {
         return {
             type: "bi.absolute",
-            items: [{
+            items: [
+                {
                     el: {
                         type: "bi.label",
                         text: "绝对布局",
                         cls: "layout-bg1",
                         width: 300,
-                    height: 200
+                        height: 200,
                     },
                     left: 100,
-                top: 100
+                    top: 100,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.absolute", Demo.AbsoluteLayout);

demo/js/core/layout/demo.border.js

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

demo/js/core/layout/demo.center.js

@@ -1,35 +1,40 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by User on 2017/3/22.
+
- */
+@shortcut()
-Demo.CenterLayout = BI.inherit(BI.Widget, {
+export class CenterLayout extends Widget {
-    props: {
+    static xtype = "demo.center_layout";
-        baseCls: "demo-center"
+
-    },
+    props = { baseCls: "demo-center" };
-    render: function () {
+
+    render() {
         return {
             type: "bi.center",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     text: "其实是一个grid嵌套absolute的实现",
                     cls: "layout-bg1",
-                whiteSpace: "normal"
+                    whiteSpace: "normal",
-            }, {
+                },
+                {
                     type: "bi.label",
                     text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal",
                     cls: "layout-bg2",
-                whiteSpace: "normal"
+                    whiteSpace: "normal",
-            }, {
+                },
+                {
                     type: "bi.label",
                     text: "Center 3",
-                cls: "layout-bg3"
+                    cls: "layout-bg3",
-            }, {
+                },
+                {
                     type: "bi.label",
                     text: "Center 4",
-                cls: "layout-bg5"
+                    cls: "layout-bg5",
-            }],
+                }
+            ],
             hgap: 20,
-            vgap: 20
+            vgap: 20,
         };
     }
-});
+}
-BI.shortcut("demo.center_layout", Demo.CenterLayout);

demo/js/core/layout/demo.center_adapt.js

@@ -1,18 +1,23 @@
-Demo.CenterAdapt = BI.inherit(BI.Widget, {
+import { shortcut, Widget } from "@/core";
-    props: {
+
-        baseCls: "demo-absolute"
+@shortcut()
-    },
+export class CenterAdapt extends Widget {
-    render: function () {
+    static xtype = "demo.center_adapt";
+
+    props = { baseCls: "demo-absolute" };
+
+    render() {
         return {
             type: "bi.center_adapt",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     text: "水平垂直居中",
                     width: 300,
                     height: 200,
-                cls: "layout-bg1"
+                    cls: "layout-bg1",
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.center_adapt", Demo.CenterAdapt);

demo/js/core/layout/demo.float_center.js

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

demo/js/core/layout/demo.flow.js

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

demo/js/core/layout/demo.grid.js

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

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

@@ -1,126 +1,153 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by User on 2017/3/21.
+import { VerticalAlign, HorizontalAlign } from "@/core";
- */
+
-Demo.Horizontal = BI.inherit(BI.Widget, {
+@shortcut()
-    props: {
+export class Horizontal extends Widget {
-        baseCls: "demo-horizontal"
+    static xtype = "demo.horizontal";
-    },
+
-    render: function () {
+    props = { baseCls: "demo-horizontal" };
+
+    render() {
         return {
             type: "bi.vertical",
             vgap: 10,
-            items: [{
+            items: [
+                {
                     type: "bi.horizontal",
                     height: 150,
                     hgap: 10,
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             whiteSpace: "normal",
                             text: "因为大多数场景下都需要垂直居中，所以这个布局一般会被vertical_adapt布局设置scrollx=true取代",
                             cls: "layout-bg3",
                             width: 500,
-                    height: 50
+                            height: 50,
-                }, {
+                        },
+                        {
                             type: "bi.label",
                             text: "水平布局",
                             cls: "layout-bg4",
                             width: 300,
-                    height: 30
+                            height: 30,
-                }, {
+                        },
+                        {
                             type: "bi.label",
                             text: "水平布局",
                             cls: "layout-bg5",
                             width: 300,
-                    height: 30
+                            height: 30,
-                }, {
+                        },
+                        {
                             type: "bi.label",
                             text: "水平布局",
                             cls: "layout-bg6",
                             width: 300,
-                    height: 30
+                            height: 30,
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.layout",
                     height: 1,
-                cls: "bi-border-bottom bi-high-light-border"
+                    cls: "bi-border-bottom bi-high-light-border",
-            }, {
+                },
+                {
                     type: "bi.horizontal",
                     height: 150,
                     verticalAlign: BI.VerticalAlign.Middle,
                     horizontalAlign: BI.HorizontalAlign.Left,
                     vgap: 10,
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             text: "以horizontal实现的vertical_adapt垂直居中",
                             cls: "layout-bg1",
                             width: 300,
-                    height: 30
+                            height: 30,
-                }, {
+                        },
+                        {
                             type: "bi.label",
                             text: "以horizontal实现的vertical_adapt垂直居中",
                             cls: "layout-bg2",
                             width: 300,
-                    height: 30
+                            height: 30,
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.layout",
                     height: 1,
-                cls: "bi-border-bottom bi-high-light-border"
+                    cls: "bi-border-bottom bi-high-light-border",
-            }, {
+                },
+                {
                     type: "bi.horizontal",
                     height: 150,
                     verticalAlign: BI.VerticalAlign.Top,
                     horizontalAlign: BI.HorizontalAlign.Center,
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)",
                             cls: "layout-bg1",
                             width: 300,
-                    height: 30
+                            height: 30,
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.layout",
                     height: 1,
-                cls: "bi-border-bottom bi-high-light-border"
+                    cls: "bi-border-bottom bi-high-light-border",
-            }, {
+                },
+                {
                     type: "bi.horizontal",
                     height: 150,
                     verticalAlign: BI.VerticalAlign.Top,
                     horizontalAlign: BI.HorizontalAlign.Center,
                     columnSize: [300, "fill"],
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             text: "以horizontal代替horizontal_adapt实现的用于水平适应布局",
                             cls: "layout-bg1",
-                    height: 30
+                            height: 30,
-                }, {
+                        },
+                        {
                             type: "bi.label",
                             text: "以horizontal代替horizontal_adapt实现的水平自适应列",
                             cls: "layout-bg2",
-                    height: 30
+                            height: 30,
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.layout",
                     height: 1,
-                cls: "bi-border-bottom bi-high-light-border"
+                    cls: "bi-border-bottom bi-high-light-border",
-            }, {
+                },
+                {
                     type: "bi.center_adapt",
                     height: 150,
                     verticalAlign: BI.VerticalAlign.Middle,
                     horizontalAlign: BI.HorizontalAlign.Center,
-                items: [{
+                    items: [
+                        {
                             type: "bi.label",
                             text: "以horizontal代替center_adapt实现的水平垂直居中",
                             width: 300,
                             height: 100,
-                    cls: "layout-bg1"
+                            cls: "layout-bg1",
-                }]
+                        }
-            }, {
+                    ],
+                },
+                {
                     type: "bi.layout",
                     height: 1,
-                cls: "bi-border-bottom bi-high-light-border"
+                    cls: "bi-border-bottom bi-high-light-border",
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.horizontal", Demo.Horizontal);

demo/js/core/layout/demo.horizontal_adapt.js

@@ -1,57 +1,64 @@
-/**
+import { shortcut, Widget, createWidget } from "@/core";
- * Created by User on 2017/3/22.
+
- */
+@shortcut()
-Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
+export class HorizontalAdapt extends Widget {
-    props: {
+    static xtype = "demo.horizontal_adapt";
-        baseCls: "demo-horizontal-adapt"
+
-    },
+    props = { baseCls: "demo-horizontal-adapt" };
 
-    _createLayout: function () {
+    _createLayout() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.horizontal_adapt",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     text: "例子1:可用做水平居中",
                     cls: "layout-bg1",
                     width: 300,
-                height: 30
+                    height: 30,
-            }]
+                }
+            ],
         });
-    },
+    }
 
-    _createAdaptLayout: function () {
+    _createAdaptLayout() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.horizontal_adapt",
             columnSize: [300, "fill"],
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     text: "例子2:用于水平适应布局",
                     cls: "layout-bg1",
-                height: 30
+                    height: 30,
-            }, {
+                },
+                {
                     type: "bi.label",
                     text: "水平自适应列",
                     cls: "layout-bg2",
-                height: 30
+                    height: 30,
-            }]
+                }
+            ],
         });
-    },
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.grid",
             columns: 1,
             rows: 2,
-            items: [{
+            items: [
+                {
                     column: 0,
                     row: 0,
-                el: this._createLayout()
+                    el: this._createLayout(),
-            }, {
+                },
+                {
                     column: 0,
                     row: 1,
-                el: this._createAdaptLayout()
+                    el: this._createAdaptLayout(),
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt);

demo/js/core/layout/demo.horizontal_auto.js

@@ -1,41 +1,45 @@
-/**
+import { shortcut, Widget, createWidget } from "@/core";
- * Created by User on 2017/3/22.
+
- */
+@shortcut()
-Demo.HorizontalAuto = BI.inherit(BI.Widget, {
+export class HorizontalAuto extends Widget {
-    props: {
+    static xtype = "demo.horizontal_auto";
-        baseCls: "demo-horizontal-auto"
-    },
 
-    _createLayout: function () {
+    props = { baseCls: "demo-horizontal-auto" };
-        return BI.createWidget({
+
+    _createLayout() {
+        return createWidget({
             type: "bi.horizontal_auto",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     text: "水平居中",
                     cls: "layout-bg1",
                     width: 300,
-                height: 30
+                    height: 30,
-            }, {
+                },
+                {
                     type: "bi.label",
                     text: "水平居中优先使用该布局",
                     cls: "layout-bg2",
                     width: 300,
-                height: 30
+                    height: 30,
-            }]
+                }
+            ],
         });
-    },
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.grid",
             columns: 1,
             rows: 2,
-            items: [{
+            items: [
+                {
                     column: 0,
                     row: 0,
-                el: this._createLayout()
+                    el: this._createLayout(),
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.horizontal_auto", Demo.HorizontalAuto);

demo/js/core/layout/demo.horizontal_float.js

@@ -1,21 +1,22 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by User on 2017/3/22.
- */
-Demo.HorizontalFloat = BI.inherit(BI.Widget, {
-    props: {
-        baseCls: "demo-horizontal-float"
-    },
 
-    render: function () {
+@shortcut()
+export class HorizontalFloat extends Widget {
+    static xtype = "demo.horizontal_float";
+
+    props = { baseCls: "demo-horizontal-float" };
+
+    render() {
         return {
             type: "bi.horizontal_float",
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     text: "浮动式水平居中布局方案，用于宽度未知的情况",
                     cls: "layout-bg1",
-                height: 30
+                    height: 30,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.horizontal_float", Demo.HorizontalFloat);

demo/js/core/layout/demo.htape.js

@@ -1,11 +1,12 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by User on 2017/3/22.
+
- */
+@shortcut()
-Demo.HtapeLayout = BI.inherit(BI.Widget, {
+export class HtapeLayout extends Widget {
-    props: {
+    static xtype = "demo.htape";
-        baseCls: "demo-htape"
+
-    },
+    props = { baseCls: "demo-htape" };
-    render: function () {
+
+    render() {
         return {
             type: "bi.htape",
             items: [
@@ -14,25 +15,26 @@ Demo.HtapeLayout = BI.inherit(BI.Widget, {
                     el: {
                         type: "bi.label",
                         text: "1",
-                        cls: "bi-background"
+                        cls: "bi-background",
-                    }
+                    },
-                }, {
+                },
+                {
                     width: 200,
                     el: {
                         type: "bi.label",
                         text: "2",
-                        cls: "layout-bg2"
+                        cls: "layout-bg2",
-                    }
+                    },
-                }, {
+                },
+                {
                     width: "fill",
                     el: {
                         type: "bi.label",
                         text: "3",
-                        cls: "layout-bg3"
+                        cls: "layout-bg3",
-                    }
+                    },
                 }
-            ]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.htape", Demo.HtapeLayout);

demo/js/core/layout/demo.left_right_vertical_adapt.js

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

demo/js/core/layout/demo.table.js

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

demo/js/core/layout/demo.td.js

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

demo/js/core/layout/demo.vertical.js

@@ -1,26 +1,29 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by User on 2017/3/21.
+
- */
+@shortcut()
-Demo.VerticalLayout = BI.inherit(BI.Widget, {
+export class VerticalLayout extends Widget {
-    props: {
+    static xtype = "demo.vertical";
-        baseCls: "demo-vertical"
+
-    },
+    props = { baseCls: "demo-vertical" };
-    render: function () {
+
+    render() {
         return {
             type: "bi.vertical",
             vgap: 10,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     cls: "layout-bg3",
                     text: "垂直布局",
-                height: 30
+                    height: 30,
-            }, {
+                },
+                {
                     type: "bi.label",
                     cls: "layout-bg4",
                     text: "垂直布局",
-                height: 30
+                    height: 30,
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.vertical", Demo.VerticalLayout);

demo/js/core/layout/demo.vertical_adapt.js

@@ -1,42 +1,46 @@
-/**
+import { shortcut, Widget, createWidget } from "@/core";
- * Created by User on 2017/3/22.
+
- */
+@shortcut()
-Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
+export class VerticalAdaptLayout extends Widget {
-    props: {
+    static xtype = "demo.vertical_adapt";
-        baseCls: "demo-vertical-adapt"
-    },
 
-    _createLayout: function () {
+    props = { baseCls: "demo-vertical-adapt" };
-        return BI.createWidget({
+
+    _createLayout() {
+        return createWidget({
             type: "bi.vertical_adapt",
             vgap: 10,
-            items: [{
+            items: [
+                {
                     type: "bi.label",
                     text: "垂直居中",
                     cls: "layout-bg1",
                     width: 300,
-                height: 30
+                    height: 30,
-            }, {
+                },
+                {
                     type: "bi.label",
                     text: "垂直居中",
                     cls: "layout-bg2",
                     width: 300,
-                height: 30
+                    height: 30,
-            }]
+                }
+            ],
         });
-    },
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.grid",
             columns: 2,
             rows: 1,
-            items: [{
+            items: [
+                {
                     column: 0,
                     row: 0,
-                el: this._createLayout()
+                    el: this._createLayout(),
-            }]
+                }
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout);

demo/js/core/layout/demo.vtape.js

@@ -1,11 +1,12 @@
-/**
+import { shortcut, Widget } from "@/core";
- * Created by User on 2017/3/22.
+
- */
+@shortcut()
-Demo.VtapeLayout = BI.inherit(BI.Widget, {
+export class VtapeLayout extends Widget {
-    props: {
+    static xtype = "demo.vtape";
-        baseCls: "demo-vtape"
+
-    },
+    props = { baseCls: "demo-vtape" };
-    render: function () {
+
+    render() {
         return {
             type: "bi.vtape",
             vgap: 10,
@@ -15,27 +16,28 @@ Demo.VtapeLayout = BI.inherit(BI.Widget, {
                     el: {
                         type: "bi.label",
                         text: "1",
-                        cls: "layout-bg1"
+                        cls: "layout-bg1",
                     },
                     tgap: 10,
-                    vgap: 10
+                    vgap: 10,
-                }, {
+                },
+                {
                     height: 200,
                     el: {
                         type: "bi.label",
                         text: "2",
-                        cls: "layout-bg2"
+                        cls: "layout-bg2",
-                    }
+                    },
-                }, {
+                },
+                {
                     height: "fill",
                     el: {
                         type: "bi.label",
                         text: "3",
-                        cls: "layout-bg3"
+                        cls: "layout-bg3",
-                    }
+                    },
                 }
-            ]
+            ],
         };
     }
-});
+}
-BI.shortcut("demo.vtape", Demo.VtapeLayout);

demo/js/core/popup/demo.layer.js

@@ -1,68 +1,78 @@
-/**
+import { shortcut, Widget, UUID } from "@/core";
- * Created by Windy on 2017/12/13.
+import { Layers } from "@/base";
- */
+
-Demo.Func = BI.inherit(BI.Widget, {
+@shortcut()
-    props: {
+export class Func extends Widget {
-        baseCls: "demo-func"
+    static xtype = "demo.layer";
-    },
+
-    render: function () {
+    props = { baseCls: "demo-func" };
-        var self = this, id1 = BI.UUID(), id2 = BI.UUID();
+
+    render() {
+        const self = this,
+            id1 = UUID(),
+            id2 = UUID();
+
         return {
             type: "bi.vertical",
             vgap: 10,
-            items: [{
+            items: [
+                {
                     type: "bi.button",
                     text: "create形式创建layer, 遮住当前面板, 返回创建的面板对象",
                     height: 30,
-                handler: function () {
+                    handler() {
-                    BI.Layers.create(id1, self, {
+                        Layers.create(id1, self, {
-                        //偏移量
+                            // 偏移量
                             offset: {
                                 left: 10,
                                 right: 10,
                                 top: 10,
-                            bottom: 10
+                                bottom: 10,
                             },
                             type: "bi.center_adapt",
                             cls: "bi-card",
-                        items: [{
+                            items: [
+                                {
                                     type: "bi.button",
                                     text: "点击关闭",
-                            handler: function () {
+                                    handler() {
-                                BI.Layers.hide(id1);
+                                        Layers.hide(id1);
+                                    },
                                 }
-                        }]
+                            ],
                         });
-                    BI.Layers.show(id1);
+                        Layers.show(id1);
-                }
+                    },
-            }, {
+                },
+                {
                     type: "bi.button",
                     text: "make形式创建layer,可以指定放到哪个面板内,这里指定当前面板(默认放在body下撑满), 返回创建的面板对象",
                     height: 30,
-                handler: function () {
+                    handler() {
-                    BI.Layers.make(id2, self, {
+                        Layers.make(id2, self, {
-                        //偏移量
+                            // 偏移量
                             offset: {
                                 left: 10,
                                 right: 10,
                                 top: 10,
-                            bottom: 10
+                                bottom: 10,
                             },
                             type: "bi.center_adapt",
                             cls: "bi-card",
-                        items: [{
+                            items: [
+                                {
                                     type: "bi.button",
                                     text: "点击关闭",
-                            handler: function () {
+                                    handler() {
-                                BI.Layers.remove(id2);
+                                        Layers.remove(id2);
+                                    },
                                 }
-                        }]
+                            ],
                         });
-                    BI.Layers.show(id2);
+                        Layers.show(id2);
+                    },
                 }
-            }]
+            ],
         };
     }
-});
+}
-
-BI.shortcut("demo.layer", Demo.Func);