Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container
        Panel
          GridPanel

Class Ext.grid.GridPanel

Package:Ext.grid
Defined In:GridPanel.js
Class:GridPanel
Subclasses:EditorGridPanel
Extends:Panel
xtype:grid

This class represents the primary interface of a component based grid control to represent data in a tabular format of rows and columns. The GridPanel is composed of the following:

Example usage:

var grid = new Ext.grid.GridPanel({
    store: new (@link Ext.data.Store}({
        autoDestroy: true,
        reader: reader,
        data: xg.dummyData
    }),
    columns: [
        {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
        {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: 'Change', width: 120, sortable: true, dataIndex: 'change'},
        {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'},
        // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype

        {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'}
    ],
    viewConfig: {
        forceFit: true,

//      Return CSS class to apply to rows depending upon data values

        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Row Selection and Horizontal Scrolling',
    iconCls: 'icon-grid'
});

Notes:

  • Although this class inherits many configuration options from base classes, some of them (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will have no effect.
  • A grid requires a width in which to scroll its columns, and a height in which to scroll its rows. These dimensions can either be set explicitly through the height and width configuration options or implicitly set by using the grid as a child item of a Container which will have a layout manager provide the sizing of its child items (for example the Container of the Grid may specify layout:'fit').
  • To access the data in a Grid, it is necessary to use the data model encapsulated by the Store. See the cellclick event for more details.

Config Options

Config OptionsDefined By
 autoExpandMax : Number
The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.
GridPanel
 autoExpandMin : Number
The minimum width the autoExpandColumn can have (if enabled). Defaults to 50.
GridPanel
 cm : Object
Shorthand for colModel.
GridPanel
 colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
 collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
 collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
 columnLines : Boolean
true to add css for column separation lines. Default is false.
GridPanel
 ddGroup : String
The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
GridPanel
 disableSelection : Boolean

true to disable selections in the grid. Defaults to false.

Ignored if a SelectionModel is specified.

GridPanel
 enableColumnHide : Boolean
Defaults to true to enable hiding of columns with the header context menu.
GridPanel
 enableColumnMove : Boolean
Defaults to true to enable drag and drop reorder of columns. false to turn off column reordering via drag drop.
GridPanel
 enableColumnResize : Boolean
false to turn off column resizing for the whole grid. Defaults to true.
GridPanel
 enableHdMenu : Boolean
Defaults to true to enable the drop down button for menu in the headers.
GridPanel
 headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
 hideHeaders : Boolean
True to hide the grid's header. Defaults to false.
GridPanel
 loadMask : Object
An Ext.LoadMask config or true to mask the grid while loading. Defaults to false.
GridPanel
 maxHeight : Number
Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
 minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
 minColumnWidth : Number
The minimum width a column can be resized to. Defaults to 25.
GridPanel
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 sm : Object
Shorthand for selModel.
GridPanel
 store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required).
GridPanel
 trackMouseOver : Boolean
True to highlight rows when the mouse is over. Default is true for GridPanel, but false for EditorGridPanel.
GridPanel
 view : Object
The Ext.grid.GridView used by the grid. This can be set before a call to render().
GridPanel
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
 bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
 collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By

Public Events

EventDefined By