diff --git a/dist/base.js b/dist/base.js
index 681d77f9aa..ca59c8442b 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -420,7 +420,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -736,14 +736,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -765,7 +765,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -776,11 +776,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -1010,7 +1010,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -5093,7 +5093,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -5123,7 +5123,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -5132,7 +5132,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -5659,7 +5659,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -8804,9 +8804,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -8816,7 +8816,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -8956,7 +8956,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -9008,7 +9008,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
@@ -9639,7 +9639,7 @@ BI.shortcut("bi.checkbox", BI.Checkbox);/**
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/dist/bundle.js b/dist/bundle.js
index aa30b3da44..72dda7d6a9 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -21484,10 +21484,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -21862,6 +21862,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -26410,7 +26425,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -26627,7 +26642,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -26693,7 +26708,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -26832,10 +26847,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -30228,7 +30243,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -30237,7 +30252,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30336,7 +30351,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -30344,7 +30359,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30613,7 +30628,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -30622,7 +30637,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -31254,7 +31269,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31308,7 +31323,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -31382,7 +31397,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -32478,14 +32493,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -33122,7 +33137,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -35633,7 +35648,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -35949,14 +35964,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -35978,7 +35993,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -35989,11 +36004,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -36223,7 +36238,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -40306,7 +40321,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -40336,7 +40351,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -40345,7 +40360,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -40872,7 +40887,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -44017,9 +44032,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -44029,7 +44044,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -44169,7 +44184,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -44221,7 +44236,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
@@ -44852,7 +44867,7 @@ BI.shortcut("bi.checkbox", BI.Checkbox);/**
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/dist/core.js b/dist/core.js
index 0dd6f7617f..be67b3acb0 100644
--- a/dist/core.js
+++ b/dist/core.js
@@ -21484,10 +21484,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -21862,6 +21862,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -26410,7 +26425,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -26627,7 +26642,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -26693,7 +26708,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -26832,10 +26847,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -30228,7 +30243,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -30237,7 +30252,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30336,7 +30351,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -30344,7 +30359,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30613,7 +30628,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -30622,7 +30637,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -31254,7 +31269,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31308,7 +31323,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -31382,7 +31397,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -32478,14 +32493,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -33122,7 +33137,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
diff --git a/dist/fineui.js b/dist/fineui.js
index b066593a64..6356e67a66 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -21723,10 +21723,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -22101,6 +22101,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -26649,7 +26664,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -26866,7 +26881,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -26932,7 +26947,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -27071,10 +27086,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -30467,7 +30482,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -30476,7 +30491,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30575,7 +30590,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -30583,7 +30598,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30852,7 +30867,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -30861,7 +30876,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -31493,7 +31508,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31547,7 +31562,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -31621,7 +31636,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -32717,14 +32732,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -33361,7 +33376,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -35872,7 +35887,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -36188,14 +36203,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -36217,7 +36232,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -36228,11 +36243,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -36462,7 +36477,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -40545,7 +40560,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -40575,7 +40590,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -40584,7 +40599,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -41111,7 +41126,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -44256,9 +44271,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -44268,7 +44283,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -44408,7 +44423,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -44460,7 +44475,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
@@ -45091,7 +45106,7 @@ BI.shortcut("bi.checkbox", BI.Checkbox);/**
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/dist/fineui_without_jquery_polyfill.js b/dist/fineui_without_jquery_polyfill.js
index 07aefdd9f3..b8f7621c1a 100644
--- a/dist/fineui_without_jquery_polyfill.js
+++ b/dist/fineui_without_jquery_polyfill.js
@@ -11869,10 +11869,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -12247,6 +12247,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -16795,7 +16810,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -17012,7 +17027,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -17078,7 +17093,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -17217,10 +17232,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -19955,7 +19970,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -19964,7 +19979,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -20063,7 +20078,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -20071,7 +20086,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -20340,7 +20355,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -20349,7 +20364,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -20981,7 +20996,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -21035,7 +21050,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -21109,7 +21124,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -22205,14 +22220,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -22849,7 +22864,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -25159,7 +25174,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -25475,14 +25490,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -25504,7 +25519,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -25515,11 +25530,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -25749,7 +25764,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -28932,7 +28947,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -28962,7 +28977,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -28971,7 +28986,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -29498,7 +29513,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -32643,9 +32658,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -32655,7 +32670,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -32795,7 +32810,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -32847,7 +32862,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
diff --git a/src/base/foundation/message.js b/src/base/foundation/message.js
index 3586c4ebe4..9d751f195b 100644
--- a/src/base/foundation/message.js
+++ b/src/base/foundation/message.js
@@ -19,7 +19,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -49,7 +49,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -58,7 +58,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js
index decac852f5..e2fb1a38b4 100644
--- a/src/base/layer/layer.popover.js
+++ b/src/base/layer/layer.popover.js
@@ -30,7 +30,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
diff --git a/src/base/single/button/button.basic.js b/src/base/single/button/button.basic.js
index 61fd69d9d4..2f3583c60f 100644
--- a/src/base/single/button/button.basic.js
+++ b/src/base/single/button/button.basic.js
@@ -127,14 +127,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -156,7 +156,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -167,11 +167,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -401,7 +401,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
diff --git a/src/base/single/editor/editor.textarea.js b/src/base/single/editor/editor.textarea.js
index 5e6335c5d0..b224165eb8 100644
--- a/src/base/single/editor/editor.textarea.js
+++ b/src/base/single/editor/editor.textarea.js
@@ -47,9 +47,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -59,7 +59,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
diff --git a/src/base/single/iframe/iframe.js b/src/base/single/iframe/iframe.js
index 8e0c8e539a..a6a3d56afc 100644
--- a/src/base/single/iframe/iframe.js
+++ b/src/base/single/iframe/iframe.js
@@ -17,7 +17,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
diff --git a/src/base/single/img/img.js b/src/base/single/img/img.js
index aa5054bc4f..9703c40228 100644
--- a/src/base/single/img/img.js
+++ b/src/base/single/img/img.js
@@ -19,7 +19,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
diff --git a/src/base/single/input/file.js b/src/base/single/input/file.js
index cb8044f7fe..49e7b84ba7 100644
--- a/src/base/single/input/file.js
+++ b/src/base/single/input/file.js
@@ -582,7 +582,7 @@
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/src/base/single/single.js b/src/base/single/single.js
index 56875e0c21..3a59edc3f7 100644
--- a/src/base/single/single.js
+++ b/src/base/single/single.js
@@ -101,7 +101,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
diff --git a/src/core/controller/controller.layer.js b/src/core/controller/controller.layer.js
index 7e4b6841d2..95212f452c 100644
--- a/src/core/controller/controller.layer.js
+++ b/src/core/controller/controller.layer.js
@@ -49,7 +49,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
diff --git a/src/core/controller/controller.popover.js b/src/core/controller/controller.popover.js
index 19967746d9..d8367fcdaf 100644
--- a/src/core/controller/controller.popover.js
+++ b/src/core/controller/controller.popover.js
@@ -93,7 +93,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
diff --git a/src/core/controller/controller.resizer.js b/src/core/controller/controller.resizer.js
index 53afad20a3..80a5386f1f 100644
--- a/src/core/controller/controller.resizer.js
+++ b/src/core/controller/controller.resizer.js
@@ -18,7 +18,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
diff --git a/src/core/controller/controller.tooltips.js b/src/core/controller/controller.tooltips.js
index 9fed164ae1..d790a11cde 100644
--- a/src/core/controller/controller.tooltips.js
+++ b/src/core/controller/controller.tooltips.js
@@ -89,10 +89,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
diff --git a/src/core/widget.js b/src/core/widget.js
index 6c30a0f7ed..8a29dccaf2 100644
--- a/src/core/widget.js
+++ b/src/core/widget.js
@@ -93,10 +93,10 @@
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -471,4 +471,19 @@
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();
\ No newline at end of file
diff --git a/src/core/wrapper/layout/adapt/adapt.center.js b/src/core/wrapper/layout/adapt/adapt.center.js
index a09aaf4f28..3f03748257 100644
--- a/src/core/wrapper/layout/adapt/adapt.center.js
+++ b/src/core/wrapper/layout/adapt/adapt.center.js
@@ -18,7 +18,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -27,7 +27,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/adapt/adapt.horizontal.js b/src/core/wrapper/layout/adapt/adapt.horizontal.js
index 3b672239cd..56d74a1afd 100644
--- a/src/core/wrapper/layout/adapt/adapt.horizontal.js
+++ b/src/core/wrapper/layout/adapt/adapt.horizontal.js
@@ -19,7 +19,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -27,7 +27,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/adapt/adapt.vertical.js b/src/core/wrapper/layout/adapt/adapt.vertical.js
index 542be037d8..ca39e4a7d0 100644
--- a/src/core/wrapper/layout/adapt/adapt.vertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.vertical.js
@@ -18,7 +18,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -27,7 +27,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
index a88b91534c..a5f34ad716 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
@@ -13,7 +13,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index 6940fc6a97..a46ab363d6 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -23,7 +23,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
index 85f4109b39..9bab56711f 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
@@ -23,7 +23,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/layout.horizontal.js b/src/core/wrapper/layout/layout.horizontal.js
index 20f90e5dfd..0be85cb668 100644
--- a/src/core/wrapper/layout/layout.horizontal.js
+++ b/src/core/wrapper/layout/layout.horizontal.js
@@ -20,14 +20,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js
index 1714f4da86..7bb7f2c9b5 100644
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@@ -25,7 +25,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",