Pull request #2192: 无JIRA任务支持自动watch columnSize

Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit '51491fb094d1dcb8e6e821323d05d8a696343a55': 支持自动watch 支持自动watch
3 years ago · da1668e483
4 changed files with 120 additions and 12 deletions
--- a/examples/dev.html
+++ b/examples/dev.html
@ -12,7 +12,7 @@
    var Model = BI.inherit(Fix.Model, {
        state: function () {
            return {
-                count: 0
+                columnSize: [200, "fill"]
            };
        }
    });
@ -20,6 +20,10 @@
    BI.model("demo.model", Model);

    var Widget = BI.inherit(BI.Widget, {
+        props: {
+            height: 200,
+            width: 600
+        },
        _store: function () {
            return BI.Models.getModel("demo.model");
        },
@ -27,16 +31,28 @@
            var store = BI.useStore();
            return function () {
                return {
-                    type: "bi.vertical",
+                    type: "bi.htape",
+                    columnSize: function () {
+                        return store.model.columnSize;
+                    },
                    items: [{
-                        type: "bi.button",
-                        effect: function () {
-                            this.setText(store.model.count)
+                        type: "bi.label",
+                        css: {
+                            background: "#eee"
+                        }
+                    }, {
+                        type: "bi.center_adapt",
+                        css: {
+                            background: "#e0e0e0"
                        },
+                        items: [{
+                            type: "bi.button",
+                            text: "点击",
                            handler: function () {
-                            store.model.count++;
+                                store.model.columnSize = [300, "fill"]
                            }
                        }]
+                    }]
                };
            };
        }
--- a/examples/resize.html
+++ b/examples/resize.html
@ -0,0 +1,73 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
+    <script src="../dist/2.0/fineui.js"></script>
+</head>
+<body>
+<div id="wrapper"></div>
+<script>
+    var Model = BI.inherit(Fix.Model, {
+        state: function () {
+            return {
+                columnSize: [200, "fill"]
+            };
+        }
+    });
+
+    BI.model("demo.model", Model);
+
+    var Widget = BI.inherit(BI.Widget, {
+        props: {
+            height: 200,
+            width: 600
+        },
+        _store: function () {
+            return BI.Models.getModel("demo.model");
+        },
+        setup: function () {
+            var store = BI.useStore();
+            return function () {
+                return {
+                    type: "bi.htape",
+                    columnSize: function () {
+                        return store.model.columnSize;
+                    },
+                    items: [{
+                        type: "bi.label",
+                        css: {
+                            background: "#eee"
+                        }
+                    }, {
+                        type: "bi.center_adapt",
+                        css: {
+                            background: "#e0e0e0"
+                        },
+                        items: [{
+                            type: "bi.button",
+                            text: "点击",
+                            handler: function () {
+                                store.model.columnSize = [300, "fill"]
+                            }
+                        }]
+                    }]
+                };
+            };
+        }
+    });
+    BI.shortcut("demo.hooks", Widget);
+    BI.createWidget({
+        type: "bi.absolute",
+        items: [{
+            el: {
+                type: "demo.hooks"
+            },
+            top: 100,
+            left: 100
+        }],
+        element: "#wrapper"
+    });
+</script>
+</body>
+</html>
--- a/src/core/4.widget.js
+++ b/src/core/4.widget.js
@ -163,7 +163,7 @@
            }
            if (o.cls) {
                if (BI.isFunction(o.cls)) {
-                    var cls = this.__watch(o.cls, function (newValue) {
+                    var cls = this.__watch(o.cls, function (context, newValue) {
                        self.element.removeClass(cls).addClass(cls = newValue);
                    });
                    this.element.addClass(cls);
@ -182,7 +182,7 @@
            }
            if (o.css) {
                if (BI.isFunction(o.css)) {
-                    var css = this.__watch(o.css, function (newValue) {
+                    var css = this.__watch(o.css, function (context, newValue) {
                        for (var k in css) {
                            if (!newValue[k]) {
                                newValue[k] = "";
@ -205,8 +205,8 @@
                this._watchers = this._watchers || [];
                var watcher = new Fix.Watcher(null, function () {
                    return getter.call(self, self);
-                }, (handler && function () {
-                    handler.call(self, self);
+                }, (handler && function (v) {
+                    handler.call(self, self, v);
                }) || BI.emptyFn, options);
                this._watchers.push(watcher);
                return watcher.value;
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -19,8 +19,27 @@ BI.Layout = BI.inherit(BI.Widget, {
    },

    render: function () {
+        var self = this, o = this.options;
        this._init4Margin();
        this._init4Scroll();
+        if (BI.isFunction(o.columnSize)) {
+            var columnSizeFn = o.columnSize;
+            o.columnSize = this.__watch(columnSizeFn, function (context, newValue) {
+                o.columnSize = newValue;
+                self.resize();
+            }, {
+                deep: true
+            });
+        }
+        if (BI.isFunction(o.rowSize)) {
+            var rowSizeFn = o.rowSize;
+            o.rowSize = this.__watch(rowSizeFn, function (context, newValue) {
+                o.rowSize = newValue;
+                self.resize();
+            }, {
+                deep: true
+            });
+        }
    },

    _init4Margin: function () {