Ext.grid.GroupingView

false to disable grouping functionality (defaults to true)

true to enable the grouping control in the column menu (defaults to true)

true to allow the user to turn off grouping (defaults to true)

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.

Text displayed in the grid header menu for grouping by a column (defaults to 'Group By This Field').

Indicates how to construct the group identifier. 'value' constructs the id using raw value, 'display' constructs the id using the rendered value. Defaults to 'value'.

This property must be configured in the Ext.grid.Column for each column.

The template used to render the group header (defaults to '{text}'). This is used to format an object which contains the following properties:

See Ext.XTemplate for information on how to format data using a template. Possible usage:

var grid = new Ext.grid.GridPanel({
    ...
    view: new Ext.grid.GroupingView({
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),
});

true to hide the column that is currently grouped (defaults to false)

true to skip refreshing the view when new rows are added (defaults to false)

The selector used to find row bodies internally (defaults to 'div.x-grid3-row')

If true will display a prefix plus a ': ' before the group field value in the group header line. The prefix will consist of the groupName (or the configured header if not provided) configured in the Ext.grid.Column for each set of grouped rows (defaults to true).

Text displayed in the grid header for enabling/disabling grouping (defaults to 'Show in Groups').

true to start all groups collapsed (defaults to false)

The template to use to render each cell. Has a default template

Expands all grouped rows.

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.

Dynamically tries to determine the groupId of a specific value

Parameters

• value : String

Returns

• String   The group id

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.

Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.

Parameters

• expanded : Boolean
  (optional)

Returns

• Void

Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.

Parameters

• groupId : String
  The groupId assigned to the group (see getGroupId)
• expanded : Boolean
  (optional)

Returns

• Void

Toggle the group that contains the specific row.

Parameters

• rowIndex : Number
  The row inside the group
• expanded : Boolean
  (optional)

Returns

• Void