ObservableGridView
GroupingView
Package: | Ext.grid |
Defined In: | GroupingView.js |
Class: | GroupingView |
Extends: | GridView |
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 | 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 | |
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 | |
groupTextTpl : String
The template used to render the group text
|
GroupingView | |
hideGroupedColumn : Boolean
True to hide the column that is currently grouped
|
GroupingView | |
startCollapsed : Boolean
True to start all groups collapsed
|
GroupingView |
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 |
Method | Defined By | |
---|---|---|
GroupingView( Object config )
Parameters:
|
GroupingView | |
addEvents( Object object ) : void Used to define events on this Observable
Used to define events on this Observable
Parameters:
|
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:
|
Observable | |
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:
|
Observable | |
focusCell( Number row , Number col ) : void Focuses the specified cell.
Focuses the specified cell.
Parameters:
|
GridView | |
focusRow( Number row ) : void Focuses the specified row..
Focuses the specified row..
Parameters:
|
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:
|
GridView | |
getGroupId( String value ) : void Dynamically tries to determine the groupId of a specific value
Dynamically tries to determine the groupId of a specific value
Parameters:
|
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:
|
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:
|
GridView | |
getRowClass( Record record , Number index , Object rowParams , Store ds ) : void 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:
|
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:
|
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:
|
Observable | |
purgeListeners() : void Removes all listeners for this object
Removes all listeners for this object
Parameters:
|
Observable | |
refresh( [Boolean headersToo ] ) : void Refreshs the grid UI
Refreshs the grid UI
Parameters:
|
GridView | |
removeListener( String eventName , Function handler , [Object scope ] ) : void Removes a listener
Removes a listener
Parameters:
|
Observable | |
resumeEvents() : void Resume firing events. (see suspendEvents)
Resume firing events. (see suspendEvents)
Parameters:
|
Observable | |
scrollToTop() : void Scrolls the grid to the top
Scrolls the grid to the top
Parameters:
|
GridView | |
suspendEvents() : void Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
|
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:
|
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:
|
GroupingView | |
un( String eventName , Function handler , [Object scope ] ) : void Removes a listener (shorthand for removeListener)
Removes a listener (shorthand for removeListener)
Parameters:
|
Observable |