使用 dojox.mvc 将 dojo dgrid 绑定到表单答案

【问题标题】：Bind dojo dgrid to form with dojox.mvc使用 dojox.mvc 将 dojo dgrid 绑定到表单
【发布时间】：2012-07-05 22:58:52
【问题描述】：

我想使用 dojox.mvc 将 dgrid 绑定到 dojo 中的表单。虽然有很多关于如何将单个模型绑定到表单的示例，但没有任何内容显示如何使用网格来执行此操作。网格必须与表单共享同一个存储，当有人单击网格中的一行时，表单将被更新。我的主要问题是他们使用的存储不同：dgrid 使用 dojo.store 对象，而 mvc 使用 dojo.Stateful。 dojo.store 有一个名为“data”的对象，它保存数据列表，而 dojo.Stateful 有“items”。欢迎任何帮助。

【问题讨论】：

标签： dojo dgrid

【解决方案1】：

虽然我不是 dgrid 的专家，但我认为将 dgrid 的选择与 dojo/Stateful 连接起来会有所帮助。如下所示（dgrid 应与 dojo/dijit/dojox 位于同一目录中，并且 /path/to/dojotoolkit 应替换为放置 dojo/dijit/dojox/dgrid 的目录）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test dgrid and dojox/mvc</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link id="themeStyles" rel="stylesheet" href="/path/to/dojotoolkit/dijit/themes/claro/claro.css"/>
        <style type="text/css">
            @import "/path/to/dojotoolkit/dojo/resources/dojo.css";
            h2 {
                margin: 12px;
            }
            .heading {
                font-weight: bold;
                padding-bottom: 0.25em;
            }
            .ui-widget{
                margin: 10px;
            }
        </style>
        <script type="text/javascript" src="/path/to/dojotoolkit/dojo/dojo.js" 
            data-dojo-config="async: true, mvc: {debugBindings: 1}"></script>
        <script type="text/javascript">
            require([
                "dojo/_base/declare",
                "dojo/_base/Color",
                "dojo/parser",
                "dojo/when",
                "dojo/Stateful",
                "dgrid/List",
                "dgrid/OnDemandGrid",
                "dgrid/Selection",
                "dgrid/test/data/base",
                "dojo/domReady!"
            ], function(declare, Color, parser, when, Stateful, List, Grid, Selection){
                when(parser.parse(), function(){
                    var undef,
                        columns = {
                            col1: "Name",
                            col5: "Red",
                            col6: "Green",
                            col7: "Blue"
                        },
                        grid = new (declare([Grid, Selection]))({
                            store: smallColorStore,
                            columns: columns
                        }, "grid"),
                        Model = declare(Stateful, {
                            _colorGetter: function(){
                                return this.col5 === undef || this.col6 === undef || this.col7 === undef ? "" : new Color([this.col5, this.col6, this.col7]).toHex();
                            },
                            _colorSetter: function(value){
                                if(value){
                                    var rgb = new Color(value).toRgb();
                                    this.col5 = rgb[0];
                                    this.col6 = rgb[1];
                                    this.col7 = rgb[2];
                                }
                                return value;
                            }
                        });
                    grid.on("dgrid-select", function(event){
                        if((ctrl.model || {}).id !== undef && ctrl.model.id != event.rows[0].id){
                            save();
                        }
                        ctrl.set("model", new Model(event.rows[0].data));
                    });
                    grid.on("dgrid-deselect", function(event){
                        if((ctrl.model || {}).id !== undef && ctrl.model.id == event.rows[0].id){
                            save();
                            ctrl.set("model", new Model({col1: ""}));
                        }
                    });
                    function save(){
                        var model = ctrl.model;
                        if(model.id){
                            for(var s in columns){
                                grid.updateDirty(model.id, s, model[s]);
                            }
                        }
                        grid.save();
                    }
                    handleSaveButton = function(){
                        save();
                        grid.select(model.id);
                    };
                });
            });
        </script>
    </head>
    <body class="claro">
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <h2>A basic grid with dojox/mvc</h2>
        <div id="grid"></div>
        <span data-dojo-id="ctrl"
         data-dojo-type="dojox/mvc/ModelRefController"></span>
        <div style="padding:10px;"
         data-dojo-type="dojox/mvc/Group"
         data-dojo-props="target: at(ctrl, 'model')">
            <label for="name">Name</label>
            <input id="name" type="text"
             data-dojo-type="dijit/form/TextBox"
             data-dojo-props="value: at('rel:', 'col1')">
            <div data-dojo-type="dijit/ColorPalette"
             data-dojo-props="value: at('rel:', 'color'), palette: '7x10'"></div>
        </div>
        <input type="button" style="margin:10px;"
         data-dojo-type="dijit/form/Button"
         data-dojo-props="label: 'Save', onClick: function(){ handleSaveButton(); }">
    </body>
</html>

【讨论】：