Guide applies to: modern

Grid

The modern Ext.grid.Grid extends Ext.dataview.List.

Grids show a store’s data as a table of rows and columns.

Expand Code

JS Run

  1. Ext.define('MyApp.view.Main', {
  2.     extend: 'Ext.grid.Grid',
  3.     store: {
  4.         autoLoad: true,
  5.         fields: [{name: 'dob', type: 'date', dateFormat: 'Y/m/d'}],
  6.         proxy: {type: 'ajax', url: 'resources/json/aerosmith.json'}
  7.     },
  8.     title: 'Aerosmith',
  9.     columns: [{
  10.         text: 'First Name',
  11.         dataIndex: 'first'
  12.     }, {
  13.         text: 'Last Name',
  14.         dataIndex: 'last'
  15.     }, {
  16.         text: 'Date Of Birth',
  17.         xtype: 'datecolumn',
  18.         format: 'F j, Y',
  19.         dataIndex: 'dob',
  20.         flex: 1
  21.     }]
  22. });
  23. Ext.application({
  24.     name: 'MyApp',
  25.     mainView: 'MyApp.view.Main'
  26. });