0

dojox.mvc を使用して、dgrid を dojo のフォームにバインドしたいと考えています。単一のモデルをフォームにバインドする方法に関するサンプルは多数ありますが、グリッドでこれを行う方法を示すものはありません。グリッドは同じストアをフォームと共有する必要があり、誰かがグリッドの行をクリックするとフォームが更新されます。私の主な問題は、使用するストアの違いです。dgrid は dojo.store オブジェクトを使用しますが、mvc は dojo.Stateful を使用します。dojo.store には「data」という名前のオブジェクトがあり、dojo.Stateful には「items」があり、データのリストが保持されます。どんな助けでも大歓迎です。

4

1 に答える 1

0

私は 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>
于 2013-01-30T08:36:00.440 に答える