Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Viewing Data in Grids

Page of 168
A locked, grouped grid with summaries

Grids are a great way to display large amounts of tabular data in a web browser. The Ext.grid.Panel component makes it easy to fetch, sort and filter large amounts of data.

Grids are bound to Ext.data.Store instances, listening to its bound store for any changes. Any time data in the store is updated such as a record being inserted, updated, or deleted, the grid will automatically refresh to reflect those changes.

While Grids are typically used to enable a user to quickly browse through large datasets and select specific rows, they can also be used to edit data in a store as well.

Instantiating a Simple Grid

A simple grid

A simple grid is bound to a Store. As illustrated by the following example, you must explicitly define the columns in the grid and how they map to the underlying model fields via the dataIndex config property.



Ext.create('Ext.data.Store', {
 storeId:'Students',
 fields:['firstName', 'email', 'lastName'],
 data:[
  { 
   firstName: 'Lisa', 
   email:'lisa@figleaf.com',  
   lastName: 'Drucker'
  },
  { 
   firstName: 'Bart',
   email: 'bart@figleaf.com', 
   lastName : 'Gallerizzo'
  },
  { 
   firstName: 'Homer', 
   email: 'home@figleaf.com',
   lastName: 'Perry'
  },
  {
   firstName: 'Marge', 
   email: 'marge@figleaf.com',
   lastName: 'Watts'
  }
 ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Student List',
    store: Ext.getStore('Students'),
    columns: [
        { text: 'First Name',  dataIndex: 'firstName' },
        { text: 'Last Name',  dataIndex: 'lastName' },
        { text: 'Email', dataIndex: 'email', flex: 1 }
    ],
    height: 200,
    width: 400
});

Defining Grid Columns

Grid columns are subclassed into the following types:

Column Type Description
Column A generic column type, typically used to display string data.
Boolean Used to output boolean data as strings, e.g. "Yes" or "No"
Date Used to transform Javascript date objects into human-readable date/time values
Number Formats numbers as strings
Template Enables you to use Ext.XTemplate syntax to define the output format of a field.
RowNumberer Displays the current row number for a record.
Action Enables you to place clickable buttons in a column.

A grid containing a numeric column (Year), template column (Amt), and action column (like/dislike buttons)

Formatting Data in Grid Columns

You can format data in an Ext.column.Column by specifying a renderer method, whose syntax appears as follows:

{
 xtype: 'gridcolumn',
 renderer: function(value, metaData, record, rowIndex, 
                                 colIndex, store, view) {
   
    return value.substring(0,3) + '.';
 },
 width: 50,
 dataIndex: 'HONORIFIC',
 text: 'Hon'
}

Note that when a user sorts on a column containing a rendering method, records are placed in sorted order by the value contained within the store's model field, and not output from the renderer.

There may be instances, however where you need to change both the value displayed within a column as well as affect the grid sorting order. In these cases you will need to employ one of the following tactics:

  • Define a custom sorter on the underlying model's column
  • Define a new model field to be used expressly within the grid that generates a calculated value through its convert method as described in the prior section of this course.
Page of 168
comments powered by Disqus