Sencha Documentation

Ext.grid.GridView

Overview

Sub classes

Ext.grid.GroupingViewExt.grid.PivotGridView

This class encapsulates the user interface of an Ext.grid.GridPanel. Methods of this class may be used to access user interface elements to enable special display effects. Do not change the DOM structure of the user interface.

This class does not provide ways to manipulate the underlying data. The data model of a Grid is held in an Ext.data.Store.

Config Options

 
enableRowBody : Boolean
True to add a second TR element per row that can be used to provide a row body that spans beneath the data row. Use ...
True to add a second TR element per row that can be used to provide a row body that spans beneath the data row. Use the getRowClass method's rowParams config to customize the row body.
 
rowBodySelector : String
The selector used to find row bodies internally (defaults to 'div.x-grid3-row')
The selector used to find row bodies internally (defaults to 'div.x-grid3-row')

Properties

 
bodyTpl : Ext.Template
The template to use when rendering the body. Has a default template
The template to use when rendering the body. Has a default template
 
cellTpl : Ext.Template
The template to use to render each cell. Has a default template
The template to use to render each cell. Has a default template

Methods

 
findRowBody( HTMLElement el ) : HTMLElement
Return the HtmlElement representing the grid row body which contains the passed element.
Return the HtmlElement representing the grid row body which contains the passed element.

Parameters

  • el : HTMLElement
    The target HTMLElement

Returns

  • HTMLElement   The row body element, or null if the target element is not within a row body of this GridView.
 
getRowClass( Record record, Number index, Object rowParams, Store store ) : String
Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters t...
Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters to the row template for the current row to customize how it is rendered using the rowParams parameter. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string (e.g., 'my-class another-class'). Example usage: 
viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},

Parameters

  • record : Record
    The Ext.data.Record corresponding to the current row.
  • index : Number
    The row index.
  • rowParams : Object
    A config object that is passed to the row template during rendering that allows customization of various aspects of a grid row.

    If enableRowBody is configured true, then the following properties may be set by this function, and will be used to render a full-width expansion row below each grid row:

    • body : String
      An HTML fragment to be used as the expansion row's body content (defaults to '').
    • bodyStyle : String
      A CSS style specification that will be applied to the expansion row's <tr> element. (defaults to '').
    The following property will be passed in, and may be appended to:
    • tstyle : String
      A CSS style specification that willl be applied to the <table> element which encapsulates both the standard grid row, and any expansion row.
  • store : Store
    The Ext.data.Store this grid is bound to

Returns

  • String   a CSS class name to add to the row.
© 2011 Sencha Inc.