ExtJs Simple Grid

Simple Grid Example

by Tony Tubbs

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<!-- corresponding blog at http://blog.jardalu.com/2013/5/24/simple-grid-sample-extjs -->
<title>Simple Grid Sample for ExtJs</title>
<div id="editor-grid1"></div>
<div id="editor-grid2"></div>

<div id="query-results"></div>

CSS

body {
  padding: 50px 20px 0 20px;
}

JavaScript

Ext.Loader.setConfig({
  enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
  'Ext.grid.*',
  'Ext.data.*',
  'Ext.util.*',
  'Ext.state.*',
  'Ext.form.*',
  'Ext.ux.CheckColumn'
]);

Ext.onReady(function() {
  // Define our data model
  Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
      'name',
      'email', {
        name: 'start',
        type: 'date',
        dateFormat: 'n/j/Y'
      }, {
        name: 'salary',
        type: 'float'
      }, {
        name: 'active',
        type: 'bool'
      }
    ]
  });

  // Generate mock employee data
  var getMockData = function() {
    var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
      firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
      lastLen = lasts.length,
      firstLen = firsts.length,
      usedNames = {},
      data = [],
      s = new Date(2007, 0, 1),
      now = new Date(),

      getRandomInt = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },

      generateName = function() {
        var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
        if (usedNames[name]) {
          return generateName();
        }
        usedNames[name] = true;
        return name;
      };

    while (s.getTime() < now.getTime()) {
      var ecount = getRandomInt(0, 3);
      for (var i = 0; i < ecount; i++) {
        var name = generateName();
        data.push({
          start: Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
          name: name,
          email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
          active: getRandomInt(0, 1),
          salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
        });
      }
      s = Ext.Date.add(s, Ext.Date.MONTH, 1);
   ...