2014-09-10 62 views
1

如何使用格式化程序将dojo ComboBox添加到我的DataGrid?我从我一直在阅读的想法认为,我应该能够添加一个dojo ComboBox到我的DataGridformatter就像我用我的dojo CheckBox(和我创建的另一个html页面上的dojo Button)完成的。我无法找到一个很好的例子。我正在使用Dojo 1.10.0。如何使用格式化程序将dojo组合框添加到我的DataGrid?

这里是我现有的代码不加载,因为什么是错的我formatterCombobox格式:

<!DOCTYPE html> 
<html > 
<head> 
<title>Test Widget</title> 
    <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" /> 
    <link rel="stylesheet" type="text/css" href="css/dojomod.css" /> 
    <link rel="stylesheet" href="dojo-release-1.10.0/dojo/resources/dojo.css" /> 
    <link rel="stylesheet" href="dojo-release-1.10.0/dojox/grid/resources/claroGrid.css" /> 
    <script>dojoConfig = {async: true, parseOnLoad: false}</script> 
    <script src="dojo-release-1.10.0/dojo/dojo.js"></script> 

    <script> 
require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dijit/form/CheckBox', 'dojo/domReady!'], 
    function(DataGrid, ItemFileReadStore, CheckBox){ 
     function formatter(){ 
      var w = new CheckBox({ 
       label: "Use Input", 
       onClick: function() { 
        alert("CheckBox - Checked! (or unchecked!)"); 
       } 
      }); 
      w._destroyOnRemove=true; 
      return w; 

     function formatterCombobox(){ 
      var combobox = new ComboBox({ 
       label: "Combo", 
       onClick: function() { 
        alert("CheckBox - Checked! (or unchecked!)"); 
       } 
      }); 
      combobox._destroyOnRemove=true; 
      return combobox; 
     } 

     } 
     var layout = [ 
      {name: 'Feed', field: 'feed'}, 
      {name: 'Mission', field: 'mission', width: 6.5, 
       styles: 'text-align: center; height: 21px;'}, 
      {name: 'Mission Override', field: 'missionoverride', width: 6.5, 
       formatter: formatter, /*Custom format, add a CheckBox. */ 
       styles: 'text-align: center;' 
      }, 
      {name: 'OpMode', field: 'opmode', width: 6.5, 
       styles: 'text-align: center; height: 21px;'}, 
      {name: 'OpMode Override', field: 'opmodeoverride', width: 6.5, 
       formatter: formatter, /*Custom format, add a CheckBox. */ 
       styles: 'text-align: center; height: 21px;' 
      }, 
      {name: 'Platform', field: 'platform', width: 6.5, 
       styles: 'text-align: center; height: 21px;'}, 
      {name: 'Tail Number', field: 'tailnumber', width: 6.5, 
       styles: 'text-align: center; height: 21px;' 
      }, 
      {name: 'Producer Org', field: 'producerorg', width: 6.5, 
       styles: 'text-align: center; height: 21px;' 
      }, 
     ]; 
     var store = new ItemFileReadStore({ 
      data: { 
       identifier: "feed", 
       items: [ 
        {feed: '1. feed1', mission: 'mission1', override: '', mode: '', override: '', platform: '', number: '236', org: 'SA'}, 
        {feed: '2. feed2', mission: 'mission2', override: '', mode: '', override: '', platform: '', number: '980', org: 'SA'}, 
        {feed: '3. feed3', mission: 'mission3', override: '', mode: '', override: '', platform: '', number: '731', org: 'SA'}, 
        {feed: '4. feed4', mission: 'mission4', override: '', mode: '', override: '', platform: '', number: '415', org: 'SA'}, 
        {feed: '5. feed5', mission: 'mission5', override: '', mode: '', override: '', platform: '', number: '899', org: 'SA'}, 
       ] 
      } 
     }); 

     require([ 
       "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!" 
      ], function(Memory, ComboBox){ 
       var stateStore = new Memory({ 
        data: [ 
         {name:"Alabama", id:"AL"}, 
         {name:"Alaska", id:"AK"}, 
         {name:"American Samoa", id:"AS"}, 
         {name:"Arizona", id:"AZ"}, 
         {name:"Arkansas", id:"AR"}, 
         {name:"Armed Forces Europe", id:"AE"}, 
         {name:"Armed Forces Pacific", id:"AP"}, 
         {name:"Armed Forces the Americas", id:"AA"}, 
         {name:"California", id:"CA"}, 
         {name:"Colorado", id:"CO"}, 
         {name:"Connecticut", id:"CT"}, 
         {name:"Delaware", id:"DE"} 
        ] 
       }); 

       var comboBox = new ComboBox({ 
        id: "stateSelect", 
        name: "state", 
        value: "California", 
        store: stateStore, 
        searchAttr: "name" 
       }, "stateSelect").startup(); 
      }); 

     var grid = new DataGrid({ 
      id: 'grid', 
      store: store, 
      structure: layout, 
      autoWidth: true, 
      autoHeight: true 
     }); 
     grid.placeAt('gridContainer'); 
     grid.startup(); 
    }); 
    </script> 
</head> 
<body class="claro"> 
    <div id="gridContainer" style="width: 100%; height: 200px;"></div> 
</body> 
</html> 

回答

2
<script> 

     require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dijit/form/CheckBox', "dijit/form/ComboBox", 'dojo/domReady!'], 
       function (DataGrid, ItemFileReadStore, CheckBox, ComboBox) { 
        function formatter() { 
         var w = new CheckBox({ 
          label: "Use Input", 
          onClick: function() { 
           alert("CheckBox - Checked! (or unchecked!)"); 
          } 
         }); 
         w._destroyOnRemove = true; 
         return w; 

        } 

        function formatterCombobox() { 
         var combobox = new ComboBox({ 
          label: "Combo", 
          onClick: function() { 
           alert("CheckBox - Checked! (or unchecked!)"); 
          } 
         }); 
         combobox._destroyOnRemove = true; 
         return combobox; 
        } 

        var layout = [ 
         {name: 'Feed', field: 'feed'}, 
         {name: 'Mission', field: 'mission', width: 6.5, 
          styles: 'text-align: center; height: 21px;'}, 
         {name: 'Mission Override', field: 'missionoverride', width: 6.5, 
          formatter: formatter, /*Custom format, add a CheckBox. */ 
          styles: 'text-align: center;' 
         }, 
         {name: 'OpMode', field: 'opmode', width: 6.5, 
          styles: 'text-align: center; height: 21px;'}, 
         {name: 'OpMode Override', field: 'opmodeoverride', width: 6.5, 
          formatter: formatter, /*Custom format, add a CheckBox. */ 
          styles: 'text-align: center; height: 21px;' 
         }, 
         {name: 'Platform', field: 'platform', width: 6.5, 
          formatter: formatterCombobox, 
          styles: 'text-align: center; height: 21px;'}, 
         {name: 'Tail Number', field: 'tailnumber', width: 6.5, 
          styles: 'text-align: center; height: 21px;' 
         }, 
         {name: 'Producer Org', field: 'producerorg', width: 6.5, 
          formatter: formatterCombobox, 
          styles: 'text-align: center; height: 21px;' 
         }, 
        ]; 
        var store = new ItemFileReadStore({ 
         data: { 
          identifier: "feed", 
          items: [ 
           {feed: '1. feed1', mission: 'mission1', override: '', mode: '', override: '', platform: '', number: '236', org: 'SA'}, 
           {feed: '2. feed2', mission: 'mission2', override: '', mode: '', override: '', platform: '', number: '980', org: 'SA'}, 
           {feed: '3. feed3', mission: 'mission3', override: '', mode: '', override: '', platform: '', number: '731', org: 'SA'}, 
           {feed: '4. feed4', mission: 'mission4', override: '', mode: '', override: '', platform: '', number: '415', org: 'SA'}, 
           {feed: '5. feed5', mission: 'mission5', override: '', mode: '', override: '', platform: '', number: '899', org: 'SA'}, 
          ] 
         } 
        }); 

        require([ 
         "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!" 
        ], function (Memory, ComboBox) { 
         var stateStore = new Memory({ 
          data: [ 
           {name: "Alabama", id: "AL"}, 
           {name: "Alaska", id: "AK"}, 
           {name: "American Samoa", id: "AS"}, 
           {name: "Arizona", id: "AZ"}, 
           {name: "Arkansas", id: "AR"}, 
           {name: "Armed Forces Europe", id: "AE"}, 
           {name: "Armed Forces Pacific", id: "AP"}, 
           {name: "Armed Forces the Americas", id: "AA"}, 
           {name: "California", id: "CA"}, 
           {name: "Colorado", id: "CO"}, 
           {name: "Connecticut", id: "CT"}, 
           {name: "Delaware", id: "DE"} 
          ] 
         }); 

         var comboBox = new ComboBox({ 
          id: "stateSelect", 
          name: "state", 
          value: "California", 
          store: stateStore, 
          searchAttr: "name" 
         }, "stateSelect").startup(); 
        }); 

        var grid = new DataGrid({ 
         id: 'grid', 
         store: store, 
         structure: layout, 
         autoWidth: true, 
         autoHeight: true 
        }); 
        grid.placeAt('gridContainer'); 
        grid.startup(); 
       }); 
    </script> 
+2

您应该添加的这个解决方案是如何工作的描述。 :) – JasonMArcher 2014-10-15 21:43:30

+1

该解决方案修复了3个问题,首先在第一个require语句中不需要ComboBox构造函数。其次,formatterComboBox函数嵌套在格式化函数内,现在它与格式化程序处于同一范围内。最后,是formatterComboBox函数没有被分配到布局对象中相应的formatter:属性。 – 2014-10-16 14:55:05