Clear Up
SharpKit Reference

Ext.grid Namespace

Download SDK:


Name Description

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Internal utility class that provides default configuration for cell editing.


NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Component layout for grid column headers which have a title element at the top followed by content.


NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

This class is used only by the grid's HeaderContainer docked child.

It adds the ability to shrink the vertical size of the inner container element back if a grouped column header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.

Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls setPadding on the columns so that they lay out correctly.


NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Lockable is a private mixin which injects lockable behavior into any TablePanel subclass such as GridPanel or TreePanel. TablePanel will automatically inject the Ext.grid.Lockable mixin in when one of the these conditions are met:

  • The TablePanel has the lockable configuration set to true
  • One of the columns in the TablePanel has locked set to true/false

Each TablePanel subclass must register an alias. It should have an array of configurations to copy to the 2 separate tablepanel's that will be generated to note what configurations should be copied. These are named normalCfgCopy and lockedCfgCopy respectively.

Columns which are locked must specify a fixed width. They do NOT support a flex width.

Configurations which are specified in this class will be available on any grid or tree which is using the lockable functionality.


NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

This class is used internally to provide a single interface when using a locking grid. Internally, the locking grid creates two separate grids, so this class is used to map calls appropriately.


Implements infinite scrolling of a grid, allowing users can scroll through thousands of records without the performance penalties of renderering all the records on screen at once. The grid should be bound to a buffered store with a pageSize specified.

The number of rows rendered outside the visible area, and the buffering of pages of data from the remote server for immediate rendering upon scroll can be controlled by configuring the #verticalScroller.

You can tell it to create a larger table to provide more scrolling before a refresh is needed, and also to keep more pages of records in memory for faster refreshing when scrolling.

var myStore = Ext.create('', {
            // ...
            buffered: true,
            pageSize: 100,
            // ...
            var grid = Ext.create('Ext.grid.Panel', {
            // ...
            autoLoad: true,
            verticalScroller: {
            trailingBufferZone: 200,  // Keep 200 records buffered in memory behind scroll
            leadingBufferZone: 5000   // Keep 5000 records buffered in memory ahead of scroll
            // ...

Implementation notes

This class monitors scrolling of the TableView within a GridPanel which is using a buffered store to only cache and render a small section of a very large dataset.

NB! The GridPanel will instantiate this to perform monitoring, this class should never be instantiated by user code. Always use the verticalScroller config.


Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged <table>, GridPanel makes it easy to fetch, sort and filter large amounts of data.

Grids are composed of two main pieces - a Store full of data and a set of columns to render.

Basic GridPanel

    Ext.create('', {
            fields:['name', 'email', 'phone'],
            { 'name': 'Lisa',  "email":"",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"", "phone":"555-222-1254"  }
            proxy: {
            type: 'memory',
            reader: {
            type: 'json',
            root: 'items'
            Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
            height: 200,
            width: 400,
            renderTo: Ext.getBody()

The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline. In most apps we would be placing the grid inside another container and wouldn't need to use the height, width and renderTo configurations but they are included here to make it easy to get up and running.

The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath and finally the grid rows under the headers.

Configuring columns

By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each column header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns. It's easy to configure each column - here we use the same example as above and just modify the columns config:

columns: [
            text: 'Name',
            dataIndex: 'name',
            sortable: false,
            hideable: false,
            flex: 1
            text: 'Email',
            dataIndex: 'email',
            hidden: true
            text: 'Phone',
            dataIndex: 'phone',
            width: 100

We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email column hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to a fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns have been accounted for. See the column docs for more details.


As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is tied to a particular column and is passed the value that would be rendered into each cell in that column. For example, we could define a renderer function for the email column to turn each email address into a mailto link:

columns: [
            text: 'Email',
            dataIndex: 'email',
            renderer: function(value) {
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);

See the column docs for more information on renderers.

Selection Models

Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or update that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of the data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and CellSelectionModel, where individual cells are selected.

Grids use a Row Selection Model by default, but this is easy to customise like so:

    Ext.create('Ext.grid.Panel', {
            selType: 'cellmodel',
            store: ...

Specifying the cellmodel changes a couple of things. Firstly, clicking on a cell now selects just that cell (using a rowmodel will select the entire row), and secondly the keyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in conjunction with editing.

Sorting & Filtering

Every grid is attached to a Store, which provides multi-sort and filtering capabilities. It's easy to set up a grid to be sorted from the start:

var myGrid = Ext.create('Ext.grid.Panel', {
            store: {
            fields: ['name', 'email', 'phone'],
            sorters: ['name', 'phone']
            columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email' }

Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on more than one field at run time it's easy to do so by adding new sorters to the store:[
            { property: 'name',  direction: 'ASC' },
            { property: 'email', direction: 'DESC' }

See for examples of filtering.

State saving

When configured stateful, grids save their column state (order and width) encapsulated within the default Panel state of changed width and height and collapsed/expanded state.

Each column of the grid may be configured with a stateId which identifies that column locally within the grid.

Plugins and Features

Grid supports addition of extra functionality through features and plugins:

  • CellEditing - editing grid contents one cell at a time.

  • RowEditing - editing grid contents an entire row at a time.

  • DragDrop - drag-drop reordering of grid rows.

  • Paging toolbar - paging through large sets of data.

  • Infinite scrolling - another way to handle large sets of data.

  • RowNumberer - automatically numbered rows.

  • Grouping - grouping together rows having the same value in a particular field.

  • Summary - a summary row at the bottom of a grid.

  • GroupingSummary - a summary row at the bottom of each group.


NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Internal utility class used to provide row editing functionality. For developers, they should use the RowEditing plugin to use this functionality with a grid.


This is a utility class that can be passed into a Ext.grid.column.Column as a column config that provides an automatic row numbering column.


columns: [
            {xtype: 'rownumberer'},
            {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
            {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
            {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
            {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}

The grid View class provides extra Ext.grid.Panel specific functionality to the Ext.view.Table. In general, this class is not instanced directly, instead a viewConfig option is passed to the grid:

    Ext.create('Ext.grid.Panel', {
            // other options
            viewConfig: {
            stripeRows: false

Drag Drop

Drag and drop functionality can be achieved in the grid by attaching a Ext.grid.plugin.DragDrop plugin when creating the view.

    Ext.create('Ext.grid.Panel', {
            // other options
            viewConfig: {
            plugins: {
            ddGroup: 'people-group',
            ptype: 'gridviewdragdrop',
            enableDrop: false

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

© Copyright 2005-2011 SharpKit. All rights reserved.