title: Creating grid using gridx of dojo
body: <p>I have tried following example for creating grid using gridx of dojo by including all the src from online.
  But it shows Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience and multipleDefine error</p>
  
  <pre><code>&lt;script
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"&gt;&lt;/script&gt;
  &lt;script
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dom.js"&gt;&lt;/script&gt;
  &lt;script
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/store/Memory.js"&gt;&lt;/script&gt;
  &lt;script
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/form/Button.js"&gt;&lt;/script&gt;
  &lt;script
  src="http://cdn.rawgit.com/oria/gridx/1.3/core/model/cache/Sync.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.rawgit.com/oria/gridx/1.3/Grid.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.rawgit.com/oria/gridx/1.3/modules/CellWidget.js"&gt;&lt;/script&gt;
  &lt;script
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/domReady.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var grid;
  var store;
  dojo.addOnLoad(function(dom, Memory, Button, Cache, Grid) {
      name: 'gridx', store = new Memory({
          data : [ {
              id : 1,
              feedname : 'Feed4',
              startstop : 0,
              pause : '',
              config : ''
          }, {
              id : 2,
              feedname : 'Feed5',
              startstop : 0,
              pause : '',
              config : ''
          } ]
      });
  
  var cacheClass = "gridx/core/model/cache/Sync";
  
  var structure = [
      {
          id : 'feedname',
          field : 'feedname',
          name : 'Feed Name',
          width : '110px'
      },
      {
          id : 'startstop',
          field : 'startstop',
          name : 'Start/Stop',
          width : '61px',
          widgetsInCell : true,
          navigable : true,
          allowEventBubble : true,
          decorator : function() {
              //Generate cell widget template string
              return [
                      '&lt;div style="text-align: center"&gt;&lt;button data-dojo-type="dijit.form.Button" ',
                      'onClick="onStartStopButtonClick();" ',
                      'data-dojo-attach-point="btn" ',
                      'class="startStopButtonPlay" ',
                      'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
                      '&gt;&lt;/button&gt;&lt;/div&gt;' ].join('');
          }
      },
      {
          id : 'pause',
          field : 'pause',
          name : 'Pause',
          width : '61px',
          widgetsInCell : true,
          navigable : true,
          allowEventBubble : true,
          decorator : function() {
              //Generate cell widget template string
              return [
                      '&lt;div style="text-align: center"&gt;&lt;button data-dojo-type="dijit/form/Button" ',
                      'onClick="onPauseButtonClick();" ',
                      'data-dojo-attach-point="btn2" ',
                      'class="pauseButton" ',
                      'data-dojo-props="iconClass:\'pauseIcon\'" ',
                      '&gt;&lt;/button&gt;&lt;/div&gt;' ].join('');
          }
      },
      {
          id : 'config',
          field : 'config',
          name : 'Config',
          width : '61px',
          widgetsInCell : true,
          navigable : true,
          allowEventBubble : true,
          decorator : function() {
              //Generate cell widget template string
              return [
                      '&lt;div style="text-align: center"&gt;&lt;button data-dojo-type="dijit/form/Button" ',
                      'onClick="onConfigButtonClick();" ',
                      'data-dojo-attach-point="btn3" ',
                      'class="configButton" ',
                      'data-dojo-props="iconClass:\'configIcon\'" ',
                      '&gt;&lt;/button&gt;&lt;/div&gt;' ].join('');
          }
      } ];
  
  //Create grid widget.
  grid = Grid({
      id : 'grid',
      cacheClass : Cache,
      store : store,
      structure : structure,
      //autoHeight: true,
      columnWidthAutoResize : false
  });
  
  //Put it into the DOM tree.
  grid.placeAt('compactWidgetGrid');
  //Start it up.
  grid.startup();
  
  // TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
  updateGridXData(Memory, store);
  }); 
  
  function createDataStore(Memory, store) {
      currentGridXData = new Memory({
          // TODO: Replace data here with actual feed data received from server! 
          data : [ {
              id : 1,
              feedname : 'testingThis1',
              startstop : 0,
              pause : '',
              config : ''
          }, {
              id : 2,
              feedname : 'testingThis2',
              startstop : 0,
              pause : '',
              config : ''
          }, {
              id : 3,
              feedname : 'testingThis3',
              startstop : 0,
              pause : '',
              config : ''
          }, {
              id : 4,
              feedname : 'testingThis4',
              startstop : 0,
              pause : '',
              config : ''
          }, {
              id : 5,
              feedname : 'testingThis5',
              startstop : 0,
              pause : '',
              config : ''
          }, {
              id : 6,
              feedname : 'testingThis6',
              startstop : 0,
              pause : '',
              config : ''
          }, {
              id : 7,
              feedname : 'testingThis7',
              startstop : 0,
              pause : '',
              config : ''
          } ]
      });
  
      return currentGridXData;
  }
  function updateGridXData(Memory, store) {
  
      grid.model.clearCache();
  
      var appFeedsStore;
  
      // Create new data store for GridX
  
      //This line was giving a JavaScript error because appFeedListJSON undefined.
      //Commnent out and uncomment other line to see difference.
      appFeedsStore = createDataStore(Memory, store);
      //appFeedsStore = createDataStore(Memory, store);
  
      grid.setStore(appFeedsStore);
  
      grid.model.store.setData(appFeedsStore);
  
      //    grid.refresh();
  
      grid.body.refresh();
  
  }
  
  var toggled = false;
  function toggle() {
      myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon"
              : "startStopButtonStopIcon");
      toggled = !toggled;
  }
  function onPauseButtonClick() {
      alert("Pause!");
  }
  
  function onConfigButtonClick() {
      alert("Config!");
  }
  
  // onClick functions for the app three buttons: Start/Stop, Pause, Config
  
  function onStartStopButtonClick() {
  
      alert("onStartStopButtonClick!");
  }
  
  function onPauseButtonClick() {
  
      alert("onPauseButtonClick!");
  }
  
  function onConfigButtonClick() {
      alert("onConfigButtonClick!");
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="claro"&gt;
  &lt;div id="compactWidgetGrid"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I am trying this out using Tomcat server but not able to get the grid.
  Could you please help me with this?</p>