Properties Methods Events Config Options Direct Link

    Observable
      GridView
        GroupingView

# Class Ext.grid.GroupingView

Package: | Ext.grid
Defined In: | GroupingView.js
Class: | GroupingView
Extends: | GridView

Adds the ability for single level grouping to the grid.

    var grid = new Ext.grid.GridPanel({
        // A groupingStore is required for a GroupingView
        store: new Ext.data.GroupingStore({
            reader: reader,
            data: xg.dummyData,
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        }),

        columns: [
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
            {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            // custom grouping text template to display the number of items per group
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),

        frame:true,
        width: 700,
        height: 450,
        collapsible: true,
        animCollapse: false,
        title: 'Grouping Example',
        iconCls: 'icon-grid',
        renderTo: document.body
    });

## Config Options

Config Options | Defined By
--- | ---
| autoFill : Boolean True to auto expand the columns to fit the grid when the grid is created. | GridView
| cellSelector : String The selector used to find cells internally | GridView
| cellSelectorDepth : Number The number of levels to search for cells in event delegation (defaults to 4) | GridView
| deferEmptyText : Boolean True to defer emptyText being applied until the store's first load | GridView
| emptyGroupText : String The text to display when there is an empty group value | GroupingView
| emptyText : String Default text to display in the grid body when no rows are available (defaults to ''). | GridView
| enableGrouping : Boolean False to disable grouping functionality (defaults to true) | GroupingView
| enableGroupingMenu : Boolean True to enable the grouping control in the column menu | GroupingView
| enableNoGroups : Boolean True to allow the user to turn off grouping | GroupingView
| 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 t... 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. | GridView
| forceFit : Boolean True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. This opt... True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. This option overrides any (@link Ext.grid.ColumnModel#width width} settings in the ColumnModel. | GridView
| groupByText : String Text displayed in the grid header menu for grouping by a column (defaults to 'Group By This Field'). | GroupingView
| groupRenderer : Function The function used to format the grouping field value for display in the group header. Should return a string value. T... The function used to format the grouping field value for display in the group header. Should return a string value. This takes the following parameters: v : Object The new value of the group field. unused : undefined Unused parameter. r : Ext.data.Record The Record providing the data for the row which caused group change. rowIndex : Number The row index of the Record which caused group change. colIndex : Number The column index of the group field. ds : Ext.data.Store The Store which is providing the data Model. | GroupingView
| groupTextTpl : String The template used to render the group header. This is used to format an object which contains the following propertie... The template used to render the group header. This is used to format an object which contains the following properties: group : String The rendered value of the group field. By default this is the unchanged value of the group field. If a groupRenderer is specified, it is the result of a call to that. gvalue : Object The raw value of the group field. text : String The configured header (If showGroupName is true) plus the renderedgroup field value. groupId : String A unique, generated ID which is applied to the View Element which contains the group. startRow : Number The row index of the Record which caused group change. rs : Array .Contains a single element: The Record providing the data for the row which caused group change. cls : String The generated class name string to apply to the group header Element. style : String The inline style rules to apply to the group header Element. See Ext.XTemplate for information on how to format data using a template. | GroupingView
| header : String The text with which to prefix the group field value in the group header line. | GroupingView
| hideGroupedColumn : Boolean True to hide the column that is currently grouped | GroupingView
| ignoreAdd : Boolean True to skip refreshing the view when new rows are added (defaults to false) | GroupingView
| listeners : Object (optional) A config object containing one or more event handlers to be added to this object during initialization. Th... (optional) A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. | Observable
| rowSelector : String The selector used to find rows internally | GridView
| rowSelectorDepth : Number The number of levels to search for rows in event delegation (defaults to 10) | GridView
| showGroupName : Boolean True to display the name for each set of grouped rows (defaults to true) | GroupingView
| showGroupsText : String Text displayed in the grid header for enabling/disabling grouping (defaults to 'Show in Groups'). | GroupingView
| startCollapsed : Boolean True to start all groups collapsed | GroupingView

## Public Properties

Property | Defined By
--- | ---
| columnsText : String The text displayed in the "Columns" menu item | GridView
| mainBody : Ext.Element The GridView's body Element which encapsulates all rows in the Grid. Element. Read-only. This Element is only availab... The GridView's body Element which encapsulates all rows in the Grid. Element. Read-only. This Element is only available after the GridPanel has been rendered. | GridView
| scrollOffset : Number The amount of space to reserve for the scrollbar (defaults to 19 pixels) | GridView
| sortAscText : String The text displayed in the "Sort Ascending" menu item | GridView
| sortClasses : Array The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"]) | GridView
| sortDescText : String The text displayed in the "Sort Descending" menu item | GridView

## Public Methods

Method | Defined By
--- | ---
| GroupingView( `Object config` ) Parameters: `config` : Object Returns: `` | GroupingView
| addEvents( `Object object` ) : void Used to define events on this Observable Used to define events on this Observable Parameters: `object` : Object The object with the events defined Returns: `void` | Observable
- | addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this component Appends an event handler to this component Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. `options` : Object (optional) An object containing handler configuration properties. This may contain any of the following properties: scope : Object The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. delay : Number The number of milliseconds to delay the invocation of the handler after the event fires. single : Boolean True to add a handler to handle just the next firing of the event, and then remove itself. buffer : Number Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place. target : Observable Only call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable. Combining Options Using the options argument, it is possible to combine different types of listeners: A delayed, one-time listener.
      myDataView.on('click', this.onClick, this, {
          single: true,
          delay: 100
      });
  Attaching multiple handlers in 1 call The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.
      myGridPanel.on({
          'click' : {
              fn: this.onClick,
              scope: this,
              delay: 100
          },
          'mouseover' : {
              fn: this.onMouseOver,
              scope: this
          },
          'mouseout' : {
              fn: this.onMouseOut,
              scope: this
          }
      });
  Or a shorthand syntax:
      myGridPanel.on({
          'click' : this.onClick,
          'mouseover' : this.onMouseOver,
          'mouseout' : this.onMouseOut,
           scope: this
      });
Returns: `void` | Observable
| collapseAllGroups() : void Collapses all grouped rows. Collapses all grouped rows. Parameters: None. Returns: `void` | GroupingView
| expandAllGroups() : void Expands all grouped rows. Expands all grouped rows. Parameters: None. Returns: `void` | GroupingView
| findRow( `Element el` ) : The Return the HtmlElement representing the grid row which contains the passed element. Return the HtmlElement representing the grid row which contains the passed element. Parameters: `el` : Element The target element Returns: `The` row element, or null if the target element is not within a row of this GridView. | GridView
| findRowIndex( `Element el` ) : The Return the index of the grid row which contains the passed element. Return the index of the grid row which contains the passed element. Parameters: `el` : Element The target element Returns: `The` row index, or false if the target element is not within a row of this GridView. | GridView
| fireEvent( `String eventName`, `Object... args` ) : Boolean Fires the specified event with the passed parameters (minus the event name). Fires the specified event with the passed parameters (minus the event name). Parameters: `eventName` : String `args` : Object... Variable number of parameters are passed to handlers Returns: `Boolean` returns false if any of the handlers return false otherwise it returns true | Observable
| focusCell( `Number row`, `Number col` ) : void Focuses the specified cell. Focuses the specified cell. Parameters: `row` : Number The row index `col` : Number The column index Returns: `void` | GridView
| focusRow( `Number row` ) : void Focuses the specified row. Focuses the specified row. Parameters: `row` : Number The row index Returns: `void` | GridView
| getCell( `Number row`, `Number col` ) : HtmlElement Returns the grid's <TD> HtmlElement at the specified coordinates. Returns the grid's <TD> HtmlElement at the specified coordinates. Parameters: `row` : Number The row index in which to find the cell. `col` : Number The column index of the cell. Returns: `HtmlElement` The <TD> at the specified coordinates. | GridView
| getGroupId( `String value` ) : String Dynamically tries to determine the groupId of a specific value Dynamically tries to determine the groupId of a specific value Parameters: `value` : String Returns: `String` The group id | GroupingView
| getHeaderCell( `Number index` ) : HtmlElement Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index. Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index. Parameters: `index` : Number The column index Returns: `HtmlElement` The <TD> element. | GridView
| getRow( `Number index` ) : HtmlElement Return the <TR> HtmlElement which represents a Grid row for the specified index. Return the <TR> HtmlElement which represents a Grid row for the specified index. Parameters: `index` : Number The row index Returns: `HtmlElement` The <TR> element. | 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'). 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 body row, if applicable. Note that this object will only be applied if enableRowBody = true, otherwise it will be ignored. The object may contain any of these properties: `body` : String An HTML fragment to be rendered as the cell's body content (defaults to ''). `bodyStyle` : String A CSS style string that will be applied to the row's TR style attribute (defaults to ''). `cols` : Number The column count to apply to the body row's TD colspan attribute (defaults to the current column count of the grid). `store` : Store The Ext.data.Store this grid is bound to Returns: `String` a CSS class name to add to the row. | GridView
| hasListener( `String eventName` ) : Boolean Checks to see if this object has any listeners for a specified event Checks to see if this object has any listeners for a specified event Parameters: `eventName` : String The name of the event to check for Returns: `Boolean` True if the event is being listened for, else false | Observable
| on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this element (shorthand for addListener) Appends an event handler to this element (shorthand for addListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope in which to execute the handler function. The handler function's "this" context. `options` : Object (optional) Returns: `void` | Observable
| purgeListeners() : void Removes all listeners for this object Removes all listeners for this object Parameters: None. Returns: `void` | Observable
| refresh( [`Boolean headersToo`] ) : void Refreshs the grid UI Refreshs the grid UI Parameters: `headersToo` : Boolean (optional) True to also refresh the headers Returns: `void` | GridView
| relayEvents( `Object o`, `Array events` ) : void Relays selected events from the specified Observable as if the events were fired by `this`. Relays selected events from the specified Observable as if the events were fired by `this`. Parameters: `o` : Object The Observable whose events this object is to relay. `events` : Array Array of event names to relay. Returns: `void` | Observable
| removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener Removes a listener Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable
| resumeEvents() : void Resume firing events. (see suspendEvents) Resume firing events. (see suspendEvents) Parameters: None. Returns: `void` | Observable
| scrollToTop() : void Scrolls the grid to the top Scrolls the grid to the top Parameters: None. Returns: `void` | GridView
| suspendEvents() : void Suspend the firing of all events. (see resumeEvents) Suspend the firing of all events. (see resumeEvents) Parameters: None. Returns: `void` | Observable
| toggleAllGroups( [`Boolean expanded`] ) : void Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed. 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` | GroupingView
| toggleGroup( `String groupId`, [`Boolean expanded`] ) : void Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed. 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` | GroupingView
| un( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener (shorthand for removeListener) Removes a listener (shorthand for removeListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable

## Public Events

Event | Defined By
--- | ---
| beforerefresh : ( `Ext.grid.GridView view` ) Internal UI Event. Fired before the view is refreshed. Internal UI Event. Fired before the view is refreshed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView | GridView
| beforerowremoved : ( `Ext.grid.GridView view`, `Number rowIndex`, `Ext.data.Record record` ) Internal UI Event. Fired before a row is removed. Internal UI Event. Fired before a row is removed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `rowIndex` : Number The index of the row to be removed. `record` : Ext.data.Record The Record to be removed | GridView
| beforerowsinserted : ( `Ext.grid.GridView view`, `Number firstRow`, `Number lastRow` ) Internal UI Event. Fired before rows are inserted. Internal UI Event. Fired before rows are inserted. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `firstRow` : Number The index of the first row to be inserted. `lastRow` : Number The index of the last row to be inserted. | GridView
| refresh : ( `Ext.grid.GridView view` ) Internal UI Event. Fired after the GridView's body has been refreshed. Internal UI Event. Fired after the GridView's body has been refreshed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView | GridView
| rowremoved : ( `Ext.grid.GridView view`, `Number rowIndex`, `Ext.data.Record record` ) Internal UI Event. Fired after a row is removed. Internal UI Event. Fired after a row is removed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `rowIndex` : Number The index of the row that was removed. `record` : Ext.data.Record The Record that was removed | GridView
| rowsinserted : ( `Ext.grid.GridView view`, `Number firstRow`, `Number lastRow` ) Internal UI Event. Fired after rows are inserted. Internal UI Event. Fired after rows are inserted. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `firstRow` : Number The index of the first inserted. `lastRow` : Number The index of the last row inserted. | GridView
| rowupdated : ( `Ext.grid.GridView view`, `Number firstRow`, `Ext.data.record record` ) Internal UI Event. Fired after a row has been updated. Internal UI Event. Fired after a row has been updated. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `firstRow` : Number The index of the row updated. `record` : Ext.data.record The Record backing the row updated. | GridView