Pull request #2096: 无JIRA任务整体布局的resize和update

Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit '14ce46f10eb2000eca4ba910aa5deeba0b534fc8': 整理代码整理代码整理代码整理代码整理代码整理代码整理代码整体布局的resize和update
3 years ago · f8ff9fc600
49 changed files with 226 additions and 282 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,6 @@
 # 更新日志
 2.0(2021-07)
+- layout支持forceUpdate刷新方式
 - width属性支持calc()
 - 修改了颜色选择器交互
 - 新增bi.horizontal_fill、bi.vertical_fill布局
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -198,6 +198,21 @@ BI.Layout = BI.inherit(BI.Widget, {
        return this.element;
    },

+    // 不依赖于this.options.items进行更新
+    _updateItemAt: function (index, item) {
+        var del = this._children[this._getChildName(index)];
+        delete this._children[this._getChildName(index)];
+        var w = this._addElement(index, item);
+        this._children[this._getChildName(index)] = w;
+        if (index > 0) {
+            this._children[this._getChildName(index - 1)].element.after(w.element);
+        } else {
+            w.element.prependTo(this._getWrapper());
+        }
+        del._destroy();
+        w._mount();
+    },
+
    _addItemAt: function (index, item) {
        for (var i = this.options.items.length; i > index; i--) {
            this._children[this._getChildName(i)] = this._children[this._getChildName(i - 1)];
@ -286,35 +301,13 @@ BI.Layout = BI.inherit(BI.Widget, {
    },

    shouldUpdateItem: function (index, item) {
-        if (index < 0 || index > this.options.items.length - 1) {
-            return false;
-        }
        var child = this._children[this._getChildName(index)];
-        if (!child.shouldUpdate) {
+        if (!child || !child.shouldUpdate) {
            return null;
        }
        return child.shouldUpdate(this._getOptions(item));
    },

-    updateItemAt: function (index, item) {
-        if (index < 0 || index > this.options.items.length - 1) {
-            return;
-        }
-        var del = this._children[this._getChildName(index)];
-        delete this._children[this._getChildName(index)];
-        this.options.items.splice(index, 1);
-        var w = this._addElement(index, item);
-        this.options.items.splice(index, 0, item);
-        this._children[this._getChildName(index)] = w;
-        if (index > 0) {
-            this._children[this._getChildName(index - 1)].element.after(w.element);
-        } else {
-            w.element.prependTo(this._getWrapper());
-        }
-        del._destroy();
-        w._mount();
-    },
-
    addItems: function (items, context) {
        var self = this, o = this.options;
        var fragment = BI.Widget._renderEngine.createFragment();
@ -394,7 +387,7 @@ BI.Layout = BI.inherit(BI.Widget, {
            // if (child.update) {
            //     return child.update(this._getOptions(vnode));
            // }
-            return this.updateItemAt(index, vnode);
+            return this._updateItemAt(index, vnode);
        }
    },

@ -550,34 +543,23 @@ BI.Layout = BI.inherit(BI.Widget, {
        return updated;
    },

+    forceUpdate: function (opt) {
+        if (this._isMounted) {
+            BI.each(this._children, function (i, c) {
+                c.destroy();
+            });
+            this._children = {};
+        }
+        this.options.items = opt.items;
+        this.stroke(opt.items);
+    },
+
    update: function (opt) {
        var o = this.options;
        var items = opt.items || [];
-        var updated = this.updateChildren(o.items, items);
+        var oldItems = o.items;
        this.options.items = items;
-        return updated;
-        // var updated, i, len;
-        // for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
-        //     if (!this._compare(o.items[i], items[i])) {
-        //         updated = this.updateItemAt(i, items[i]) || updated;
-        //     }
-        // }
-        // if (o.items.length > items.length) {
-        //     var deleted = [];
-        //     for (i = items.length; i < o.items.length; i++) {
-        //         deleted.push(this._children[this._getChildName(i)]);
-        //         delete this._children[this._getChildName(i)];
-        //     }
-        //     o.items.splice(items.length);
-        //     BI.each(deleted, function (i, w) {
-        //         w._destroy();
-        //     })
-        // } else if (items.length > o.items.length) {
-        //     for (i = o.items.length; i < items.length; i++) {
-        //         this.addItemAt(i, items[i]);
-        //     }
-        // }
-        // return updated;
+        return this.updateChildren(oldItems, items);
    },

    stroke: function (items) {
@ -616,7 +598,6 @@ BI.Layout = BI.inherit(BI.Widget, {
    },

    populate: function (items) {
-        var self = this, o = this.options;
        items = items || [];
        if (this._isMounted) {
            this.update({items: items});
@ -627,7 +608,7 @@ BI.Layout = BI.inherit(BI.Widget, {
    },

    resize: function () {
-
+        this.stroke(this.options.items);
    }
 });
 BI.shortcut("bi.layout", BI.Layout);
--- a/src/core/wrapper/layout/adapt/absolute.center.js
+++ b/src/core/wrapper/layout/adapt/absolute.center.js
@ -35,10 +35,6 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        // console.log("absolute_center_adapt布局不需要resize");
-    },
-
    populate: function (items) {
        BI.AbsoluteCenterLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/adapt/absolute.horizontal.js
+++ b/src/core/wrapper/layout/adapt/absolute.horizontal.js
@ -42,7 +42,11 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("absolute_horizontal_adapt布局不需要resize");
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
@ -80,7 +80,7 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("absolute_left_right_vertical_adapt布局不需要resize");
+        this.layout.stroke(this._formatItems())
    },

    addItem: function () {
@ -132,7 +132,11 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
+        this.layout.stroke([{}].concat(this.options.items))
+    },

+    update: function (opt) {
+        return this.layout.update(opt);
    },

    addItem: function () {
@ -141,7 +145,7 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    populate: function (items) {
-        this.layout.populate(items);
+        this.layout.populate([{}].concat(items));
    }
 });
 BI.shortcut("bi.absolute_right_vertical_adapt", BI.AbsoluteRightVerticalAdaptLayout);
--- a/src/core/wrapper/layout/adapt/absolute.vertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.vertical.js
@ -42,7 +42,11 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("absolute_vertical_adapt布局不需要resize");
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/adapt/adapt.center.js
+++ b/src/core/wrapper/layout/adapt/adapt.center.js
@ -43,7 +43,11 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("center_adapt布局不需要resize");
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
@ -76,7 +76,18 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("left_right_vertical_adapt布局不需要resize");
+        this.left.stroke(this.options.items.left);
+        this.right.stroke(this.options.items.right);
+    },
+
+    update: function (opt) {
+        this.left.update({
+            items: opt.items.left
+        });
+        this.right.update({
+            items: opt.items.right
+        });
+        return true;
    },

    addItem: function () {
@ -129,7 +140,11 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("left_vertical_adapt布局不需要resize");
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    addItem: function () {
@ -181,7 +196,11 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
+        this.layout.resize();
+    },

+    update: function (opt) {
+        return this.layout.update(opt);
    },

    addItem: function () {
--- a/src/core/wrapper/layout/adapt/adapt.table.js
+++ b/src/core/wrapper/layout/adapt/adapt.table.js
@ -100,10 +100,6 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
        this.element.append(this.$table);
    },

-    resize: function () {
-        // console.log("center_adapt布局不需要resize");
-    },
-
    populate: function (items) {
        BI.TableAdaptLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/adapt/adapt.vertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.vertical.js
@ -43,7 +43,11 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("vertical_adapt布局不需要resize");
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/adapt/auto.horizontal.js
+++ b/src/core/wrapper/layout/adapt/auto.horizontal.js
@ -32,10 +32,6 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        // console.log("horizontal_adapt布局不需要resize");
-    },
-
    populate: function (items) {
        BI.HorizontalAutoLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/adapt/inline.center.js
+++ b/src/core/wrapper/layout/adapt/inline.center.js
@ -44,6 +44,14 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
        };
    },

+    resize: function () {
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
+    },
+
    populate: function (items) {
        this.layout.populate.apply(this.layout, arguments);
    }
--- a/src/core/wrapper/layout/adapt/inline.horizontal.js
+++ b/src/core/wrapper/layout/adapt/inline.horizontal.js
@ -44,6 +44,14 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
        };
    },

+    resize: function () {
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
+    },
+
    populate: function (items) {
        this.layout.populate.apply(this.layout, arguments);
    }
--- a/src/core/wrapper/layout/adapt/inline.vertical.js
+++ b/src/core/wrapper/layout/adapt/inline.vertical.js
@ -44,6 +44,14 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
        };
    },

+    resize: function () {
+        this.layout.resize();
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
+    },
+
    populate: function (items) {
        this.layout.populate.apply(this.layout, arguments);
    }
--- a/src/core/wrapper/layout/fill/float.fill.horizontal.js
+++ b/src/core/wrapper/layout/fill/float.fill.horizontal.js
@ -123,6 +123,10 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
        });
    },

+    update: function (opt) {
+        return this.forceUpdate(opt);
+    },
+
    populate: function (items) {
        BI.FloatHorizontalFillLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/flex/flex.center.js
+++ b/src/core/wrapper/layout/flex/flex.center.js
@ -24,7 +24,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
        return {
            type: "bi.flex_horizontal",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            horizontalAlign: o.horizontalAlign,
            verticalAlign: o.verticalAlign,
@ -42,15 +42,15 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("flex_center_adapt布局不需要resize");
+        this.layout.resize();
    },

    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate(items);
+        this.layout.populate(items);
    }
 });
 BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);
--- a/src/core/wrapper/layout/flex/flex.horizontal.center.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.center.js
@ -25,7 +25,7 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
        return {
            type: "bi.flex_vertical",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            horizontalAlign: o.horizontalAlign,
            verticalAlign: o.verticalAlign,
@ -43,15 +43,15 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("flex_vertical_center_adapt布局不需要resize");
+        this.layout.resize();
    },

    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate(items);
+        this.layout.populate(items);
    }
 });
 BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@ -78,10 +78,6 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        // console.log("flex_horizontal布局不需要resize");
-    },
-
    populate: function (items) {
        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
@ -72,7 +72,11 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("left_right_vertical_adapt布局不需要resize");
+        this.layout.stroke(this._formatItems());
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    addItem: function () {
--- a/src/core/wrapper/layout/flex/flex.vertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.center.js
@ -26,7 +26,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
        return {
            type: "bi.flex_horizontal",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            verticalAlign: o.verticalAlign,
            horizontalAlign: o.horizontalAlign,
@ -44,15 +44,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("flex_vertical_center_adapt布局不需要resize");
+        this.layout.resize();
    },

    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate(items);
+        this.layout.populate(items);
    }
 });
 BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@ -77,10 +77,6 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        // console.log("flex_vertical布局不需要resize");
-    },
-
    populate: function (items) {
        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
@ -27,7 +27,7 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
        return {
            type: "bi.flex_scrollable_horizontal",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            horizontalAlign: o.horizontalAlign,
            verticalAlign: o.verticalAlign,
@ -44,12 +44,16 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
        };
    },

+    resize: function () {
+        this.layout.resize();
+    },
+
    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate(items);
+        this.layout.populate(items);
    }
 });
 BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout);
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
@ -27,7 +27,7 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
        return {
            type: "bi.flex_scrollable_vertical",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            horizontalAlign: o.horizontalAlign,
            verticalAlign: o.verticalAlign,
@ -44,12 +44,16 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
        };
    },

+    resize: function () {
+        this.layout.resize();
+    },
+
    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate(items);
+        this.layout.populate(items);
    }
 });
 BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@ -84,10 +84,6 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
        return this.$wrapper;
    },

-    resize: function () {
-        // console.log("flex_wrapper_horizontal布局不需要resize");
-    },
-
    populate: function (items) {
        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
@ -27,7 +27,7 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
        return {
            type: "bi.flex_scrollable_horizontal",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            verticalAlign: o.verticalAlign,
            horizontalAlign: o.horizontalAlign,
@ -44,12 +44,16 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
        };
    },

+    resize: function () {
+        this.layout.resize();
+    },
+
    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate(items);
+        this.layout.populate(items);
    }
 });
 BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@ -84,10 +84,6 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
        return this.$wrapper;
    },

-    resize: function () {
-        // console.log("flex_wrapper_vertical布局不需要resize");
-    },
-
    populate: function (items) {
        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/float/float.absolute.center.js
+++ b/src/core/wrapper/layout/float/float.absolute.center.js
@ -24,10 +24,6 @@ BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        // console.log("float_absolute_center_adapt布局不需要resize");
-    },
-
    populate: function (items) {
        BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/float/float.absolute.horizontal.js
+++ b/src/core/wrapper/layout/float/float.absolute.horizontal.js
@ -57,11 +57,15 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("float_absolute_horizontal_adapt布局不需要resize");
+        this.layout.stroke(this._formatItems(this.options.items));
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+        this.layout.populate(this._formatItems(items));
    }
 });
 BI.shortcut("bi.absolute_horizontal_float", BI.FloatAbsoluteHorizontalLayout);
--- a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
+++ b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
@ -97,7 +97,11 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("absolute_left_right_vertical_adapt布局不需要resize");
+        this.layout.stroke(this._formatItems());
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    addItem: function () {
@ -162,7 +166,11 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
+        this.layout.stroke([{}].concat(this._formatItems(this.options.items)));
+    },

+    update: function (opt) {
+        return this.layout.update(opt);
    },

    addItem: function () {
@ -171,7 +179,7 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
    },

    populate: function (items) {
-        this.layout.populate(items);
+        this.layout.populate([{}].concat(this._formatItems(items)));
    }
 });
 BI.shortcut("bi.absolute_right_vertical_float", BI.FloatAbsoluteRightVerticalAdaptLayout);
--- a/src/core/wrapper/layout/float/float.absolute.vertical.js
+++ b/src/core/wrapper/layout/float/float.absolute.vertical.js
@ -57,11 +57,15 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
    },

    resize: function () {
-        // console.log("float_absolute_vertical_adapt布局不需要resize");
+        this.layout.stroke(this._formatItems(this.options.items));
+    },
+
+    update: function (opt) {
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.layout.populate.apply(this, arguments);
+        this.layout.populate(this._formatItems(items));
    }
 });
 BI.shortcut("bi.absolute_vertical_float", BI.FloatAbsoluteVerticalLayout);
--- a/src/core/wrapper/layout/layout.absolute.js
+++ b/src/core/wrapper/layout/layout.absolute.js
@ -81,10 +81,6 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    populate: function (items) {
        BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/layout.adaptive.js
+++ b/src/core/wrapper/layout/layout.adaptive.js
@ -51,10 +51,6 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    populate: function (items) {
        BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/layout.border.js
+++ b/src/core/wrapper/layout/layout.border.js
@ -16,10 +16,6 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
        this.populate(this.options.items);
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    addItem: function (item) {
        // do nothing
        throw new Error("不能添加子组件");
@ -131,6 +127,7 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
    },

    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/layout.card.js
+++ b/src/core/wrapper/layout/layout.card.js
@ -19,10 +19,6 @@ BI.CardLayout = BI.inherit(BI.Layout, {
        this.populate(this.options.items);
    },

-    resize: function () {
-        // console.log("default布局不需要resize");
-    },
-
    stroke: function (items) {
        var self = this, o = this.options;
        this.showIndex = void 0;
@ -48,7 +44,12 @@ BI.CardLayout = BI.inherit(BI.Layout, {
        });
    },

-    update: function () {
+    resize: function () {
+        // console.log("Card布局不需要resize");
+    },
+
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    empty: function () {
--- a/src/core/wrapper/layout/layout.default.js
+++ b/src/core/wrapper/layout/layout.default.js
@ -27,10 +27,6 @@ BI.DefaultLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        // console.log("default布局不需要resize")
-    },
-
    populate: function (items) {
        BI.DefaultLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/layout.division.js
+++ b/src/core/wrapper/layout/layout.division.js
@ -11,29 +11,6 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
            columns: null,
            rows: null,
            items: []
-            //    [
-            //    {
-            //        column: 0,
-            //        row: 0,
-            //        width: 0.25,
-            //        height: 0.33,
-            //        el: {type: 'bi.button', text: 'button1'}
-            //    },
-            //    {
-            //        column: 1,
-            //        row: 1,
-            //        width: 0.25,
-            //        height: 0.33,
-            //        el: {type: 'bi.button', text: 'button2'}
-            //    },
-            //    {
-            //        column: 3,
-            //        row: 2,
-            //        width: 0.25,
-            //        height: 0.33,
-            //        el: {type: 'bi.button', text: 'button3'}
-            //    }
-            // ]
        });
    },
    render: function () {
@ -41,10 +18,6 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
        this.populate(this.options.items);
    },

-    resize: function () {
-        this.stroke(this.opitons.items);
-    },
-
    addItem: function (item) {
        // do nothing
        throw new Error("不能添加子组件");
@ -151,7 +124,8 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
        }
    },

-    update: function () {
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@ -64,10 +64,6 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    populate: function (items) {
        BI.FloatLeftLayout.superclass.populate.apply(this, arguments);
        this._mount();
@ -141,10 +137,6 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    populate: function (items) {
        BI.FloatRightLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/layout.grid.js
+++ b/src/core/wrapper/layout/layout.grid.js
@ -11,23 +11,6 @@ BI.GridLayout = BI.inherit(BI.Layout, {
            columns: null,
            rows: null,
            items: []
-            /* [
-             {
-             column: 0,
-             row: 0,
-             el: {type: 'bi.button', text: 'button1'}
-             },
-             {
-             column: 1,
-             row: 1,
-             el: {type: 'bi.button', text: 'button2'}
-             },
-             {
-             column: 3,
-             row: 2,
-             el: {type: 'bi.button', text: 'button3'}
-             }
-             ]*/
        });
    },
    render: function () {
@ -35,12 +18,7 @@ BI.GridLayout = BI.inherit(BI.Layout, {
        this.populate(this.options.items);
    },

-    resize: function () {
-        // console.log("grid布局不需要resize")
-    },
-
    addItem: function () {
-        // do nothing
        throw new Error("不能添加子组件");
    },

@ -119,7 +97,12 @@ BI.GridLayout = BI.inherit(BI.Layout, {
        }
    },

-    update: function () {
+    resize: function () {
+        // console.log("grid布局不需要resize")
+    },
+
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@ -52,19 +52,28 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
        });
        w.element.addClass("i-item");
        if (columnSize === "fill" || columnSize === "") {
-            var left = o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0),
-                right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
-            for (var k = 0; k < i; k++) {
-                left += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + (o.columnSize[k] || o.items[k].width);
-            }
-            for (var k = i + 1, len = o.columnSize.length || o.items.length; k < len; k++) {
-                right += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + (o.columnSize[k] || o.items[k].width);
+            var length = o.hgap;
+            var fillCount = 0, autoCount = 0;
+            for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
+                var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
+                if (cz === "fill") {
+                    fillCount++;
+                    cz = 0;
+                } else if (cz === "" || BI.isNull(cz)) {
+                    autoCount++;
+                    cz = 0;
+                }
+                length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz;
            }
            if (columnSize === "fill") {
-                w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
+                w.element.css("min-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
            }
            if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
-                w.element.css("max-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
+                if (columnSize === "fill") {
+                    w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
+                } else {
+                    w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
+                }
            }
        }
        this._handleGap(w, item, i);
@ -76,14 +85,6 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
-    addItem: function (item) {
-        throw new Error("不能添加子组件");
-    },
-
    populate: function (items) {
        BI.InlineLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/layout.lattice.js
+++ b/src/core/wrapper/layout/layout.lattice.js
@ -31,22 +31,6 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    addItem: function (item) {
-        var w = BI.LatticeLayout.superclass.addItem.apply(this, arguments);
-        this.resize();
-        return w;
-    },
-
-    addItemAt: function (item) {
-        var w = BI.LatticeLayout.superclass.addItemAt.apply(this, arguments);
-        this.resize();
-        return w;
-    },
-
-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    populate: function (items) {
        BI.LatticeLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/layout.table.js
+++ b/src/core/wrapper/layout/layout.table.js
@ -121,14 +121,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
        // console.log("table布局不需要resize");
    },

-    addItem: function (arr) {
-        if (!BI.isArray(arr)) {
-            throw new Error("必须是数组", arr);
-        }
-        return BI.TableLayout.superclass.addItem.apply(this, arguments);
-    },
-
-    update: function () {
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/layout.tape.js
+++ b/src/core/wrapper/layout/layout.tape.js
@ -23,9 +23,6 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
        this.populate(this.options.items);
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
    addItem: function (item) {
        // do nothing
        throw new Error("不能添加子组件");
@ -122,12 +119,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
        });
    },

-    update: function () {
-        var updated;
-        BI.each(this._children, function (i, child) {
-            updated = child.update() || updated;
-        });
-        return updated;
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
@ -162,10 +155,6 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
        this.populate(this.options.items);
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    addItem: function (item) {
        // do nothing
        throw new Error("不能添加子组件");
@ -262,7 +251,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
        });
    },

-    update: function () {
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@ -176,14 +176,8 @@ BI.TdLayout = BI.inherit(BI.Layout, {
        // console.log("td布局不需要resize");
    },

-    addItem: function (arr) {
-        if (!BI.isArray(arr)) {
-            throw new Error("必须是数组", arr);
-        }
-        return BI.TdLayout.superclass.addItem.apply(this, arguments);
-    },
-
-    update: function () {
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/layout.vertical.js
+++ b/src/core/wrapper/layout/layout.vertical.js
@ -42,10 +42,6 @@ BI.VerticalLayout = BI.inherit(BI.Layout, {
        return w;
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    populate: function (items) {
        BI.VerticalLayout.superclass.populate.apply(this, arguments);
        this._mount();
--- a/src/core/wrapper/layout/layout.window.js
+++ b/src/core/wrapper/layout/layout.window.js
@ -25,10 +25,6 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
        this.populate(this.options.items);
    },

-    resize: function () {
-        this.stroke(this.options.items);
-    },
-
    addItem: function (item) {
        // do nothing
        throw new Error("不能添加子组件");
@ -171,7 +167,12 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
        }
    },

-    update: function () {
+    resize: function () {
+        // console.log("window布局不需要resize");
+    },
+
+    update: function (opt) {
+        return this.forceUpdate(opt);
    },

    populate: function (items) {
--- a/src/core/wrapper/layout/middle/middle.center.js
+++ b/src/core/wrapper/layout/middle/middle.center.js
@ -48,7 +48,7 @@ BI.CenterLayout = BI.inherit(BI.Layout, {
        return {
            type: "bi.grid",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            columns: list.length,
            rows: 1,
@ -66,11 +66,11 @@ BI.CenterLayout = BI.inherit(BI.Layout, {
    },

    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate.apply(this.wrapper, arguments);
+        this.layout.populate.apply(this.layout, arguments);
    }
 });
 BI.shortcut("bi.center", BI.CenterLayout);
--- a/src/core/wrapper/layout/middle/middle.float.center.js
+++ b/src/core/wrapper/layout/middle/middle.float.center.js
@ -49,7 +49,7 @@ BI.FloatCenterLayout = BI.inherit(BI.Layout, {
        return {
            type: "bi.left",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            items: list
        };
@ -65,11 +65,11 @@ BI.FloatCenterLayout = BI.inherit(BI.Layout, {
    },

    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate.apply(this.wrapper, arguments);
+        this.layout.populate.apply(this.layout, arguments);
    }
 });
 BI.shortcut("bi.float_center", BI.FloatCenterLayout);
--- a/src/core/wrapper/layout/middle/middle.horizontal.js
+++ b/src/core/wrapper/layout/middle/middle.horizontal.js
@ -46,7 +46,7 @@ BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
        return {
            type: "bi.grid",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            columns: list.length,
            rows: 1,
@ -64,11 +64,11 @@ BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
    },

    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate.apply(this.wrapper, arguments);
+        this.layout.populate.apply(this.layout, arguments);
    }
 });
 BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout);
--- a/src/core/wrapper/layout/middle/middle.vertical.js
+++ b/src/core/wrapper/layout/middle/middle.vertical.js
@ -47,7 +47,7 @@ BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
        return {
            type: "bi.grid",
            ref: function (_ref) {
-                self.wrapper = _ref;
+                self.layout = _ref;
            },
            columns: 1,
            rows: list.length,
@ -65,11 +65,11 @@ BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
    },

    update: function (opt) {
-        return this.wrapper.update(opt);
+        return this.layout.update(opt);
    },

    populate: function (items) {
-        this.wrapper.populate.apply(this.wrapper, arguments);
+        this.layout.populate.apply(this.layout, arguments);
    }
 });
 BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout);