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
  groupByText : String
Text displayed in the grid header menu for grouping by a column (defaults to 'Group By This Field').
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
  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
  dragZone : Ext.grid.GridDragZone

This

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

Public Events

Event Defined By