Observable GridView 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 | |
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 |
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 | |
collapseAllGroups() : void Collapses all grouped rows.
Collapses all grouped rows.
Parameters:
|
GroupingView | |
expandAllGroups() : void Expands all grouped rows.
Expands all grouped rows.
Parameters:
|
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:
|
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 ) : String 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 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:
|
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 |
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
GridView |