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
| 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. | GridView
| groupByText : String Text displayed in the grid header menu for grouping by a column (defaults to 'Group By This Field'). | GroupingView
| groupTextTpl : String The template used to render the group text | 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 A config object containing one or more event handlers to be added to this object during initialization. This should b... 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
| showGroupName : Boolean True to display the name for each set of grouped rows (defaults to false) | 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
| 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 in which to execute the handler function. The handler function's "this" context.
- `options` : Object
  (optional) An object containing handler configuration properties. This may contain any of the following properties:
  - scope : Object

    The scope in which to execute the handler function. The handler function's "this" context.

  - 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.

  Combining Options
  Using the options argument, it is possible to combine different types of listeners:
  A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

      el.on('click', this.onClick, this, {
          single: true,
          delay: 100,
          forumId: 4
      });

  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.

      foo.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:

      foo.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

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

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