綁定dojo dgrid以使用dojox.mvc形成

我想使用dojox.mvc將dgrid綁定到dojo中的表單。雖然有很多關於如何將單個模型綁定到表單的示例，但沒有任何內容顯示如何使用網格完成此操作。網格必須與表單共享相同的商店，並且當有人點擊網格中的一行時，表單將被更新。我的主要問題是他們使用的商店有所不同：當dgrid使用dojo.store對象時，mvc使用dojo.Stateful。 dojo.store有一個名爲'data'的對象，用於保存數據列表，而dojo.Stateful有'項目'。歡迎任何幫助。綁定dojo dgrid以使用dojox.mvc形成

來源

2012-07-05 Nick Proto

儘管我不是dgrid的專家，但我認爲橋接dgrid的選擇和dojo/Stateful會有所幫助。像下面的東西（dgrid應該是在相同的目錄中道場/的dijit/DojoX中，和/路徑/到/ dojotoolkit應與其中道場/的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-30 08:36:00 asudoh

綁定dojo dgrid以使用dojox.mvc形成

回答

相關問題