FineUI 2.0 init

8 years ago · 77baedaee8
173 changed files with 1950 additions and 2309 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -58,6 +58,11 @@ module.exports = function (grunt) {
            baseCss: {
                src: ['src/css/base/**/*.css'],
                dest: 'dist/base.css'
+            },
+
+            demoJs: {
+                src: ['demo/**/*.js'],
+                dest: 'demo.js'
            }
        },

@ -106,7 +111,7 @@ module.exports = function (grunt) {
        },
        watch: {
            scripts: {
-                files: ['src/**/*.js'],
+                files: ['src/**/*.js', 'demo/**/*.js'],
                tasks: ['concat'],
                options: {
                    spanw: true,
--- a/demo.css
+++ b/demo.css
@ -0,0 +1,3 @@
+.bg1{
+    background: #00B83F;
+}
--- a/index.html
+++ b/index.html
@ -8,11 +8,13 @@
          href="./dist/core.css"/>
    <link rel="stylesheet" type="text/css"
          href="./dist/base.css"/>
+    <link rel="stylesheet" type="text/css"
+          href="demo.css"/>

    <script src="./dist/core.js"></script>
    <script src="./dist/base.js"></script>
    <script src="./dist/case.js"></script>
-    <script src="./index.js"></script>
+    <script src="demo.js"></script>
 </head>
 <body>
 <div id="wrapper"></div>
--- a/demo.js
+++ b/demo.js
@ -0,0 +1,104 @@
+$(function () {
+    var ref;
+    var w = BI.createWidget({
+        type: "bi.float_center_adapt",
+        items: [{
+            el: {
+                type: "bi.layout",
+                cls: 'bg1',
+                width: 100,
+                height: 100
+            },
+            left: 0,
+            top: 0
+        }]
+    });
+    var Widget = BI.inherit(BI.Widget, {
+        props: {
+            a: {}
+        },
+        init: function () {
+            console.log("init");
+        },
+        beforeCreated: function () {
+            console.log("beforeCreated");
+        },
+        render: function () {
+            console.log("render");
+            var items = [], header = [], columnSize = [];
+
+            var rowCount = 100, columnCount = 100;
+            for (var i = 0; i < 1; i++) {
+                header[i] = [];
+                for (var j = 0; j < columnCount; j++) {
+                    header[i][j] = {
+                        type: "bi.label",
+                        text: "表头" + i + "-" + j
+                    }
+                    columnSize[j] = 100;
+                }
+            }
+            for (var i = 0; i < rowCount; i++) {
+                items[i] = [];
+                for (var j = 0; j < columnCount; j++) {
+                    items[i][j] = {
+                        type: "bi.label",
+                        text: (i < 3 ? 0 : i) + "-" + j
+                    }
+                }
+            }
+
+            var table = BI.createWidget({
+                type: "bi.resizable_table",
+                el: {
+                    type: "bi.collection_table",
+                    isNeedMerge: true,
+                    mergeCols: [0, 1],
+                    mergeRule: function (col1, col2) {
+                        return BI.isEqual(col1, col2);
+                    }
+                },
+                width: 600,
+                height: 500,
+                isResizeAdapt: true,
+                isNeedResize: true,
+                isNeedMerge: true,
+                isNeedFreeze: true,
+                freezeCols: [0, 1],
+                columnSize: columnSize,
+                items: items,
+                header: header
+            });
+            BI.createWidget({
+                type: "bi.absolute",
+                element: this,
+                items: [{
+                    el: table,
+                    left: 10,
+                    right: 10,
+                    top: 10,
+                    bottom: 10
+                }]
+            })
+        },
+        created: function () {
+            console.log("created");
+        },
+        mounted: function () {
+            console.log("mounted");
+        },
+        destroyed: function () {
+            console.log("destroyed")
+        }
+    });
+    $.shortcut("t", Widget);
+    BI.createWidget({
+        type: "t",
+        ref: function (_ref) {
+            console.log(_ref);
+            ref = _ref;
+        },
+        element: '#wrapper'
+    })
+    // ref.destroy();
+})
--- a/demo/app.js
+++ b/demo/app.js
@ -0,0 +1,104 @@
+$(function () {
+    var ref;
+    var w = BI.createWidget({
+        type: "bi.float_center_adapt",
+        items: [{
+            el: {
+                type: "bi.layout",
+                cls: 'bg1',
+                width: 100,
+                height: 100
+            },
+            left: 0,
+            top: 0
+        }]
+    });
+    var Widget = BI.inherit(BI.Widget, {
+        props: {
+            a: {}
+        },
+        init: function () {
+            console.log("init");
+        },
+        beforeCreated: function () {
+            console.log("beforeCreated");
+        },
+        render: function () {
+            console.log("render");
+            var items = [], header = [], columnSize = [];
+
+            var rowCount = 100, columnCount = 100;
+            for (var i = 0; i < 1; i++) {
+                header[i] = [];
+                for (var j = 0; j < columnCount; j++) {
+                    header[i][j] = {
+                        type: "bi.label",
+                        text: "表头" + i + "-" + j
+                    }
+                    columnSize[j] = 100;
+                }
+            }
+            for (var i = 0; i < rowCount; i++) {
+                items[i] = [];
+                for (var j = 0; j < columnCount; j++) {
+                    items[i][j] = {
+                        type: "bi.label",
+                        text: (i < 3 ? 0 : i) + "-" + j
+                    }
+                }
+            }
+
+            var table = BI.createWidget({
+                type: "bi.resizable_table",
+                el: {
+                    type: "bi.collection_table",
+                    isNeedMerge: true,
+                    mergeCols: [0, 1],
+                    mergeRule: function (col1, col2) {
+                        return BI.isEqual(col1, col2);
+                    }
+                },
+                width: 600,
+                height: 500,
+                isResizeAdapt: true,
+                isNeedResize: true,
+                isNeedMerge: true,
+                isNeedFreeze: true,
+                freezeCols: [0, 1],
+                columnSize: columnSize,
+                items: items,
+                header: header
+            });
+            BI.createWidget({
+                type: "bi.absolute",
+                element: this,
+                items: [{
+                    el: table,
+                    left: 10,
+                    right: 10,
+                    top: 10,
+                    bottom: 10
+                }]
+            })
+        },
+        created: function () {
+            console.log("created");
+        },
+        mounted: function () {
+            console.log("mounted");
+        },
+        destroyed: function () {
+            console.log("destroyed")
+        }
+    });
+    $.shortcut("t", Widget);
+    BI.createWidget({
+        type: "t",
+        ref: function (_ref) {
+            console.log(_ref);
+            ref = _ref;
+        },
+        element: '#wrapper'
+    })
+    // ref.destroy();
+})
--- a/dist/base.js
+++ b/dist/base.js
@ -20537,7 +20537,7 @@ BI.Pane = BI.inherit(BI.Widget, {
            });
            BI.createWidget({
                type: "bi.vertical",
-                element: this.element,
+                element: this,
                items: [this._tipText],
                bgap: 25
            });
@ -20570,7 +20570,7 @@ BI.Pane = BI.inherit(BI.Widget, {
            this._loading.element.css("zIndex", 1);
            BI.createWidget({
                type: "bi.absolute",
-                element: this.element,
+                element: this,
                items: [{
                    el: this._loading,
                    left: 0,
@ -20932,7 +20932,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                self.$mask.invisible();
                BI.createWidget({
                    type: "bi.absolute",
-                    element: self.element,
+                    element: self,
                    items: [{
                        el: self.$mask,
                        left: 0,
@ -21366,94 +21366,6 @@ BI.Canvas = BI.inherit(BI.Widget, {
    }
 });
 $.shortcut("bi.canvas", BI.Canvas);/**
- * 图表控件
- * @class BI.Chart
- * @extends BI.Widget
- */
-BI.Chart = BI.inherit(BI.Pane, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.Chart.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-chart"
-        })
-    },
-
-    _init: function () {
-        BI.Chart.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-
-        this.isInit = false;
-        this.isSetOptions = false;
-        this.wants2SetData = false;
-        var width = 0;
-        var height = 0;
-
-        this._resizer = BI.debounce(function () {
-            if (self.element.is(":visible") && self.vanCharts) {
-                self.vanCharts.resize();
-            }
-        }, 30);
-        BI.Resizers.add(this.getName(), function (e) {
-            if (BI.isWindow(e.target) && self.element.is(":visible")) {
-                var newW = self.element.width(), newH = self.element.height();
-                if (newW > 0 && newH > 0 && (width !== newW || height !== newH)) {
-                    self._resizer();
-                    width = newW;
-                    height = newH;
-                }
-            }
-        });
-    },
-
-    _setData: function () {
-        this.vanCharts && this.vanCharts.setData(this.config);
-    },
-
-    resize: function () {
-        if (this.element.is(":visible") && this.isSetOptions === true) {
-            this._resizer();
-        }
-    },
-
-    magnify: function () {
-        this.vanCharts && this.vanCharts.charts[0] && this.vanCharts.charts[0].refreshRestore();
-    },
-
-    populate: function (items, options) {
-        var self = this, o = this.options;
-        o.items = items;
-        this.config = options || {};
-        this.config.series = o.items;
-
-        var setOptions = function () {
-            self.vanCharts.setOptions(self.config);
-            self.isSetOptions = true;
-            //if (self.wants2SetData === true) {
-            //    self._setData();
-            //}
-        };
-        var init = function () {
-            if (self.element.is(":visible")) {
-                self.vanCharts = VanCharts.init(self.element[0]);
-                BI.nextTick(setOptions);
-                self.isInit = true;
-            }
-        };
-
-        if (this.isInit === false) {
-            BI.nextTick(init);
-        }
-
-        if (this.element.is(":visible") && this.isSetOptions === true) {
-            this._setData();
-            this.wants2SetData = null;
-        } else {
-            this.wants2SetData = true;
-        }
-    }
-});
-BI.Chart.EVENT_CHANGE = "EVENT_CHANGE";
-$.shortcut('bi.chart', BI.Chart);/**
 * Collection
 *
 * Created by GUY on 2016/1/15.
@ -21503,7 +21415,7 @@ BI.Collection = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            scrollable: o.overflowX === true && o.overflowY === true,
            scrolly: o.overflowX === false && o.overflowY === true,
            scrollx: o.overflowX === true && o.overflowY === false,
@ -21513,11 +21425,13 @@ BI.Collection = BI.inherit(BI.Widget, {
            this._calculateSizeAndPositionData();
            this._populate();
        }
+    },
+
+    mounted: function () {
+        var o = this.options;
        if (o.scrollLeft !== 0 || o.scrollTop !== 0) {
-            BI.nextTick(function () {
-                self.element.scrollTop(o.scrollTop);
-                self.element.scrollLeft(o.scrollLeft);
-            });
+            this.element.scrollTop(o.scrollTop);
+            this.element.scrollLeft(o.scrollLeft);
        }
    },

@ -21754,9 +21668,8 @@ $.shortcut('bi.collection_view', BI.Collection);/**
 */
 BI.Combo = BI.inherit(BI.Widget, {
    _defaultConfig: function () {
-        var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-combo",
+        return BI.extend(BI.Combo.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-combo",
            trigger: "click",
            toggle: true,
            direction: "bottom", //top||bottom||left||right||top,left||top,right||bottom,left||bottom,right
@ -21812,7 +21725,7 @@ BI.Combo = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [
                {el: this.combo}
            ]
@ -21909,7 +21822,7 @@ BI.Combo = BI.inherit(BI.Widget, {
            BI.createWidget({
                type: "bi.vertical",
                scrolly: false,
-                element: this.element,
+                element: this,
                items: [
                    {el: this.popupView}
                ]
@ -22187,7 +22100,7 @@ BI.Expander = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [
                {el: this.expander}
            ]
@ -22287,7 +22200,7 @@ BI.Expander = BI.inherit(BI.Widget, {
            BI.createWidget({
                type: "bi.vertical",
                scrolly: false,
-                element: this.element,
+                element: this,
                items: [
                    {el: this.popupView}
                ]
@ -22579,7 +22492,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
        this.buttons = this._btnsCreator.apply(this, arguments);
        var items = this._packageItems(items, this._packageBtns(this.buttons));

-        this.layouts = BI.createWidget(BI.extend({element: this.element}, this._packageLayout(items)));
+        this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
    },

    setEnable: function (b) {
@ -22779,7 +22692,7 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
        })
        this.combo = BI.createWidget({
            type: "bi.combo",
-            element: this.element,
+            element: this,
            height: o.height,
            trigger: o.trigger,
            direction: o.direction,
@ -22918,7 +22831,7 @@ BI.Loader = BI.inherit(BI.Widget, {
        }

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({
            scrolly: true
        }, o.logic, {
@ -23114,7 +23027,7 @@ BI.Navigation = BI.inherit(BI.Widget, {
            type: "bi.card"
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout)
        }))));
@ -23270,7 +23183,7 @@ BI.Searcher = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
@ -23570,7 +23483,7 @@ BI.Switcher = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [
                {el: this.switcher}
            ]
@ -23658,7 +23571,7 @@ BI.Switcher = BI.inherit(BI.Widget, {
                BI.createWidget({
                    type: "bi.vertical",
                    scrolly: false,
-                    element: this.element,
+                    element: this,
                    items: [
                        {el: this.popupView}
                    ]
@ -23823,7 +23736,7 @@ BI.Tab = BI.inherit(BI.Widget, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout)
        }))));
@ -24199,7 +24112,7 @@ BI.ButtonMap = BI.inherit(BI.ButtonTree, {
        this.empty();

        var packages = this._packageItems(items, this._packageBtns(array));
-        BI.createWidget(BI.extend({element: this.element}, this._packageLayout(packages)));
+        BI.createWidget(BI.extend({element: this}, this._packageLayout(packages)));
    },

    getIndexByValue: function (value) {
@ -24229,7 +24142,7 @@ BI.EL = BI.inherit(BI.Widget, {
        this.ele = BI.createWidget(o.el);
        BI.createWidget(o.layout, {
            type: "bi.adaptive",
-            element: this.element,
+            element: this,
            items: [this.ele]
        });
        this.ele.on(BI.Controller.EVENT_CHANGE, function () {
@ -24342,7 +24255,7 @@ $.shortcut("bi.farbtastic", BI.Farbtastic);;
                });
                BI.createWidget({
                    type: "bi.absolute",
-                    element: self.element,
+                    element: self,
                    items: [{
                        el: self.watermark,
                        left: 0,
@ -24734,7 +24647,7 @@ BI.Grid = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            scrollable: o.overflowX === true && o.overflowY === true,
            scrolly: o.overflowX === false && o.overflowY === true,
            scrollx: o.overflowX === true && o.overflowY === false,
@ -24743,11 +24656,13 @@ BI.Grid = BI.inherit(BI.Widget, {
        if (o.items.length > 0) {
            this._populate();
        }
+    },
+
+    mounted: function () {
+        var o = this.options;
        if (o.scrollLeft !== 0 || o.scrollTop !== 0) {
-            BI.nextTick(function () {
-                self.element.scrollTop(o.scrollTop);
-                self.element.scrollLeft(o.scrollLeft);
-            });
+            this.element.scrollTop(o.scrollTop);
+            this.element.scrollLeft(o.scrollLeft);
        }
    },

@ -25021,7 +24936,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
        this._south = BI.createWidget();
        BI.createWidget({
            type: 'bi.border',
-            element: this.element,
+            element: this,
            items: {
                'north': {
                    el: {
@ -25196,7 +25111,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            scrolly: false,
            lgap: o.lgap,
@ -25325,7 +25240,7 @@ BI.ScrollView = BI.inherit(BI.Widget, {
        })
        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            scrolly: false,
            items: [this.scroll]
        })
@ -25339,7 +25254,7 @@ BI.ScrollView = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.dropdown,
                left: 0,
@ -25506,7 +25421,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {

        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            items: [this.matcher, this.spliter, this.searcher]
        });
    },
@ -25733,7 +25648,7 @@ BI.Pager = BI.inherit(BI.Widget, {

        this.button_group = BI.createWidget({
            type: "bi.button_group",
-            element: this.element,
+            element: this,
            items: BI.createItems(view, {
                cls: "page-item",
                height: 23,
@ -25857,7 +25772,7 @@ BI.A = BI.inherit(BI.Text, {
        BI.A.superclass._init.apply(this, arguments);
        if (o.el) {
            BI.createWidget(o.el, {
-                element: this.element
+                element: this
            });
        }
    }
@ -25910,7 +25825,7 @@ BI.LoadingBar = BI.inherit(BI.Single, {
        })
        this.cardLayout = BI.createWidget({
            type: "bi.card",
-            element: this.element,
+            element: this,
            items: [{
                el: loaded,
                cardName: "loaded"
@ -25976,12 +25891,12 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
            this.element.css("lineHeight", o.height + "px");
            BI.createWidget({
                type: "bi.default",
-                element: this.element,
+                element: this,
                items: [this.icon]
            })
        } else {
            BI.createWidget({
-                element: this.element,
+                element: this,
                type: 'bi.center_adapt',
                items: [this.icon]
            });
@ -26027,13 +25942,13 @@ BI.ImageButton = BI.inherit(BI.BasicButton, {
        if (BI.isNumber(o.iconWidth) || BI.isNumber(o.iconHeight)) {
            BI.createWidget({
                type: "bi.center_adapt",
-                element: this.element,
+                element: this,
                items: [this.image]
            })
        } else {
            BI.createWidget({
                type: "bi.adaptive",
-                element: this.element,
+                element: this,
                items: [this.image],
                scrollable: false
            })
@ -26140,7 +26055,7 @@ $.shortcut("bi.image_button", BI.ImageButton);(function ($) {
                BI.createWidget({
                    type: "bi.horizontal_auto",
                    cls: "button-" + o.level + " " + o.iconClass,
-                    element: this.element,
+                    element: this,
                    hgap: o.hgap,
                    vgap: o.vgap,
                    tgap: o.tgap,
@ -26167,7 +26082,7 @@ $.shortcut("bi.image_button", BI.ImageButton);(function ($) {
                    bgap: o.bgap,
                    lgap: o.lgap,
                    rgap: o.rgap,
-                    element: this.element,
+                    element: this,
                    text: o.text,
                    value: o.value
                });
@ -26253,7 +26168,7 @@ BI.TextButton = BI.inherit(BI.BasicButton, {
        var o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: o.textAlign,
            whiteSpace: o.whiteSpace,
            textWidth: o.textWidth,
@ -26369,7 +26284,7 @@ BI.BlankIconTextIconItem = BI.inherit(BI.BasicButton, {
        })
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.center_adapt",
@ -26390,7 +26305,7 @@ BI.BlankIconTextIconItem = BI.inherit(BI.BasicButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", {
                type: "bi.layout",
@ -26506,7 +26421,7 @@ BI.BlankIconTextItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", blank, this.icon, this.text)
        }))));
@ -26618,7 +26533,7 @@ BI.IconTextIconItem = BI.inherit(BI.BasicButton, {
        })
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.center_adapt",
@ -26639,7 +26554,7 @@ BI.IconTextIconItem = BI.inherit(BI.BasicButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", icon1, this.text, blank)
        }))));
@ -26744,7 +26659,7 @@ BI.IconTextItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.icon, this.text)
        }))));
@ -26850,7 +26765,7 @@ BI.TextIconItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", this.text, this.icon)
        }))));
@ -26925,7 +26840,7 @@ BI.TextItem = BI.inherit(BI.BasicButton, {
        var o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: o.textAlign,
            whiteSpace: o.whiteSpace,
            textHeight: o.whiteSpace == "nowrap" ? o.height : o.textHeight,
@ -27045,7 +26960,7 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
        })
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.center_adapt",
@ -27066,7 +26981,7 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", icon1, this.text, blank)
        }))));
@ -27162,7 +27077,7 @@ BI.IconTextNode = BI.inherit(BI.NodeButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", this.icon, this.text)
        }))));
@ -27257,7 +27172,7 @@ BI.TextIconNode = BI.inherit(BI.NodeButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", this.text, this.icon)
        }))));
@ -27323,7 +27238,7 @@ BI.TextNode = BI.inherit(BI.NodeButton, {
        var o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: o.textAlign,
            whiteSpace: o.whiteSpace,
            textHeight: o.whiteSpace == "nowrap" ? o.height : o.textHeight,
@ -27436,7 +27351,7 @@ BI.CodeEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: watermark,
                top: 0,
@ -27613,7 +27528,7 @@ BI.Editor = BI.inherit(BI.Single, {

        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: items
        });
        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
@ -27899,7 +27814,7 @@ BI.MultifileEditor = BI.inherit(BI.Single, {

        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.adaptive",
@ -27966,7 +27881,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
        this.content.element.css({"resize": "none"});
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.adaptive",
@ -29129,7 +29044,7 @@ BI.Label = BI.inherit(BI.Single, {
                        type: "bi.adaptive",
                        height: o.height,
                        scrollable: true,
-                        element: this.element,
+                        element: this,
                        items: [
                            {
                                el: (this.text = BI.createWidget(json)),
@ -29147,7 +29062,7 @@ BI.Label = BI.inherit(BI.Single, {
                BI.createWidget({
                    type: "bi.center_adapt",
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [
                        {
                            el: (this.text = BI.createWidget(json))
@ -29167,7 +29082,7 @@ BI.Label = BI.inherit(BI.Single, {
                    rgap: o.rgap,
                    tgap: o.tgap,
                    bgap: o.bgap,
-                    element: this.element,
+                    element: this,
                    items: [this.text]
                });
                return;
@ -29179,7 +29094,7 @@ BI.Label = BI.inherit(BI.Single, {
                BI.createWidget({
                    type: "bi.absolute",
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -29194,7 +29109,7 @@ BI.Label = BI.inherit(BI.Single, {
            BI.createWidget({
                type: "bi.center_adapt",
                scrollable: true,
-                element: this.element,
+                element: this,
                items: [{
                    el: (this.text = BI.createWidget(json))
                }]
@ -29206,7 +29121,7 @@ BI.Label = BI.inherit(BI.Single, {
            BI.createWidget({
                type: "bi.center_adapt",
                scrollable: true,
-                element: this.element,
+                element: this,
                items: [
                    {
                        el: (this.text = BI.createWidget(json))
@ -29226,7 +29141,7 @@ BI.Label = BI.inherit(BI.Single, {
                tgap: o.tgap,
                bgap: o.bgap,
                scrollable: true,
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
@ -29240,7 +29155,7 @@ BI.Label = BI.inherit(BI.Single, {
                    type: "bi.adaptive",
                    height: o.height,
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -29263,7 +29178,7 @@ BI.Label = BI.inherit(BI.Single, {
                "line-height": o.height + "px"
            });
            this.text = BI.createWidget(BI.extend(json, {
-                element: this.element
+                element: this
            }));
            BI.createWidget({
                type: "bi.layout",
@ -29284,13 +29199,13 @@ BI.Label = BI.inherit(BI.Single, {
            this.text = BI.createWidget(json);
            BI.createWidget({
                type: "bi.center_adapt",
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
        }
        this.text = BI.createWidget(BI.extend(json, {
-            element: this.element
+            element: this
        }));
        BI.createWidget({
            type: "bi.layout",
@ -29309,7 +29224,7 @@ BI.Label = BI.inherit(BI.Single, {
                        type: "bi.adaptive",
                        height: o.height,
                        scrollable: true,
-                        element: this.element,
+                        element: this,
                        items: [
                            {
                                el: (this.text = BI.createWidget(json)),
@ -29333,7 +29248,7 @@ BI.Label = BI.inherit(BI.Single, {
                    rgap: o.rgap,
                    tgap: o.tgap,
                    bgap: o.bgap,
-                    element: this.element,
+                    element: this,
                    items: [
                        {
                            el: (this.text = BI.createWidget(json))
@ -29353,7 +29268,7 @@ BI.Label = BI.inherit(BI.Single, {
                    rgap: o.rgap,
                    tgap: o.tgap,
                    bgap: o.bgap,
-                    element: this.element,
+                    element: this,
                    items: [this.text]
                });
                return;
@ -29365,7 +29280,7 @@ BI.Label = BI.inherit(BI.Single, {
                BI.createWidget({
                    type: "bi.absolute",
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -29386,7 +29301,7 @@ BI.Label = BI.inherit(BI.Single, {
                rgap: o.rgap,
                tgap: o.tgap,
                bgap: o.bgap,
-                element: this.element,
+                element: this,
                items: [{
                    el: (this.text = BI.createWidget(json))
                }]
@ -29404,7 +29319,7 @@ BI.Label = BI.inherit(BI.Single, {
                rgap: o.rgap,
                tgap: o.tgap,
                bgap: o.bgap,
-                element: this.element,
+                element: this,
                items: [
                    {
                        el: (this.text = BI.createWidget(json))
@ -29424,7 +29339,7 @@ BI.Label = BI.inherit(BI.Single, {
                rgap: o.rgap,
                tgap: o.tgap,
                bgap: o.bgap,
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
@ -29438,7 +29353,7 @@ BI.Label = BI.inherit(BI.Single, {
                    type: "bi.adaptive",
                    height: o.height,
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -29461,7 +29376,7 @@ BI.Label = BI.inherit(BI.Single, {
                "line-height": o.height + "px"
            });
            this.text = BI.createWidget(BI.extend(json, {
-                element: this.element
+                element: this
            }));
            BI.createWidget({
                type: "bi.layout",
@ -29482,13 +29397,13 @@ BI.Label = BI.inherit(BI.Single, {
            this.text = BI.createWidget(json);
            BI.createWidget({
                type: "bi.vertical_adapt",
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
        }
        this.text = BI.createWidget(BI.extend(json, {
-            element: this.element
+            element: this
        }));
        BI.createWidget({
            type: "bi.layout",
@ -29743,7 +29658,7 @@ BI.TableCell = BI.inherit(BI.Widget, {
        BI.TableCell.superclass._init.apply(this, arguments);
        BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            whiteSpace: "nowrap",
            textAlign: this.options.textAlign,
            height: this.options.height,
@ -29786,7 +29701,7 @@ BI.CollectionTableCell = BI.inherit(BI.Widget, {
        }));
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.cell,
                left: 0,
@ -29913,7 +29828,7 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
        });
        this.contextLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topLeft,
                top: 0,
@ -29958,7 +29873,7 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
        });
        this.scrollBarLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topScrollbar,
                right: 0,
@ -30529,7 +30444,7 @@ BI.GridTableCell = BI.inherit(BI.Widget, {
        }));
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.cell,
                left: 0,
@ -30658,7 +30573,7 @@ BI.GridTable = BI.inherit(BI.Widget, {
        });
        this.contextLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topLeft,
                top: 0,
@ -30703,7 +30618,7 @@ BI.GridTable = BI.inherit(BI.Widget, {
        });
        this.scrollBarLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topScrollbar,
                right: 0,
@ -31229,7 +31144,7 @@ BI.GridTableScrollbar = BI.inherit(BI.Widget, {
        });
        this.contextLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.face,
                left: 0,
@ -31551,7 +31466,7 @@ BI.GridTableHorizontalScrollbar = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.absolute",
            cls: "horizontal-scrollbar",
-            element: this.element,
+            element: this,
            width: o.size,
            height: BI.GridTableScrollbar.SIZE,
            items: [{
@ -31613,7 +31528,7 @@ BI.TableHeaderCell = BI.inherit(BI.Widget, {
        BI.TableHeaderCell.superclass._init.apply(this, arguments);
        BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: "center",
            height: this.options.height,
            text: this.options.text,
@ -32067,7 +31982,7 @@ BI.Table = BI.inherit(BI.Widget, {
            regionColumnSize = isRight ? [0, 'fill'] : ['fill', 0];
        }
        this.partitions = BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, {
            rows: 2,
            columns: 2,
@ -32675,7 +32590,7 @@ BI.Table = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.adaptive",
            cls: "bottom-right",
-            element: this.element,
+            element: this,
            scrollable: false,
            items: [this.scrollBottomRight]
        });
@ -33818,7 +33733,7 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.cell,
                left: 0,
@ -33889,7 +33804,7 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
        this.regionResizerHandler = this._createResizerHandler();
        this.table = BI.createWidget(o.el, {
            type: "bi.grid_table",
-            element: this.element,
+            element: this,
            width: o.width,
            height: o.height,
            headerRowSize: o.headerRowSize,
@ -33911,7 +33826,7 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.regionResizerHandler,
                left: 0,
@ -34224,7 +34139,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
            type: "bi.vertical",
            scrollable: true,
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.container, this.tip]
        });

@ -35176,7 +35091,7 @@ BI.CustomTree = BI.inherit(BI.Widget, {
    initTree: function (nodes) {
        var self = this, o = this.options;
        this.tree = BI.createWidget(o.el, {
-            element: this.element,
+            element: this,
            items: this._formatItems(nodes),
            itemsCreator: function (op, callback) {
                o.itemsCreator.apply(this, [op, function (items) {
--- a/dist/case.js
+++ b/dist/case.js
@ -35,7 +35,7 @@ BI.IconChangeButton = BI.inherit(BI.Single, {
        var self = this, o = this.options;
        this.button = BI.createWidget({
            type: "bi.icon_button",
-            element: this.element,
+            element: this,
            cls: o.iconClass,
            height: o.height,
            iconWidth: o.iconWidth,
@ -187,7 +187,7 @@ BI.MultiSelectItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", {
                type: "bi.center_adapt",
@ -236,7 +236,7 @@ BI.SingleSelectIconTextItem = BI.inherit(BI.Single, {
        var self = this, o = this.options;
        this.text = BI.createWidget({
            type: "bi.icon_text_item",
-            element: this.element,
+            element: this,
            cls: o.iconClass,
            once: o.once,
            selected: o.selected,
@ -292,7 +292,7 @@ BI.SingleSelectItem = BI.inherit(BI.BasicButton, {
        var self = this, o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: "left",
            whiteSpace: "nowrap",
            textHeight: o.height,
@ -365,7 +365,7 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", {
                type: "bi.center_adapt",
@ -446,7 +446,7 @@ BI.ArrowNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -527,7 +527,7 @@ BI.FirstPlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -628,7 +628,7 @@ BI.IconArrowNode = BI.inherit(BI.NodeButton, {
            el: icon
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -708,7 +708,7 @@ BI.LastPlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -788,7 +788,7 @@ BI.MidPlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -866,7 +866,7 @@ $.shortcut("bi.mid_plus_group_node", BI.MidPlusGroupNode);BI.MultiLayerIconArrow
        items.push(this.node);
        BI.createWidget({
            type: "bi.td",
-            element: this.element,
+            element: this,
            columnSize: BI.makeArray(o.layer, 13),
            items: [items]
        })
@ -953,7 +953,7 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -1032,7 +1032,7 @@ BI.TriangleGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -1124,7 +1124,7 @@ BI.FirstTreeLeafItem = BI.inherit(BI.BasicButton, {
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -1213,7 +1213,7 @@ $.shortcut("bi.first_tree_leaf_item", BI.FirstTreeLeafItem);BI.IconTreeLeafItem
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -1314,7 +1314,7 @@ BI.LastTreeLeafItem = BI.inherit(BI.BasicButton, {
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -1417,7 +1417,7 @@ BI.MidTreeLeafItem = BI.inherit(BI.BasicButton, {
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
@ -1511,7 +1511,7 @@ BI.MultiLayerIconTreeLeafItem = BI.inherit(BI.BasicButton, {
        items.push(this.item);
        BI.createWidget({
            type: "bi.td",
-            element: this.element,
+            element: this,
            columnSize: BI.makeArray(o.layer, 13),
            items: [items]
        });
@ -1592,7 +1592,7 @@ BI.TreeTextLeafItem = BI.inherit(BI.BasicButton, {
        });
        BI.createWidget({
            type: "bi.htape",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text
            }]
@ -1746,7 +1746,7 @@ BI.Calendar = BI.inherit(BI.Widget, {
            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
        })
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this

        }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("top", title, this.days)
@ -1885,7 +1885,7 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this

        }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("top", this.years)
@ -1955,7 +1955,7 @@ BI.ComplexCanvas = BI.inherit(BI.Widget, {
        var o = this.options;
        this.canvas = BI.createWidget({
            type: "bi.canvas",
-            element: this.element,
+            element: this,
            width: o.width,
            height: o.height
        });
@ -2051,7 +2051,7 @@ BI.CombineChart = BI.inherit(BI.Widget, {
        //图可配置属性
        this.CombineChart = BI.createWidget({
            type: "bi.chart",
-            element: this.element
+            element: this
        });
        this.CombineChart.on(BI.Chart.EVENT_CHANGE, function (obj) {
            self.fireEvent(BI.CombineChart.EVENT_CHANGE, obj);
@ -2797,7 +2797,7 @@ BI.ColorPicker = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        this.colors = BI.createWidget({
            type: "bi.button_group",
-            element: this.element,
+            element: this,
            items: BI.createItems(o.items || this._items, {
                type: "bi.color_picker_button",
                once: false
@ -2887,7 +2887,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.htape",
-            element: this.element,
+            element: this,
            items: [{
                el: this.colorShow,
                width: 'fill'
@ -3052,7 +3052,7 @@ BI.RecordEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.inline",
-            element: this.element,
+            element: this,
            items: [this.textContainer, this.editor]
        });
        BI.Resizers.add(this.getName(), BI.bind(this._adjustInputWidth, this));
@ -3217,7 +3217,7 @@ BI.ShelterEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -3288,7 +3288,7 @@ BI.ShelterEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
@ -3471,7 +3471,7 @@ BI.SignEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -3535,7 +3535,7 @@ BI.SignEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
@ -3724,7 +3724,7 @@ BI.StateEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -3786,7 +3786,7 @@ BI.StateEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
@ -3979,7 +3979,7 @@ BI.SimpleStateEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -4041,7 +4041,7 @@ BI.SimpleStateEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
@ -4192,7 +4192,7 @@ BI.HandStandBranchExpander = BI.inherit(BI.Widget, {
        this._initExpander();
        this._initBranchView();
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, {
                type: "bi.center_adapt",
@ -4250,7 +4250,7 @@ BI.BranchExpander = BI.inherit(BI.Widget, {
        this._initExpander();
        this._initBranchView();
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.expander, this.branchView)
        }))));
@ -4585,7 +4585,7 @@ BI.ListPane = BI.inherit(BI.Pane, {
        this.check();

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({
            scrolly: true,
            lgap: o.lgap,
@ -4710,7 +4710,7 @@ BI.Panel = BI.inherit(BI.Widget,{
        var o = this.options;

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("vertical", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("top", this._createTitle()
                ,this.options.el)
@ -4835,7 +4835,7 @@ BI.SelectList = BI.inherit(BI.Widget, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({
            scrolly: true
        }, o.logic, {
@ -4990,7 +4990,7 @@ BI.LazyLoader = BI.inherit(BI.Widget, {
        var all = o.items.length;
        this.loader = BI.createWidget({
            type: "bi.loader",
-            element: this.element,
+            element: this,
            //下面是button_group的属性
            el: o.el,

@ -5123,7 +5123,7 @@ BI.ListLoader = BI.inherit(BI.Widget, {

        this.button_group = BI.createWidget(o.el, {
            type: "bi.button_group",
-            element: this.element,
+            element: this,
            chooseType: 0,
            items: o.items,
            behaviors: {},
@ -5151,7 +5151,7 @@ BI.ListLoader = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            items: [this.next]
        });

@ -5311,7 +5311,7 @@ BI.SortList = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        this.loader = BI.createWidget({
            type: "bi.list_loader",
-            element: this.element,
+            element: this,
            isDefaultInit: o.isDefaultInit,
            el: o.el,
            items: this._formatItems(o.items),
@ -5543,7 +5543,7 @@ BI.AllPagger = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.center_adapt",
-            element: this.element,
+            element: this,
            columnSize: [30, "", 36],
            items: [this.editor, this.allPages, this.pager]
        })
@ -5619,7 +5619,7 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.absolute",
            scrollable: false,
-            element: this.element,
+            element: this,
            items: [{
                el: this.vpager,
                top: 0,
@ -5906,7 +5906,7 @@ BI.NumberPager = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.center_adapt",
-            element: this.element,
+            element: this,
            columnSize: [20, "", 20, 36],
            items: [{type: "bi.label", text: "第"}, this.label, {type: "bi.label", text: "页"}, this.pager]
        })
@ -6026,7 +6026,7 @@ BI.SkipPager = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.center_adapt",
-            element: this.element,
+            element: this,
            items: [{type: "bi.label", text: "第"}, this.editor, {type: "bi.label", text: "页"}, this.pager]
        })
    },
@ -6072,7 +6072,7 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
        //}
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            height: opts.height-2,
            whiteSpace: opts.whiteSpace,
            text: opts.text,
@ -6113,7 +6113,7 @@ BI.Segment = BI.inherit(BI.Widget, {
        BI.Segment.superclass._init.apply(this, arguments);
        var self = this, o = this.options;
        this.buttonGroup = BI.createWidget({
-            element: this.element,
+            element: this,
            type: "bi.button_group",
            items: BI.createItems(o.items, {
                type: "bi.segment_button",
@ -6287,7 +6287,7 @@ BI.DynamicSummaryLayerTreeTable = BI.inherit(BI.Widget, {
        var items = this._formatItems(o.items, deep);
        this.table = BI.createWidget({
            type: "bi.table_view",
-            element: this.element,
+            element: this,
            logic: o.logic,
            isNeedResize: o.isNeedResize,
            isResizeAdapt: o.isResizeAdapt,
@ -6557,7 +6557,7 @@ BI.DynamicSummaryTreeTable = BI.inherit(BI.Widget, {
        items = BI.DynamicSummaryTreeTable.formatSummaryItems(items, o.crossItems, deep);
        this.table = BI.createWidget({
            type: "bi.table_view",
-            element: this.element,
+            element: this,
            logic: o.logic,

            isNeedResize: o.isNeedResize,
@ -6859,7 +6859,7 @@ BI.LayerTreeTableCell = BI.inherit(BI.Widget, {
        var o = this.options;
        BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: "left",
            whiteSpace: "nowrap",
            height: o.height,
@ -7007,7 +7007,7 @@ BI.LayerTreeTable = BI.inherit(BI.Widget, {
        var items = this._formatItems(o.items);
        this.table = BI.createWidget({
            type: "bi.table_view",
-            element: this.element,
+            element: this,
            logic: o.logic,
            isNeedResize: o.isNeedResize,
            isResizeAdapt: o.isResizeAdapt,
@ -7260,7 +7260,7 @@ BI.Tabler = BI.inherit(BI.Widget, {
        })
        BI.createWidget({
            type: "bi.vtape",
-            element: this.element,
+            element: this,
            items: [{
                el: this.container
            }, {
@ -7313,7 +7313,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
        this.element.bind({"click": fn, "mousedown": fn, "mouseup": fn, "mouseover": fn, "mouseenter": fn, "mouseleave": fn, "mousemove": fn});
        BI.createWidget({
            type: "bi.left",
-            element: this.element,
+            element: this,
            items: [this["_" + this.options.direction]()]
        })
    },
@ -7430,7 +7430,7 @@ BI.Toast = BI.inherit(BI.Tip, {

        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            text: o.text,
            height: 30,
            hgap: this._const.hgap
@ -7479,7 +7479,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {

        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: "left",
            whiteSpace: "normal",
            text: o.text,
@ -7567,7 +7567,7 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
        });
        BI.createWidget({
            type: "bi.htape",
-            element: this.element,
+            element: this,
            items: [{
                width: 36,
                el: {
@ -7655,7 +7655,7 @@ BI.HandStandBranchTree = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        this.branchTree = BI.createWidget({
            type: "bi.custom_tree",
-            element: this.element,
+            element: this,
            expander: BI.extend({
                type: "bi.handstand_branch_expander",
                el: {},
@ -7709,7 +7709,7 @@ BI.BranchTree = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        this.branchTree = BI.createWidget({
            type: "bi.custom_tree",
-            element: this.element,
+            element: this,
            expander: BI.extend({
                type: "bi.branch_expander",
                el: {},
@ -7874,7 +7874,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
        this._assertId(nodes);
        this.tree = BI.createWidget({
            type: "bi.custom_tree",
-            element: this.element,
+            element: this,
            expander: BI.extend({
                el: {},
                popup: {
@ -7957,7 +7957,7 @@ BI.SimpleTreeView = BI.inherit(BI.Widget, {
        this.structure = new BI.Tree();
        this.tree = BI.createWidget({
            type: "bi.tree",
-            element: this.element,
+            element: this,
            itemsCreator: function (op, callback) {
                var fn = function (items) {
                    callback({
@ -8106,7 +8106,7 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
        });

        BI.createWidget({
-            element: this.element,
+            element: this,
            type: 'bi.htape',
            items: [
                {
@ -8156,7 +8156,7 @@ BI.IconTrigger = BI.inherit(BI.Trigger, {
        BI.IconTrigger.superclass._init.apply(this, arguments);
        this.iconButton = BI.createWidget(o.el, {
            type: "bi.trigger_icon_button",
-            element: this.element,
+            element: this,
            width: o.width,
            height: o.height
        });
@ -8199,7 +8199,7 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
        });

        BI.createWidget({
-            element: this.element,
+            element: this,
            type: 'bi.htape',
            items: [
                {
@ -8248,7 +8248,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
        var self = this, o = this.options;
        this.trigger = BI.createWidget({
            type: "bi.text_trigger",
-            element: this.element,
+            element: this,
            height: o.height
        });
        if (BI.isKey(o.text)) {
@ -8301,7 +8301,7 @@ BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, {
        var self = this, o = this.options;
        this.trigger = BI.createWidget({
            type: "bi.small_text_trigger",
-            element: this.element,
+            element: this,
            height: o.height - 2
        });
        if (BI.isKey(o.text)) {
@ -8369,7 +8369,7 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
        });

        BI.createWidget({
-            element: this.element,
+            element: this,
            type: 'bi.htape',
            items: [
                {
--- a/dist/core.js
+++ b/dist/core.js
--- a/index.js
+++ b/index.js
@ -1,56 +0,0 @@
-$(function(){
-    var items = [], header = [], columnSize = [];
-
-    var rowCount = 100, columnCount = 100;
-    for (var i = 0; i < 1; i++) {
-        header[i] = [];
-        for (var j = 0; j < columnCount; j++) {
-            header[i][j] = {
-                type: "bi.label",
-                text: "表头" + i + "-" + j
-            }
-            columnSize[j] = 100;
-        }
-    }
-    for (var i = 0; i < rowCount; i++) {
-        items[i] = [];
-        for (var j = 0; j < columnCount; j++) {
-            items[i][j] = {
-                type: "bi.label",
-                text: (i < 3 ? 0 : i) + "-" + j
-            }
-        }
-    }
-
-    var table = BI.createWidget({
-        type: "bi.resizable_table",
-        el: {
-            type: "bi.collection_table",
-        },
-        width: 600,
-        height: 500,
-        isResizeAdapt: true,
-        isNeedResize: true,
-        isNeedMerge: true,
-        mergeCols: [0, 1],
-        mergeRule: function (col1, col2) {
-            return BI.isEqual(col1, col2);
-        },
-        isNeedFreeze: true,
-        freezeCols: [0, 1],
-        columnSize: columnSize,
-        items: items,
-        header: header
-    });
-    BI.createWidget({
-        type: "bi.absolute",
-        element: "#wrapper",
-        items: [{
-            el: table,
-            left: 10,
-            right: 10,
-            top: 10,
-            bottom: 10
-        }]
-    })
-})
--- a/server.js
+++ b/server.js
@ -9,5 +9,5 @@ const port = 3000;
 app.use(express.static("./"));
 app.listen(port, function() {
    console.log("server start");
-    open('http://localhost:' + port + '/index.html');
+    open('http://localhost:' + port + '/demo.html');
 });
--- a/src/base/chart/chart.js
+++ b/src/base/chart/chart.js
@ -1,89 +0,0 @@
-/**
- * 图表控件
- * @class BI.Chart
- * @extends BI.Widget
- */
-BI.Chart = BI.inherit(BI.Pane, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.Chart.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-chart"
-        })
-    },
-
-    _init: function () {
-        BI.Chart.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-
-        this.isInit = false;
-        this.isSetOptions = false;
-        this.wants2SetData = false;
-        var width = 0;
-        var height = 0;
-
-        this._resizer = BI.debounce(function () {
-            if (self.element.is(":visible") && self.vanCharts) {
-                self.vanCharts.resize();
-            }
-        }, 30);
-        BI.Resizers.add(this.getName(), function (e) {
-            if (BI.isWindow(e.target) && self.element.is(":visible")) {
-                var newW = self.element.width(), newH = self.element.height();
-                if (newW > 0 && newH > 0 && (width !== newW || height !== newH)) {
-                    self._resizer();
-                    width = newW;
-                    height = newH;
-                }
-            }
-        });
-    },
-
-    _setData: function () {
-        this.vanCharts && this.vanCharts.setData(this.config);
-    },
-
-    resize: function () {
-        if (this.element.is(":visible") && this.isSetOptions === true) {
-            this._resizer();
-        }
-    },
-
-    magnify: function () {
-        this.vanCharts && this.vanCharts.charts[0] && this.vanCharts.charts[0].refreshRestore();
-    },
-
-    populate: function (items, options) {
-        var self = this, o = this.options;
-        o.items = items;
-        this.config = options || {};
-        this.config.series = o.items;
-
-        var setOptions = function () {
-            self.vanCharts.setOptions(self.config);
-            self.isSetOptions = true;
-            //if (self.wants2SetData === true) {
-            //    self._setData();
-            //}
-        };
-        var init = function () {
-            if (self.element.is(":visible")) {
-                self.vanCharts = VanCharts.init(self.element[0]);
-                BI.nextTick(setOptions);
-                self.isInit = true;
-            }
-        };
-
-        if (this.isInit === false) {
-            BI.nextTick(init);
-        }
-
-        if (this.element.is(":visible") && this.isSetOptions === true) {
-            this._setData();
-            this.wants2SetData = null;
-        } else {
-            this.wants2SetData = true;
-        }
-    }
-});
-BI.Chart.EVENT_CHANGE = "EVENT_CHANGE";
-$.shortcut('bi.chart', BI.Chart);
--- a/src/base/collection/collection.js
+++ b/src/base/collection/collection.js
@ -48,7 +48,7 @@ BI.Collection = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            scrollable: o.overflowX === true && o.overflowY === true,
            scrolly: o.overflowX === false && o.overflowY === true,
            scrollx: o.overflowX === true && o.overflowY === false,
@ -58,11 +58,13 @@ BI.Collection = BI.inherit(BI.Widget, {
            this._calculateSizeAndPositionData();
            this._populate();
        }
+    },
+
+    mounted: function () {
+        var o = this.options;
        if (o.scrollLeft !== 0 || o.scrollTop !== 0) {
-            BI.nextTick(function () {
-                self.element.scrollTop(o.scrollTop);
-                self.element.scrollLeft(o.scrollLeft);
-            });
+            this.element.scrollTop(o.scrollTop);
+            this.element.scrollLeft(o.scrollLeft);
        }
    },

--- a/src/base/combination/combo.js
+++ b/src/base/combination/combo.js
@ -4,9 +4,8 @@
 */
 BI.Combo = BI.inherit(BI.Widget, {
    _defaultConfig: function () {
-        var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-combo",
+        return BI.extend(BI.Combo.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-combo",
            trigger: "click",
            toggle: true,
            direction: "bottom", //top||bottom||left||right||top,left||top,right||bottom,left||bottom,right
@ -62,7 +61,7 @@ BI.Combo = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [
                {el: this.combo}
            ]
@ -159,7 +158,7 @@ BI.Combo = BI.inherit(BI.Widget, {
            BI.createWidget({
                type: "bi.vertical",
                scrolly: false,
-                element: this.element,
+                element: this,
                items: [
                    {el: this.popupView}
                ]
--- a/src/base/combination/expander.js
+++ b/src/base/combination/expander.js
@ -56,7 +56,7 @@ BI.Expander = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [
                {el: this.expander}
            ]
@ -156,7 +156,7 @@ BI.Expander = BI.inherit(BI.Widget, {
            BI.createWidget({
                type: "bi.vertical",
                scrolly: false,
-                element: this.element,
+                element: this,
                items: [
                    {el: this.popupView}
                ]
--- a/src/base/combination/group.button.js
+++ b/src/base/combination/group.button.js
@ -176,7 +176,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
        this.buttons = this._btnsCreator.apply(this, arguments);
        var items = this._packageItems(items, this._packageBtns(this.buttons));

-        this.layouts = BI.createWidget(BI.extend({element: this.element}, this._packageLayout(items)));
+        this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items)));
    },

    setEnable: function (b) {
--- a/src/base/combination/group.combo.js
+++ b/src/base/combination/group.combo.js
@ -60,7 +60,7 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
        })
        this.combo = BI.createWidget({
            type: "bi.combo",
-            element: this.element,
+            element: this,
            height: o.height,
            trigger: o.trigger,
            direction: o.direction,
--- a/src/base/combination/loader.js
+++ b/src/base/combination/loader.js
@ -99,7 +99,7 @@ BI.Loader = BI.inherit(BI.Widget, {
        }

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({
            scrolly: true
        }, o.logic, {
--- a/src/base/combination/navigation.js
+++ b/src/base/combination/navigation.js
@ -34,7 +34,7 @@ BI.Navigation = BI.inherit(BI.Widget, {
            type: "bi.card"
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout)
        }))));
--- a/src/base/combination/searcher.js
+++ b/src/base/combination/searcher.js
@ -53,7 +53,7 @@ BI.Searcher = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
--- a/src/base/combination/switcher.js
+++ b/src/base/combination/switcher.js
@ -56,7 +56,7 @@ BI.Switcher = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [
                {el: this.switcher}
            ]
@ -144,7 +144,7 @@ BI.Switcher = BI.inherit(BI.Widget, {
                BI.createWidget({
                    type: "bi.vertical",
                    scrolly: false,
-                    element: this.element,
+                    element: this,
                    items: [
                        {el: this.popupView}
                    ]
--- a/src/base/combination/tab.js
+++ b/src/base/combination/tab.js
@ -33,7 +33,7 @@ BI.Tab = BI.inherit(BI.Widget, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout)
        }))));
--- a/src/base/combination/tree.button.js
+++ b/src/base/combination/tree.button.js
@ -286,7 +286,7 @@ BI.ButtonMap = BI.inherit(BI.ButtonTree, {
        this.empty();

        var packages = this._packageItems(items, this._packageBtns(array));
-        BI.createWidget(BI.extend({element: this.element}, this._packageLayout(packages)));
+        BI.createWidget(BI.extend({element: this}, this._packageLayout(packages)));
    },

    getIndexByValue: function (value) {
--- a/src/base/el.js
+++ b/src/base/el.js
@ -19,7 +19,7 @@ BI.EL = BI.inherit(BI.Widget, {
        this.ele = BI.createWidget(o.el);
        BI.createWidget(o.layout, {
            type: "bi.adaptive",
-            element: this.element,
+            element: this,
            items: [this.ele]
        });
        this.ele.on(BI.Controller.EVENT_CHANGE, function () {
--- a/src/base/formula/formulaeditor.js
+++ b/src/base/formula/formulaeditor.js
@ -56,7 +56,7 @@
                });
                BI.createWidget({
                    type: "bi.absolute",
-                    element: self.element,
+                    element: self,
                    items: [{
                        el: self.watermark,
                        left: 0,
--- a/src/base/grid/grid.js
+++ b/src/base/grid/grid.js
@ -51,7 +51,7 @@ BI.Grid = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            scrollable: o.overflowX === true && o.overflowY === true,
            scrolly: o.overflowX === false && o.overflowY === true,
            scrollx: o.overflowX === true && o.overflowY === false,
@ -60,11 +60,13 @@ BI.Grid = BI.inherit(BI.Widget, {
        if (o.items.length > 0) {
            this._populate();
        }
+    },
+
+    mounted: function () {
+        var o = this.options;
        if (o.scrollLeft !== 0 || o.scrollTop !== 0) {
-            BI.nextTick(function () {
-                self.element.scrollTop(o.scrollTop);
-                self.element.scrollLeft(o.scrollLeft);
-            });
+            this.element.scrollTop(o.scrollTop);
+            this.element.scrollLeft(o.scrollLeft);
        }
    },

--- a/src/base/layer/layer.floatbox.js
+++ b/src/base/layer/layer.floatbox.js
@ -41,7 +41,7 @@ BI.FloatBox = BI.inherit(BI.Widget, {
        this._south = BI.createWidget();
        BI.createWidget({
            type: 'bi.border',
-            element: this.element,
+            element: this,
            items: {
                'north': {
                    el: {
--- a/src/base/layer/layer.popup.js
+++ b/src/base/layer/layer.popup.js
@ -70,7 +70,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            scrolly: false,
            lgap: o.lgap,
--- a/src/base/layer/layer.scroll.js
+++ b/src/base/layer/layer.scroll.js
@ -30,7 +30,7 @@ BI.ScrollView = BI.inherit(BI.Widget, {
        })
        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            scrolly: false,
            items: [this.scroll]
        })
@ -44,7 +44,7 @@ BI.ScrollView = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.dropdown,
                left: 0,
--- a/src/base/layer/layer.searcher.js
+++ b/src/base/layer/layer.searcher.js
@ -94,7 +94,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {

        BI.createWidget({
            type: "bi.vertical",
-            element: this.element,
+            element: this,
            items: [this.matcher, this.spliter, this.searcher]
        });
    },
--- a/src/base/pager/pager.js
+++ b/src/base/pager/pager.js
@ -183,7 +183,7 @@ BI.Pager = BI.inherit(BI.Widget, {

        this.button_group = BI.createWidget({
            type: "bi.button_group",
-            element: this.element,
+            element: this,
            items: BI.createItems(view, {
                cls: "page-item",
                height: 23,
--- a/src/base/pane.js
+++ b/src/base/pane.js
@ -32,7 +32,7 @@ BI.Pane = BI.inherit(BI.Widget, {
            });
            BI.createWidget({
                type: "bi.vertical",
-                element: this.element,
+                element: this,
                items: [this._tipText],
                bgap: 25
            });
@ -65,7 +65,7 @@ BI.Pane = BI.inherit(BI.Widget, {
            this._loading.element.css("zIndex", 1);
            BI.createWidget({
                type: "bi.absolute",
-                element: this.element,
+                element: this,
                items: [{
                    el: this._loading,
                    left: 0,
--- a/src/base/single/a/a.js
+++ b/src/base/single/a/a.js
@ -22,7 +22,7 @@ BI.A = BI.inherit(BI.Text, {
        BI.A.superclass._init.apply(this, arguments);
        if (o.el) {
            BI.createWidget(o.el, {
-                element: this.element
+                element: this
            });
        }
    }
--- a/src/base/single/bar/bar.loading.js
+++ b/src/base/single/bar/bar.loading.js
@ -45,7 +45,7 @@ BI.LoadingBar = BI.inherit(BI.Single, {
        })
        this.cardLayout = BI.createWidget({
            type: "bi.card",
-            element: this.element,
+            element: this,
            items: [{
                el: loaded,
                cardName: "loaded"
--- a/src/base/single/button/button.basic.js
+++ b/src/base/single/button/button.basic.js
@ -53,7 +53,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                self.$mask.invisible();
                BI.createWidget({
                    type: "bi.absolute",
-                    element: self.element,
+                    element: self,
                    items: [{
                        el: self.$mask,
                        left: 0,
--- a/src/base/single/button/buttons/button.icon.js
+++ b/src/base/single/button/buttons/button.icon.js
@ -29,12 +29,12 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
            this.element.css("lineHeight", o.height + "px");
            BI.createWidget({
                type: "bi.default",
-                element: this.element,
+                element: this,
                items: [this.icon]
            })
        } else {
            BI.createWidget({
-                element: this.element,
+                element: this,
                type: 'bi.center_adapt',
                items: [this.icon]
            });
--- a/src/base/single/button/buttons/button.image.js
+++ b/src/base/single/button/buttons/button.image.js
@ -29,13 +29,13 @@ BI.ImageButton = BI.inherit(BI.BasicButton, {
        if (BI.isNumber(o.iconWidth) || BI.isNumber(o.iconHeight)) {
            BI.createWidget({
                type: "bi.center_adapt",
-                element: this.element,
+                element: this,
                items: [this.image]
            })
        } else {
            BI.createWidget({
                type: "bi.adaptive",
-                element: this.element,
+                element: this,
                items: [this.image],
                scrollable: false
            })
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@ -55,7 +55,7 @@
                BI.createWidget({
                    type: "bi.horizontal_auto",
                    cls: "button-" + o.level + " " + o.iconClass,
-                    element: this.element,
+                    element: this,
                    hgap: o.hgap,
                    vgap: o.vgap,
                    tgap: o.tgap,
@ -82,7 +82,7 @@
                    bgap: o.bgap,
                    lgap: o.lgap,
                    rgap: o.rgap,
-                    element: this.element,
+                    element: this,
                    text: o.text,
                    value: o.value
                });
--- a/src/base/single/button/buttons/button.text.js
+++ b/src/base/single/button/buttons/button.text.js
@ -29,7 +29,7 @@ BI.TextButton = BI.inherit(BI.BasicButton, {
        var o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: o.textAlign,
            whiteSpace: o.whiteSpace,
            textWidth: o.textWidth,
--- a/src/base/single/button/listitem/blankicontexticonitem.js
+++ b/src/base/single/button/listitem/blankicontexticonitem.js
@ -59,7 +59,7 @@ BI.BlankIconTextIconItem = BI.inherit(BI.BasicButton, {
        })
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.center_adapt",
@ -80,7 +80,7 @@ BI.BlankIconTextIconItem = BI.inherit(BI.BasicButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", {
                type: "bi.layout",
--- a/src/base/single/button/listitem/blankicontextitem.js
+++ b/src/base/single/button/listitem/blankicontextitem.js
@ -60,7 +60,7 @@ BI.BlankIconTextItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", blank, this.icon, this.text)
        }))));
--- a/src/base/single/button/listitem/icontexticonitem.js
+++ b/src/base/single/button/listitem/icontexticonitem.js
@ -62,7 +62,7 @@ BI.IconTextIconItem = BI.inherit(BI.BasicButton, {
        })
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.center_adapt",
@ -83,7 +83,7 @@ BI.IconTextIconItem = BI.inherit(BI.BasicButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", icon1, this.text, blank)
        }))));
--- a/src/base/single/button/listitem/icontextitem.js
+++ b/src/base/single/button/listitem/icontextitem.js
@ -55,7 +55,7 @@ BI.IconTextItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.icon, this.text)
        }))));
--- a/src/base/single/button/listitem/texticonitem.js
+++ b/src/base/single/button/listitem/texticonitem.js
@ -56,7 +56,7 @@ BI.TextIconItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", this.text, this.icon)
        }))));
--- a/src/base/single/button/listitem/textitem.js
+++ b/src/base/single/button/listitem/textitem.js
@ -25,7 +25,7 @@ BI.TextItem = BI.inherit(BI.BasicButton, {
        var o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: o.textAlign,
            whiteSpace: o.whiteSpace,
            textHeight: o.whiteSpace == "nowrap" ? o.height : o.textHeight,
--- a/src/base/single/button/node/icontexticonnode.js
+++ b/src/base/single/button/node/icontexticonnode.js
@ -60,7 +60,7 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
        })
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.center_adapt",
@ -81,7 +81,7 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", icon1, this.text, blank)
        }))));
--- a/src/base/single/button/node/icontextnode.js
+++ b/src/base/single/button/node/icontextnode.js
@ -54,7 +54,7 @@ BI.IconTextNode = BI.inherit(BI.NodeButton, {
        })

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", this.icon, this.text)
        }))));
--- a/src/base/single/button/node/texticonnode.js
+++ b/src/base/single/button/node/texticonnode.js
@ -53,7 +53,7 @@ BI.TextIconNode = BI.inherit(BI.NodeButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", this.text, this.icon)
        }))));
--- a/src/base/single/button/node/textnode.js
+++ b/src/base/single/button/node/textnode.js
@ -24,7 +24,7 @@ BI.TextNode = BI.inherit(BI.NodeButton, {
        var o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: o.textAlign,
            whiteSpace: o.whiteSpace,
            textHeight: o.whiteSpace == "nowrap" ? o.height : o.textHeight,
--- a/src/base/single/editor/editor.code.js
+++ b/src/base/single/editor/editor.code.js
@ -61,7 +61,7 @@ BI.CodeEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: watermark,
                top: 0,
--- a/src/base/single/editor/editor.js
+++ b/src/base/single/editor/editor.js
@ -93,7 +93,7 @@ BI.Editor = BI.inherit(BI.Single, {

        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: items
        });
        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
--- a/src/base/single/editor/editor.multifile.js
+++ b/src/base/single/editor/editor.multifile.js
@ -50,7 +50,7 @@ BI.MultifileEditor = BI.inherit(BI.Single, {

        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.adaptive",
--- a/src/base/single/editor/editor.textarea.js
+++ b/src/base/single/editor/editor.textarea.js
@ -24,7 +24,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
        this.content.element.css({"resize": "none"});
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: {
                    type: "bi.adaptive",
--- a/src/base/single/label/label.js
+++ b/src/base/single/label/label.js
@ -59,7 +59,7 @@ BI.Label = BI.inherit(BI.Single, {
                        type: "bi.adaptive",
                        height: o.height,
                        scrollable: true,
-                        element: this.element,
+                        element: this,
                        items: [
                            {
                                el: (this.text = BI.createWidget(json)),
@ -77,7 +77,7 @@ BI.Label = BI.inherit(BI.Single, {
                BI.createWidget({
                    type: "bi.center_adapt",
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [
                        {
                            el: (this.text = BI.createWidget(json))
@ -97,7 +97,7 @@ BI.Label = BI.inherit(BI.Single, {
                    rgap: o.rgap,
                    tgap: o.tgap,
                    bgap: o.bgap,
-                    element: this.element,
+                    element: this,
                    items: [this.text]
                });
                return;
@ -109,7 +109,7 @@ BI.Label = BI.inherit(BI.Single, {
                BI.createWidget({
                    type: "bi.absolute",
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -124,7 +124,7 @@ BI.Label = BI.inherit(BI.Single, {
            BI.createWidget({
                type: "bi.center_adapt",
                scrollable: true,
-                element: this.element,
+                element: this,
                items: [{
                    el: (this.text = BI.createWidget(json))
                }]
@ -136,7 +136,7 @@ BI.Label = BI.inherit(BI.Single, {
            BI.createWidget({
                type: "bi.center_adapt",
                scrollable: true,
-                element: this.element,
+                element: this,
                items: [
                    {
                        el: (this.text = BI.createWidget(json))
@ -156,7 +156,7 @@ BI.Label = BI.inherit(BI.Single, {
                tgap: o.tgap,
                bgap: o.bgap,
                scrollable: true,
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
@ -170,7 +170,7 @@ BI.Label = BI.inherit(BI.Single, {
                    type: "bi.adaptive",
                    height: o.height,
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -193,7 +193,7 @@ BI.Label = BI.inherit(BI.Single, {
                "line-height": o.height + "px"
            });
            this.text = BI.createWidget(BI.extend(json, {
-                element: this.element
+                element: this
            }));
            BI.createWidget({
                type: "bi.layout",
@ -214,13 +214,13 @@ BI.Label = BI.inherit(BI.Single, {
            this.text = BI.createWidget(json);
            BI.createWidget({
                type: "bi.center_adapt",
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
        }
        this.text = BI.createWidget(BI.extend(json, {
-            element: this.element
+            element: this
        }));
        BI.createWidget({
            type: "bi.layout",
@ -239,7 +239,7 @@ BI.Label = BI.inherit(BI.Single, {
                        type: "bi.adaptive",
                        height: o.height,
                        scrollable: true,
-                        element: this.element,
+                        element: this,
                        items: [
                            {
                                el: (this.text = BI.createWidget(json)),
@ -263,7 +263,7 @@ BI.Label = BI.inherit(BI.Single, {
                    rgap: o.rgap,
                    tgap: o.tgap,
                    bgap: o.bgap,
-                    element: this.element,
+                    element: this,
                    items: [
                        {
                            el: (this.text = BI.createWidget(json))
@ -283,7 +283,7 @@ BI.Label = BI.inherit(BI.Single, {
                    rgap: o.rgap,
                    tgap: o.tgap,
                    bgap: o.bgap,
-                    element: this.element,
+                    element: this,
                    items: [this.text]
                });
                return;
@ -295,7 +295,7 @@ BI.Label = BI.inherit(BI.Single, {
                BI.createWidget({
                    type: "bi.absolute",
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -316,7 +316,7 @@ BI.Label = BI.inherit(BI.Single, {
                rgap: o.rgap,
                tgap: o.tgap,
                bgap: o.bgap,
-                element: this.element,
+                element: this,
                items: [{
                    el: (this.text = BI.createWidget(json))
                }]
@ -334,7 +334,7 @@ BI.Label = BI.inherit(BI.Single, {
                rgap: o.rgap,
                tgap: o.tgap,
                bgap: o.bgap,
-                element: this.element,
+                element: this,
                items: [
                    {
                        el: (this.text = BI.createWidget(json))
@ -354,7 +354,7 @@ BI.Label = BI.inherit(BI.Single, {
                rgap: o.rgap,
                tgap: o.tgap,
                bgap: o.bgap,
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
@ -368,7 +368,7 @@ BI.Label = BI.inherit(BI.Single, {
                    type: "bi.adaptive",
                    height: o.height,
                    scrollable: true,
-                    element: this.element,
+                    element: this,
                    items: [{
                        el: (this.text = BI.createWidget(json)),
                        left: o.hgap + o.lgap,
@ -391,7 +391,7 @@ BI.Label = BI.inherit(BI.Single, {
                "line-height": o.height + "px"
            });
            this.text = BI.createWidget(BI.extend(json, {
-                element: this.element
+                element: this
            }));
            BI.createWidget({
                type: "bi.layout",
@ -412,13 +412,13 @@ BI.Label = BI.inherit(BI.Single, {
            this.text = BI.createWidget(json);
            BI.createWidget({
                type: "bi.vertical_adapt",
-                element: this.element,
+                element: this,
                items: [this.text]
            });
            return;
        }
        this.text = BI.createWidget(BI.extend(json, {
-            element: this.element
+            element: this
        }));
        BI.createWidget({
            type: "bi.layout",
--- a/src/base/table/table.cell.js
+++ b/src/base/table/table.cell.js
@ -19,7 +19,7 @@ BI.TableCell = BI.inherit(BI.Widget, {
        BI.TableCell.superclass._init.apply(this, arguments);
        BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            whiteSpace: "nowrap",
            textAlign: this.options.textAlign,
            height: this.options.height,
--- a/src/base/table/table.collection.cell.js
+++ b/src/base/table/table.collection.cell.js
@ -30,7 +30,7 @@ BI.CollectionTableCell = BI.inherit(BI.Widget, {
        }));
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.cell,
                left: 0,
--- a/src/base/table/table.collection.js
+++ b/src/base/table/table.collection.js
@ -101,7 +101,7 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
        });
        this.contextLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topLeft,
                top: 0,
@ -146,7 +146,7 @@ BI.CollectionTable = BI.inherit(BI.Widget, {
        });
        this.scrollBarLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topScrollbar,
                right: 0,
--- a/src/base/table/table.grid.cell.js
+++ b/src/base/table/table.grid.cell.js
@ -32,7 +32,7 @@ BI.GridTableCell = BI.inherit(BI.Widget, {
        }));
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.cell,
                left: 0,
--- a/src/base/table/table.grid.js
+++ b/src/base/table/table.grid.js
@ -103,7 +103,7 @@ BI.GridTable = BI.inherit(BI.Widget, {
        });
        this.contextLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topLeft,
                top: 0,
@ -148,7 +148,7 @@ BI.GridTable = BI.inherit(BI.Widget, {
        });
        this.scrollBarLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.topScrollbar,
                right: 0,
--- a/src/base/table/table.grid.scrollbar.js
+++ b/src/base/table/table.grid.scrollbar.js
@ -40,7 +40,7 @@ BI.GridTableScrollbar = BI.inherit(BI.Widget, {
        });
        this.contextLayout = BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.face,
                left: 0,
@ -362,7 +362,7 @@ BI.GridTableHorizontalScrollbar = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.absolute",
            cls: "horizontal-scrollbar",
-            element: this.element,
+            element: this,
            width: o.size,
            height: BI.GridTableScrollbar.SIZE,
            items: [{
--- a/src/base/table/table.header.cell.js
+++ b/src/base/table/table.header.cell.js
@ -18,7 +18,7 @@ BI.TableHeaderCell = BI.inherit(BI.Widget, {
        BI.TableHeaderCell.superclass._init.apply(this, arguments);
        BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: "center",
            height: this.options.height,
            text: this.options.text,
--- a/src/base/table/table.js
+++ b/src/base/table/table.js
@ -443,7 +443,7 @@ BI.Table = BI.inherit(BI.Widget, {
            regionColumnSize = isRight ? [0, 'fill'] : ['fill', 0];
        }
        this.partitions = BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, {
            rows: 2,
            columns: 2,
@ -1051,7 +1051,7 @@ BI.Table = BI.inherit(BI.Widget, {
        BI.createWidget({
            type: "bi.adaptive",
            cls: "bottom-right",
-            element: this.element,
+            element: this,
            scrollable: false,
            items: [this.scrollBottomRight]
        });
--- a/src/base/table/table.resizable.cell.js
+++ b/src/base/table/table.resizable.cell.js
@ -65,7 +65,7 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.cell,
                left: 0,
--- a/src/base/table/table.resizable.js
+++ b/src/base/table/table.resizable.js
@ -41,7 +41,7 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
        this.regionResizerHandler = this._createResizerHandler();
        this.table = BI.createWidget(o.el, {
            type: "bi.grid_table",
-            element: this.element,
+            element: this,
            width: o.width,
            height: o.height,
            headerRowSize: o.headerRowSize,
@ -63,7 +63,7 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.regionResizerHandler,
                left: 0,
--- a/src/base/tree/1treeview.js
+++ b/src/base/tree/1treeview.js
@ -28,7 +28,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
            type: "bi.vertical",
            scrollable: true,
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.container, this.tip]
        });

--- a/src/base/tree/customtree.js
+++ b/src/base/tree/customtree.js
@ -87,7 +87,7 @@ BI.CustomTree = BI.inherit(BI.Widget, {
    initTree: function (nodes) {
        var self = this, o = this.options;
        this.tree = BI.createWidget(o.el, {
-            element: this.element,
+            element: this,
            items: this._formatItems(nodes),
            itemsCreator: function (op, callback) {
                o.itemsCreator.apply(this, [op, function (items) {
--- a/src/case/button/icon/icon.change.js
+++ b/src/case/button/icon/icon.change.js
@ -35,7 +35,7 @@ BI.IconChangeButton = BI.inherit(BI.Single, {
        var self = this, o = this.options;
        this.button = BI.createWidget({
            type: "bi.icon_button",
-            element: this.element,
+            element: this,
            cls: o.iconClass,
            height: o.height,
            iconWidth: o.iconWidth,
--- a/src/case/button/item.multiselect.js
+++ b/src/case/button/item.multiselect.js
@ -40,7 +40,7 @@ BI.MultiSelectItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", {
                type: "bi.center_adapt",
--- a/src/case/button/item.singleselect.icontext.js
+++ b/src/case/button/item.singleselect.icontext.js
@ -18,7 +18,7 @@ BI.SingleSelectIconTextItem = BI.inherit(BI.Single, {
        var self = this, o = this.options;
        this.text = BI.createWidget({
            type: "bi.icon_text_item",
-            element: this.element,
+            element: this,
            cls: o.iconClass,
            once: o.once,
            selected: o.selected,
--- a/src/case/button/item.singleselect.js
+++ b/src/case/button/item.singleselect.js
@ -16,7 +16,7 @@ BI.SingleSelectItem = BI.inherit(BI.BasicButton, {
        var self = this, o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
-            element: this.element,
+            element: this,
            textAlign: "left",
            whiteSpace: "nowrap",
            textHeight: o.height,
--- a/src/case/button/item.singleselect.radio.js
+++ b/src/case/button/item.singleselect.radio.js
@ -41,7 +41,7 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, {
        });

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("left", {
                type: "bi.center_adapt",
--- a/src/case/button/node/node.arrow.js
+++ b/src/case/button/node/node.arrow.js
@ -49,7 +49,7 @@ BI.ArrowNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/node/node.first.plus.js
+++ b/src/case/button/node/node.first.plus.js
@ -51,7 +51,7 @@ BI.FirstPlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/node/node.icon.arrow.js
+++ b/src/case/button/node/node.icon.arrow.js
@ -72,7 +72,7 @@ BI.IconArrowNode = BI.inherit(BI.NodeButton, {
            el: icon
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/node/node.last.plus.js
+++ b/src/case/button/node/node.last.plus.js
@ -51,7 +51,7 @@ BI.LastPlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/node/node.mid.plus.js
+++ b/src/case/button/node/node.mid.plus.js
@ -51,7 +51,7 @@ BI.MidPlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/node/node.multilayer.icon.arrow.js
+++ b/src/case/button/node/node.multilayer.icon.arrow.js
@ -49,7 +49,7 @@ BI.MultiLayerIconArrowNode = BI.inherit(BI.NodeButton, {
        items.push(this.node);
        BI.createWidget({
            type: "bi.td",
-            element: this.element,
+            element: this,
            columnSize: BI.makeArray(o.layer, 13),
            items: [items]
        })
--- a/src/case/button/node/node.plus.js
+++ b/src/case/button/node/node.plus.js
@ -47,7 +47,7 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/node/node.triangle.js
+++ b/src/case/button/node/node.triangle.js
@ -50,7 +50,7 @@ BI.TriangleGroupNode = BI.inherit(BI.NodeButton, {
            el: this.checkbox
        }, this.text);
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/treeitem/item.first.treeleaf.js
+++ b/src/case/button/treeitem/item.first.treeleaf.js
@ -60,7 +60,7 @@ BI.FirstTreeLeafItem = BI.inherit(BI.BasicButton, {
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/treeitem/item.icon.treeleaf.js
+++ b/src/case/button/treeitem/item.icon.treeleaf.js
@ -46,7 +46,7 @@ BI.IconTreeLeafItem = BI.inherit(BI.BasicButton, {
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/treeitem/item.last.treeleaf.js
+++ b/src/case/button/treeitem/item.last.treeleaf.js
@ -60,7 +60,7 @@ BI.LastTreeLeafItem = BI.inherit(BI.BasicButton, {
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/treeitem/item.mid.treeleaf.js
+++ b/src/case/button/treeitem/item.mid.treeleaf.js
@ -60,7 +60,7 @@ BI.MidTreeLeafItem = BI.inherit(BI.BasicButton, {
            el: this.text
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
            items: items
        }))));
--- a/src/case/button/treeitem/item.multilayer.icon.treeleaf.js
+++ b/src/case/button/treeitem/item.multilayer.icon.treeleaf.js
@ -51,7 +51,7 @@ BI.MultiLayerIconTreeLeafItem = BI.inherit(BI.BasicButton, {
        items.push(this.item);
        BI.createWidget({
            type: "bi.td",
-            element: this.element,
+            element: this,
            columnSize: BI.makeArray(o.layer, 13),
            items: [items]
        });
--- a/src/case/button/treeitem/item.treetextleaf.js
+++ b/src/case/button/treeitem/item.treetextleaf.js
@ -34,7 +34,7 @@ BI.TreeTextLeafItem = BI.inherit(BI.BasicButton, {
        });
        BI.createWidget({
            type: "bi.htape",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text
            }]
--- a/src/case/calendar/calendar.js
+++ b/src/case/calendar/calendar.js
@ -120,7 +120,7 @@ BI.Calendar = BI.inherit(BI.Widget, {
            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
        })
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this

        }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("top", title, this.days)
--- a/src/case/calendar/calendar.year.js
+++ b/src/case/calendar/calendar.year.js
@ -88,7 +88,7 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
        });
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this

        }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("top", this.years)
--- a/src/case/canvas/canvas.complex.js
+++ b/src/case/canvas/canvas.complex.js
@ -18,7 +18,7 @@ BI.ComplexCanvas = BI.inherit(BI.Widget, {
        var o = this.options;
        this.canvas = BI.createWidget({
            type: "bi.canvas",
-            element: this.element,
+            element: this,
            width: o.width,
            height: o.height
        });
--- a/src/case/chart/chart.combine.js
+++ b/src/case/chart/chart.combine.js
@ -1,87 +0,0 @@
-/**
- * 图表控件
- * @class BI.CombineChart
- * @extends BI.Widget
- */
-BI.CombineChart = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.CombineChart.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-combine-chart",
-            items: [],
-            xAxis: [{type: "category"}],
-            yAxis: [{type: "value"}],
-            types: [[], []],
-            formatConfig: function(config){return config;}
-        })
-    },
-
-    _init: function () {
-        BI.CombineChart.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-
-        //图可配置属性
-        this.CombineChart = BI.createWidget({
-            type: "bi.chart",
-            element: this.element
-        });
-        this.CombineChart.on(BI.Chart.EVENT_CHANGE, function (obj) {
-            self.fireEvent(BI.CombineChart.EVENT_CHANGE, obj);
-        });
-
-        if (BI.isNotEmptyArray(o.items)) {
-            this.populate(o.items);
-        }
-    },
-
-    _formatItems: function (items) {
-        var result = [], self = this, o = this.options;
-        var yAxisIndex = 0;
-        BI.each(items, function (i, belongAxisItems) {
-            var combineItems = BI.ChartCombineFormatItemFactory.combineItems(o.types[i], belongAxisItems);
-            BI.each(combineItems, function (j, axisItems) {
-                if (BI.isArray(axisItems)) {
-                    result = BI.concat(result, axisItems);
-                } else {
-                    result.push(BI.extend(axisItems, {"yAxis": yAxisIndex}));
-                }
-            });
-            if (BI.isNotEmptyArray(combineItems)) {
-                yAxisIndex++;
-            }
-        });
-        var config = BI.ChartCombineFormatItemFactory.combineConfig();
-        config.plotOptions.click = function () {
-            self.fireEvent(BI.CombineChart.EVENT_CHANGE, this.pointOption);
-        };
-        return [result, config];
-    },
-
-    setTypes: function (types) {
-        this.options.types = types || [[]];
-    },
-
-    populate: function (items, types) {
-        var o = this.options;
-        if (BI.isNotNull(types)) {
-            this.setTypes(types);
-        }
-        var opts = this._formatItems(items);
-        BI.extend(opts[1], {
-            xAxis: o.xAxis,
-            yAxis: o.yAxis
-        });
-        var result = o.formatConfig(opts[1], opts[0]);
-        this.CombineChart.populate(result[0], result[1]);
-    },
-
-    resize: function () {
-        this.CombineChart.resize();
-    },
-
-    magnify: function(){
-        this.CombineChart.magnify();
-    }
-});
-BI.CombineChart.EVENT_CHANGE = "EVENT_CHANGE";
-$.shortcut('bi.combine_chart', BI.CombineChart);
--- a/src/case/chart/factory.charts.js
+++ b/src/case/chart/factory.charts.js
@ -1,289 +0,0 @@
-BI.ChartCombineFormatItemFactory = {
-    combineItems: function (types, items) {
-        var calItems = BI.values(items);
-        return BI.map(calItems, function (idx, item) {
-            return BI.ChartCombineFormatItemFactory.formatItems(types[idx], item);
-        });
-    },
-
-    formatItems: function (type, items) {
-        var item = {};
-        switch (type) {
-            case BICst.WIDGET.BAR:
-            case BICst.WIDGET.ACCUMULATE_BAR:
-            case BICst.WIDGET.COMPARE_BAR:
-                item = BI.extend({"type": "bar"}, items);
-                break;
-            case BICst.WIDGET.BUBBLE:
-            case BICst.WIDGET.FORCE_BUBBLE:
-                item = BI.extend({"type": "bubble"}, items);
-                break;
-            case BICst.WIDGET.SCATTER:
-                item = BI.extend({"type": "scatter"}, items);
-                break;
-            case BICst.WIDGET.AXIS:
-            case BICst.WIDGET.ACCUMULATE_AXIS:
-            case BICst.WIDGET.PERCENT_ACCUMULATE_AXIS:
-            case BICst.WIDGET.COMPARE_AXIS:
-            case BICst.WIDGET.FALL_AXIS:
-                item = BI.extend({"type": "column"}, items);
-                break;
-            case BICst.WIDGET.LINE:
-                item = BI.extend({"type": "line"}, items);
-                break;
-            case BICst.WIDGET.AREA:
-            case BICst.WIDGET.ACCUMULATE_AREA:
-            case BICst.WIDGET.COMPARE_AREA:
-            case BICst.WIDGET.RANGE_AREA:
-            case BICst.WIDGET.PERCENT_ACCUMULATE_AREA:
-                item = BI.extend({"type": "area"}, items);
-                break;
-            case BICst.WIDGET.DONUT:
-                item = BI.extend({"type": "pie"}, items);
-                break;
-            case BICst.WIDGET.RADAR:
-            case BICst.WIDGET.ACCUMULATE_RADAR:
-                item = BI.extend({"type": "radar"}, items);
-                break;
-            case BICst.WIDGET.PIE:
-                item = BI.extend({"type": "pie"}, items);
-                break;
-            case BICst.WIDGET.DASHBOARD:
-                item = BI.extend({"type": "gauge"}, items);
-                break;
-            case BICst.WIDGET.MAP:
-                item = BI.extend({"type": "areaMap"}, items);
-                break;
-            case BICst.WIDGET.GIS_MAP:
-                item = BI.extend({"type": "pointMap"}, items);
-                break;
-            default:
-                item = BI.extend({"type": "column"}, items);
-                break;
-        }
-        return item;
-    },
-
-    combineConfig: function () {
-        return {
-            "plotOptions": {
-                "rotatable": false,
-                "startAngle": 0,
-                "borderRadius": 0,
-                "endAngle": 360,
-                "innerRadius": "0.0%",
-
-                "layout": "horizontal",
-                "hinge": "rgb(101,107,109)",
-                "dataLabels": {
-                    "style": {fontFamily: "inherit", color: "#808080", fontSize: "12px"},
-                    "formatter": {
-                        "identifier": "${VALUE}",
-                        "valueFormat": this._contentFormat2Decimal,
-                        "seriesFormat": this._contentFormat,
-                        "percentFormat": this._contentFormatPercentage,
-                        "categoryFormat": this._contentFormat,
-                        "XFormat": this._contentFormat2Decimal,
-                        "YFormat": this._contentFormat2Decimal,
-                        "sizeFormat": this._contentFormat2Decimal
-                    },
-                    "align": "outside",
-                    "enabled": false
-                },
-                "percentageLabel": {
-                    "formatter": {
-                        "identifier": "${PERCENT}",
-                        "valueFormat": this._contentFormat2Decimal,
-                        "seriesFormat": this._contentFormat,
-                        "percentFormat": this._contentFormatPercentage,
-                        "categoryFormat": this._contentFormat
-                    },
-                    "style": {
-                        "fontFamily": "Microsoft YaHei, Hiragino Sans GB W3", "color": "#808080", "fontSize": "12px"
-                    },
-                    "align": "bottom",
-                    "enabled": true
-                },
-                "valueLabel": {
-                    "formatter": {
-                        "identifier": "${SERIES}${VALUE}",
-                        "valueFormat": this._contentFormat2Decimal,
-                        "seriesFormat": this._contentFormat,
-                        "percentFormat": this._contentFormatPercentage,
-                        "categoryFormat": this._contentFormat
-                    },
-                    "backgroundColor": "rgb(255,255,0)",
-                    "style": {
-                        "fontFamily": "Microsoft YaHei, Hiragino Sans GB W3", "color": "#808080", "fontSize": "12px"
-                    },
-                    "align": "inside",
-                    "enabled": true
-                },
-                "hingeBackgroundColor": "rgb(220,242,249)",
-                "seriesLabel": {
-                    "formatter": {
-                        "identifier": "${CATEGORY}",
-                        "valueFormat": this._contentFormat2Decimal,
-                        "seriesFormat": this._contentFormat,
-                        "percentFormat": this._contentFormatPercentage,
-                        "categoryFormat": this._contentFormat
-                    },
-                    "style": {
-                        "fontFamily": "Microsoft YaHei, Hiragino Sans GB W3", "color": "#808080", "fontSize": "12px"
-                    },
-                    "align": "bottom",
-                    "enabled": true
-                },
-                "style": "pointer",
-                "paneBackgroundColor": "rgb(252,252,252)",
-                "needle": "rgb(229,113,90)",
-
-
-                "large": false,
-                "connectNulls": false,
-                "shadow": true,
-                "curve": false,
-                "sizeBy": "area",
-                "tooltip": {
-                    "formatter": {
-                        "identifier": "${SERIES}${X}${Y}${SIZE}{CATEGORY}${SERIES}${VALUE}",
-                        "valueFormat": "function(){return window.FR ? FR.contentFormat(arguments[0], '#.##') : arguments[0];}",
-                        "seriesFormat": this._contentFormat,
-                        "percentFormat": this._contentFormatPercentage,
-                        "categoryFormat": this._contentFormat,
-                        "XFormat": this._contentFormat2Decimal,
-                        "sizeFormat": this._contentFormat2Decimal,
-                        "YFormat": this._contentFormat2Decimal
-                    },
-                    "shared": false,
-                    "padding": 5,
-                    "backgroundColor": "rgba(0,0,0,0.4980392156862745)",
-                    "borderColor": "rgb(0,0,0)",
-                    "shadow": false,
-                    "borderRadius": 2,
-                    "borderWidth": 0,
-                    "follow": false,
-                    "enabled": true,
-                    "animation": true,
-                    style: {
-                        "fontFamily": "Microsoft YaHei, Hiragino Sans GB W3",
-                        "color": "#c4c6c6",
-                        "fontSize": "12px",
-                        "fontWeight": ""
-                    }
-                },
-                "maxSize": 80,
-                "fillColorOpacity": 1.0,
-                "step": false,
-                "force": false,
-                "minSize": 15,
-                "displayNegative": true,
-                "categoryGap": "16.0%",
-                "borderColor": "rgb(255,255,255)",
-                "borderWidth": 1,
-                "gap": "22.0%",
-                "animation": true,
-                "lineWidth": 2,
-
-                bubble: {
-                    "large": false,
-                    "connectNulls": false,
-                    "shadow": true,
-                    "curve": false,
-                    "sizeBy": "area",
-                    "maxSize": 80,
-                    "minSize": 15,
-                    "lineWidth": 0,
-                    "animation": true,
-                    "fillColorOpacity": 0.699999988079071,
-                    "marker": {
-                        "symbol": "circle",
-                        "radius": 28.39695010101295,
-                        "enabled": true
-                    }
-                }
-            },
-            dTools: {
-                enabled: false,
-                style: {
-                    fontFamily: "Microsoft YaHei, Hiragino Sans GB W3",
-                    color: "#1a1a1a",
-                    fontSize: "12px"
-                },
-                backgroundColor: 'white'
-            },
-            dataSheet: {
-                enabled: false,
-                "borderColor": "rgb(0,0,0)",
-                "borderWidth": 1,
-                "formatter": this._contentFormat2Decimal,
-                style: {
-                    "fontFamily": "Microsoft YaHei, Hiragino Sans GB W3", "color": "#808080", "fontSize": "12px"
-                }
-            },
-            "borderColor": "rgb(238,238,238)",
-            "shadow": false,
-            "legend": {
-                "borderColor": "rgb(204,204,204)",
-                "borderRadius": 0,
-                "shadow": false,
-                "borderWidth": 0,
-                "visible": true,
-                "style": {
-                    "fontFamily": "Microsoft YaHei, Hiragino Sans GB W3", "color": "#1a1a1a", "fontSize": "12px"
-                },
-                "position": "right",
-                "enabled": false
-            },
-            "rangeLegend": {
-                "range": {
-                    "min": 0,
-                    "color": [
-                        [
-                            0,
-                            "rgb(182,226,255)"
-                        ],
-                        [
-                            0.5,
-                            "rgb(109,196,255)"
-                        ],
-                        [
-                            1,
-                            "rgb(36,167,255)"
-                        ]
-                    ],
-                    "max": 266393
-                },
-                "enabled": false
-            },
-            "zoom": {"zoomType": "xy", "zoomTool": {"visible": false, "resize": true, "from": "", "to": ""}},
-            "plotBorderColor": "rgba(255,255,255,0)",
-            "tools": {
-                "hidden": true,
-                "toImage": {"enabled": true},
-                "sort": {"enabled": true},
-                "enabled": false,
-                "fullScreen": {"enabled": true}
-            },
-            "plotBorderWidth": 0,
-            "colors": ["rgb(99,178,238)", "rgb(118,218,145)"],
-            "borderRadius": 0,
-            "borderWidth": 0,
-            "style": "normal",
-            "plotShadow": false,
-            "plotBorderRadius": 0
-        };
-    },
-
-    _contentFormat: function () {
-        return BI.contentFormat(arguments[0], '')
-    },
-
-    _contentFormat2Decimal: function () {
-        return BI.contentFormat(arguments[0], '#.##')
-    },
-
-    _contentFormatPercentage: function () {
-        return BI.contentFormat(arguments[0], '#.##%')
-    }
-};
--- a/src/case/colorpicker/colorpicker.js
+++ b/src/case/colorpicker/colorpicker.js
@ -154,7 +154,7 @@ BI.ColorPicker = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        this.colors = BI.createWidget({
            type: "bi.button_group",
-            element: this.element,
+            element: this,
            items: BI.createItems(o.items || this._items, {
                type: "bi.color_picker_button",
                once: false
--- a/src/case/colorpicker/editor.colorpicker.js
+++ b/src/case/colorpicker/editor.colorpicker.js
@ -56,7 +56,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {

        BI.createWidget({
            type: "bi.htape",
-            element: this.element,
+            element: this,
            items: [{
                el: this.colorShow,
                width: 'fill'
--- a/src/case/editor/editor.record.js
+++ b/src/case/editor/editor.record.js
@ -116,7 +116,7 @@ BI.RecordEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.inline",
-            element: this.element,
+            element: this,
            items: [this.textContainer, this.editor]
        });
        BI.Resizers.add(this.getName(), BI.bind(this._adjustInputWidth, this));
--- a/src/case/editor/editor.shelter.js
+++ b/src/case/editor/editor.shelter.js
@ -55,7 +55,7 @@ BI.ShelterEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -126,7 +126,7 @@ BI.ShelterEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
--- a/src/case/editor/editor.sign.js
+++ b/src/case/editor/editor.sign.js
@ -64,7 +64,7 @@ BI.SignEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -128,7 +128,7 @@ BI.SignEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
--- a/src/case/editor/editor.state.js
+++ b/src/case/editor/editor.state.js
@ -65,7 +65,7 @@ BI.StateEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -127,7 +127,7 @@ BI.StateEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
--- a/src/case/editor/editor.state.simple.js
+++ b/src/case/editor/editor.state.simple.js
@ -65,7 +65,7 @@ BI.SimpleStateEditor = BI.inherit(BI.Single, {
        });
        BI.createWidget({
            type: "bi.absolute",
-            element: this.element,
+            element: this,
            items: [{
                el: this.text,
                left: 0,
@ -127,7 +127,7 @@ BI.SimpleStateEditor = BI.inherit(BI.Single, {
        BI.createWidget({
            type: "bi.vertical",
            scrolly: false,
-            element: this.element,
+            element: this,
            items: [this.editor]
        });
        this._showHint();
--- a/src/case/expander/expander.branch.handstand.js
+++ b/src/case/expander/expander.branch.handstand.js
@ -23,7 +23,7 @@ BI.HandStandBranchExpander = BI.inherit(BI.Widget, {
        this._initExpander();
        this._initBranchView();
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, {
                type: "bi.center_adapt",
--- a/src/case/expander/expander.branch.js
+++ b/src/case/expander/expander.branch.js
@ -22,7 +22,7 @@ BI.BranchExpander = BI.inherit(BI.Widget, {
        this._initExpander();
        this._initBranchView();
        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.expander, this.branchView)
        }))));
--- a/src/case/layer/pane.list.js
+++ b/src/case/layer/pane.list.js
@ -67,7 +67,7 @@ BI.ListPane = BI.inherit(BI.Pane, {
        this.check();

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({
            scrolly: true,
            lgap: o.lgap,
--- a/src/case/layer/panel.js
+++ b/src/case/layer/panel.js
@ -21,7 +21,7 @@ BI.Panel = BI.inherit(BI.Widget,{
        var o = this.options;

        BI.createWidget(BI.extend({
-            element: this.element
+            element: this
        }, BI.LogicFactory.createLogic("vertical", BI.extend(o.logic, {
            items: BI.LogicFactory.createLogicItemsByDirection("top", this._createTitle()
                ,this.options.el)
--- a/Show More
+++ b/Show More