docs/guides/grid/examples/simple_grid/app.js

   1 /**
   2  * @example Simple Grid
   3  *
   4  * A basic grid that renders itself to the document body.
   5  */
   6 Ext.require('Ext.data.Store');
   7 Ext.require('Ext.grid.Panel');
   8
   9 Ext.define('User', {
  10     extend: 'Ext.data.Model',
  11     fields: [ 'name', 'email', 'phone' ]
  12 });
  13
  14 Ext.onReady(function() {
  15
  16     var userStore = Ext.create('Ext.data.Store', {
  17         model: 'User',
  18         data: [
  19             { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
  20             { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
  21             { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
  22             { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
  23         ]
  24     });
  25
  26     Ext.create('Ext.grid.Panel', {
  27         renderTo: Ext.getBody(),
  28         store: userStore,
  29         width: 400,
  30         height: 200,
  31         title: 'Application Users',
  32         columns: [
  33             {
  34                 text: 'Name',
  35                 width: 100,
  36                 sortable: false,
  37                 hideable: false,
  38                 dataIndex: 'name'
  39             },
  40             {
  41                 text: 'Email Address',
  42                 width: 150,
  43                 dataIndex: 'email',
  44                 hidden: true
  45             },
  46             {
  47                 text: 'Phone Number',
  48                 flex: 1,
  49                 dataIndex: 'phone'
  50             }
  51         ]
  52     });
  53
  54 });