test ItemFilereadstore

by syafid

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<table dojoType="dojox.grid.DataGrid" id="gridDiv" rowPerPage="5" rowSelector="20px" style="height:300px;width:900px">
<thead>
 <tr>
   <th field="Id0">ID0</th>
   <th field="Id1">ID1</th>
   <th field="Id2">ID2</th>
   <th field="Id3">ID3</th>
   <th field="Id4">ID4</th>
 </tr>
</thead>
</table>

CSS

#gridDiv {
  height: 20em;
}

JavaScript

require([
  "dojo/_base/lang",
  "dojo/data/ItemFileWriteStore",
  "dojox/grid/DataGrid",
  "dojo/domReady!"
], function(lang, ItemFileWriteStore, DataGrid, dom) {

  var data = {
    identifier: "id",
    items: []
  };

  var data_list = [{
      col1: "normal",
      col2: false,
      col3: 'But are not followed by two hexadecimal',
      col4: 29.91
    },
    {
      col1: "important",
      col2: false,
      col3: 'Because a % sign always indicates',
      col4: 9.33
    },
    {
      col1: "important",
      col2: false,
      col3: 'Signs can be selectively',
      col4: 19.34
    }
  ];
  var rows = 60;
  for (var i = 0, l = data_list.length; i < rows; i++) {
    data.items.push(lang.mixin({
      id: i + 1
    }, data_list[i % l]));
  }
  var store = new ItemFileWriteStore({
    data: data
  });

  /*set up layout*/
  var layout = [
    [{
        'name': 'Column 1',
        'field': 'id',
        'width': '100px'
      },
      {
        'name': 'Column 2',
        'field': 'col2',
        'width': '100px'
      },
      {
        'name': 'Column 3',
        'field': 'col3',
        'width': '200px'
      },
      {
        'name': 'Column 4',
        'field': 'col4',
        'width': '150px'
      }
    ]
  ];

  /*create a new grid*/
  var grid = new DataGrid({
    id: 'grid',
    store: store,
    structure: layout,
    rowSelector: '20px'
  });

  /*append the new grid to the div*/
  grid.placeAt("gridDiv");

  /*Call startup() to render the grid*/
  grid.startup();
});