X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/docs/output/Ext.grid.GroupingView.html?ds=inline diff --git a/docs/output/Ext.grid.GroupingView.html b/docs/output/Ext.grid.GroupingView.html index 777c5759..d8271878 100644 --- a/docs/output/Ext.grid.GroupingView.html +++ b/docs/output/Ext.grid.GroupingView.html @@ -1,103 +1,109 @@ -
Observable GridView GroupingView
Package: | Ext.grid |
Defined In: | GroupingView.js |
Class: | GroupingView |
Extends: | GridView |
Sample usage:
-
-var grid = new Ext.grid.GridPanel({
- // A groupingStore is required for a GroupingView
- store: new Ext.data.GroupingStore({
- autoDestroy: true,
- reader: reader,
- data: xg.dummyData,
- sortInfo: {field: 'company', direction: 'ASC'},
- groupOnSort: true,
- remoteGroup: true,
- groupField: 'industry'
- }),
- colModel: new Ext.grid.ColumnModel({
- columns:[
- {id:'company',header: 'Company', width: 60, dataIndex: 'company'},
- // groupable, groupName, groupRender are also configurable at column level
- {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', groupable: false},
- {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
- {header: 'Industry', dataIndex: 'industry'},
- {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
- ],
- defaults: {
- sortable: true,
- menuDisabled: false,
- width: 20
- }
- }),
-
- 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
+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. A GroupingStore
+must be used to enable grouping. Some grouping characteristics may also be configured at the
+Column level
+Sample usage:
+var grid = new Ext.grid.GridPanel({
+ // A groupingStore is required for a GroupingView
+ store: new Ext.data.GroupingStore({
+ autoDestroy: true,
+ reader: reader,
+ data: xg.dummyData,
+ sortInfo: {field: 'company', direction: 'ASC'},
+ groupOnSort: true,
+ remoteGroup: true,
+ groupField: 'industry'
+ }),
+ colModel: new Ext.grid.ColumnModel({
+ columns:[
+ {id:'company',header: 'Company', width: 60, dataIndex: 'company'},
+ // groupable, groupName, groupRender are also configurable at column level
+ {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', groupable: false},
+ {header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
+ {header: 'Industry', dataIndex: 'industry'},
+ {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
+ ],
+ defaults: {
+ sortable: true,
+ menuDisabled: false,
+ width: 20
+ }
+ }),
+
+ 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 : BooleanDefaults to false. Specify true to have the column widths re-proportioned
-when the grid is initially rendered. The ...Defaults to false. Specify true to have the column widths re-proportioned
-when the grid is initially rendered. The
+when the grid is initially rendered. The
+...Defaults to false. Specify true to have the column widths re-proportioned
+when the grid is initially rendered. The
initially configured width of each column will be adjusted
to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually
or programmatically), the other columns in the grid will not be resized to fit the grid width.
-See forceFit also. GridView cellSelector : StringThe selector used to find cells internally (defaults to 'td.x-grid3-cell') GridView cellSelectorDepth : NumberThe number of levels to search for cells in event delegation (defaults to 4) GridView columnsText : StringThe text displayed in the 'Columns' menu item (defaults to 'Columns') GridView deferEmptyText : BooleanTrue to defer emptyText being applied until the store's
-first load (defaults to true). GridView emptyGroupText : StringThe text to display when there is an empty group value (defaults to '(None)').
-May also be specified per column, see...The text to display when there is an empty group value (defaults to '(None)').
+See forceFit also. GridView cancelEditOnToggle : BooleanTrue to cancel any editing when the group header is toggled. Defaults to true. GroupingView cellSelector : StringThe selector used to find cells internally (defaults to 'td.x-grid3-cell') GridView cellSelectorDepth : NumberThe number of levels to search for cells in event delegation (defaults to 4) GridView columnsText : StringThe text displayed in the 'Columns' menu item (defaults to 'Columns') GridView deferEmptyText : BooleanTrue to defer emptyText being applied until the store's
+first load (defaults to true). GridView emptyGroupText : StringThe text to display when there is an empty group value (defaults to '(None)').
+May also be specified per column, see ...The text to display when there is an empty group value (defaults to '(None)').
May also be specified per column, see Ext.grid.Column.emptyGroupText. GroupingView emptyText : StringDefault text (html tags are accepted) to display in the grid body when no rows
are available (defaults to ''). This v...Default text (html tags are accepted) to display in the grid body when no rows
are available (defaults to ''). This value will be used to update the mainBody:
this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>');
GridView enableGrouping : Booleanfalse to disable grouping functionality (defaults to true) GroupingView enableGroupingMenu : Booleantrue to enable the grouping control in the column menu (defaults to true) GroupingView enableNoGroups : Booleantrue to allow the user to turn off grouping (defaults to true) GroupingView enableRowBody : BooleanTrue to add a second TR element per row that can be used to provide a row body
that spans beneath the data row. Use ...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 : BooleanDefaults to false. Specify true to have the column widths re-proportioned
-at all times. The initially configured wi...Defaults to false. Specify true to have the column widths re-proportioned
-at all times. The initially configured width of each
+at all times.
+The initially configured wid...Defaults to false. Specify true to have the column widths re-proportioned
+at all times.
+The initially configured width of each
column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are
later resized (manually or programmatically), the other columns in the grid will be resized
-to fit the grid width. See autoFill also.
GridView groupByText : StringText displayed in the grid header menu for grouping by a column
-(defaults to 'Group By This Field'). GroupingView groupMode : StringIndicates how to construct the group identifier. 'value' constructs the id using
-raw value, 'display' constructs the...Indicates how to construct the group identifier. 'value' constructs the id using
-raw value, 'display' constructs the id using the rendered value. Defaults to 'value'. GroupingView groupRenderer : FunctionThis property must be configured in the Ext.grid.Column for
-each column. GroupingView groupTextTpl : StringThe template used to render the group header (defaults to '{text}').
-This is used to format an object which contains...The template used to render the group header (defaults to '{text}').
-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 function.
-- gvalue : Object
The raw value of the group field.
-- text : String
The configured header (as described in showGroupName)
-if showGroupName is true) plus the rendered group 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. Possible usage:var grid = new Ext.grid.GridPanel({
- ...
- view: new Ext.grid.GroupingView({
- groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
- }),
-});
GroupingView headersDisabled : BooleanTrue to disable the grid column headers (defaults to false).
+to fit the grid width.
+Columns which are configured with fixed: true
are omitted from being resized.
+See autoFill.
GridView groupByText : StringText displayed in the grid header menu for grouping by a column
+(defaults to 'Group By This Field'). GroupingView groupMode : StringIndicates how to construct the group identifier. 'value' constructs the id using
+raw value, 'display' constructs the ...Indicates how to construct the group identifier. 'value' constructs the id using
+raw value, 'display' constructs the id using the rendered value. Defaults to 'value'. GroupingView groupRenderer : FunctionThis property must be configured in the Ext.grid.Column for
+each column. GroupingView groupTextTpl : StringThe template used to render the group header (defaults to '{text}').
+This is used to format an object which contains ...The template used to render the group header (defaults to '{text}').
+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 function.
+- gvalue : Object
The raw value of the group field.
+- text : String
The configured header (as described in showGroupName)
+if showGroupName is true) plus the rendered group 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. Possible usage:var grid = new Ext.grid.GridPanel({
+ ...
+ view: new Ext.grid.GroupingView({
+ groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
+ }),
+});
GroupingView headerMenuOpenCls : StringThe CSS class to add to the header cell when its menu is visible. Defaults to 'x-grid3-hd-menu-open' GridView headersDisabled : BooleanTrue to disable the grid column headers (defaults to false).
Use the ColumnModel menuDisabled
-config to disable the ...True to disable the grid column headers (defaults to false).
+config to disable the m...True to disable the grid column headers (defaults to false).
Use the ColumnModel menuDisabled
config to disable the menu for individual columns. While this config is true the
following will be disabled:
@@ -158,7 +164,7 @@ Ext.DomObserver = Ext.extend(Object, {
typeAhead: true,
mode: 'local',
triggerAction: 'all'
-});
Observable rowBodySelector : StringThe selector used to find row bodies internally (defaults to 'div.x-grid3-row') GridView rowBodySelectorDepth : NumberThe number of levels to search for row bodies in event delegation (defaults to 10) GridView rowSelector : StringThe selector used to find rows internally (defaults to 'div.x-grid3-row') GridView rowSelectorDepth : NumberThe number of levels to search for rows in event delegation (defaults to 10) GridView scrollOffset : NumberThe amount of space to reserve for the vertical scrollbar
+}); Observable markDirty : BooleanTrue to show the dirty cell indicator when a cell has been modified. Defaults to true. GridView rowBodySelector : StringThe selector used to find row bodies internally (defaults to 'div.x-grid3-row') GridView rowBodySelectorDepth : NumberThe number of levels to search for row bodies in event delegation (defaults to 10) GridView rowOverCls : StringThe CSS class added to each row when it is hovered over. Defaults to 'x-grid3-row-over' GridView rowSelector : StringThe selector used to find rows internally (defaults to 'div.x-grid3-row') GridView rowSelectorDepth : NumberThe number of levels to search for rows in event delegation (defaults to 10) GridView scrollOffset : NumberThe amount of space to reserve for the vertical scrollbar
(defaults to undefined). If an explicit value isn't specifi...The amount of space to reserve for the vertical scrollbar
(defaults to undefined). If an explicit value isn't specified, this will be automatically
calculated. GridView selectedRowClass : StringThe CSS class applied to a selected row (defaults to 'x-grid3-row-selected'). An
@@ -169,19 +175,19 @@ Note that this only controls the row, and will not do anything for the text insi
facets (like text) use something like:
.x-grid3-row-selected .x-grid3-cell-inner {
color: #FFCC00;
- }
GridView showGroupName : BooleanIf true will display a prefix plus a ': ' before the group field value
-in the group header line. The prefix will co...If true will display a prefix plus a ': ' before the group field value
-in the group header line. The prefix will consist of the groupName
-(or the configured header if not provided) configured in the
-Ext.grid.Column for each set of grouped rows (defaults to true). GroupingView showGroupsText : StringText displayed in the grid header for enabling/disabling grouping
-(defaults to 'Show in Groups'). GroupingView sortAscText : StringThe text displayed in the 'Sort Ascending' menu item (defaults to 'Sort Ascending') GridView sortClasses : ArrayThe CSS classes applied to a header when it is sorted. (defaults to ['sort-asc', 'sort-desc']) GridView sortDescText : StringThe text displayed in the 'Sort Descending' menu item (defaults to 'Sort Descending') GridView startCollapsed : Booleantrue to start all groups collapsed (defaults to false) GroupingView
Public Properties
Property Defined By dragZone : Ext.grid.GridDragZoneA customized implementation of a DragZone which provides default implementations
+ } GridView showGroupName : BooleanIf true will display a prefix plus a ': ' before the group field value
+in the group header line. The prefix will con...If true will display a prefix plus a ': ' before the group field value
+in the group header line. The prefix will consist of the groupName
+(or the configured header if not provided) configured in the
+Ext.grid.Column for each set of grouped rows (defaults to true). GroupingView showGroupsText : StringText displayed in the grid header for enabling/disabling grouping
+(defaults to 'Show in Groups'). GroupingView sortAscText : StringThe text displayed in the 'Sort Ascending' menu item (defaults to 'Sort Ascending') GridView sortClasses : ArrayThe CSS classes applied to a header when it is sorted. (defaults to ['sort-asc', 'sort-desc']) GridView sortDescText : StringThe text displayed in the 'Sort Descending' menu item (defaults to 'Sort Descending') GridView startCollapsed : Booleantrue to start all groups collapsed (defaults to false) GroupingView
Public Properties
Property Defined By Ext.Template : masterTplThe master template to use when rendering the GridView. Has a default template GridView bodyTpl : Ext.TemplateThe template to use when rendering the body. Has a default template GridView cellTpl : Ext.TemplateThe template to use to render each cell. Has a default template GridView dragZone : Ext.grid.GridDragZoneA customized implementation of a DragZone which provides default implementations
of the template methods of DragZone ...A customized implementation of a DragZone which provides default implementations
of the template methods of DragZone to enable dragging of the selected rows of a GridPanel.
See Ext.grid.GridDragZone for details.
This will only be present:
- if the owning GridPanel was configured with enableDragDrop: true.
- after the owning GridPanel has been rendered.
-
GridView mainBody : Ext.ElementRead-only. The GridView's body Element which encapsulates all rows in the Grid.
+ GridView headerTpl : Ext.TemplateThe template to use when rendering headers. Has a default template GridView mainBody : Ext.ElementRead-only. The GridView's body Element which encapsulates all rows in the Grid.
This Element is only available after ...Read-only. The GridView's body Element which encapsulates all rows in the Grid.
This Element is only available after the GridPanel has been rendered. GridView
Public Methods
Method Defined By GroupingView( Object config
)
Parameters:config
: Object
Returns:- void
GroupingView addEvents( Object|String o
, string Optional.
)
@@ -243,38 +249,38 @@ Or a shorthand syntax:
:
voidCollapses all grouped rows.Collapses all grouped rows.Parameters:- None.
Returns:- void
GroupingView enableBubble( String/Array events
)
:
- voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
-this.getBubbleTarget() if present...Enables events fired by this Observable to bubble up an owner hierarchy by calling
-this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
-This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
-implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
-access the required target more quickly.
-Example:
Ext.override(Ext.form.Field, {
- // Add functionality to Field's initComponent to enable the change event to bubble
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
- this.enableBubble('change');
- }),
-
- // We know that we want Field's events to bubble directly to the FormPanel.
- getBubbleTarget : function() {
- if (!this.formPanel) {
- this.formPanel = this.findParentByType('form');
- }
- return this.formPanel;
- }
-});
-
-var myForm = new Ext.formPanel({
- title: 'User Details',
- items: [{
- ...
- }],
- listeners: {
- change: function() {
- // Title goes red if form has been modified.
- myForm.header.setStyle('color', 'red');
- }
- }
+ voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present....Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
+This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
+implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
+access the required target more quickly.
+Example:
Ext.override(Ext.form.Field, {
+ // Add functionality to Field's initComponent to enable the change event to bubble
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
+ this.enableBubble('change');
+ }),
+
+ // We know that we want Field's events to bubble directly to the FormPanel.
+ getBubbleTarget : function() {
+ if (!this.formPanel) {
+ this.formPanel = this.findParentByType('form');
+ }
+ return this.formPanel;
+ }
+});
+
+var myForm = new Ext.formPanel({
+ title: 'User Details',
+ items: [{
+ ...
+ }],
+ listeners: {
+ change: function() {
+ // Title goes red if form has been modified.
+ myForm.header.setStyle('color', 'red');
+ }
+ }
});
Parameters:events
: String/ArrayThe event name to bubble, or an Array of event names.
Returns:- void
Observable expandAllGroups()
:
voidExpands all grouped rows.Expands all grouped rows.Parameters:- None.
Returns:- void
GroupingView findCellIndex( HTMLElement el
)
@@ -288,7 +294,7 @@ See also Return the HtmlElement representing the grid row body which contains the passed element.Return the HtmlElement representing the grid row body which contains the passed element.Parameters:el
: HTMLElementThe target HTMLElement
Returns:HTMLElement
The row body element, or null if the target element is not within a row body of this GridView.
GridView findRowIndex( HTMLElement el
)
:
NumberReturn the index of the grid row which contains the passed HTMLElement.
-See also findCellIndexReturn the index of the grid row which contains the passed HTMLElement.
+See also findCellIndexReturn the index of the grid row which contains the passed HTMLElement.
See also findCellIndexParameters:el
: HTMLElementThe target HTMLElement
Returns:Number
The row index, or <b>false</b> if the target element is not within a row of this GridView.
GridView fireEvent( String eventName
, Object... args
)
:
BooleanFires the specified event with the passed parameters (minus the event name).
@@ -300,7 +306,9 @@ by calling Focuses the specified row.Focuses the specified row.Parameters:row
: NumberThe row index
Returns:- void
GridView getCell( Number row
, Number col
)
:
- HtmlElementReturns the grid's <td> HtmlElement at the specified coordinates.Returns the grid's <td> HtmlElement at the specified coordinates.Parameters:row
: NumberThe row index in which to find the cell.col
: NumberThe column index of the cell.
Returns:HtmlElement
The td at the specified coordinates.
GridView getGroupId( String value
)
+ HtmlElementReturns the grid's <td> HtmlElement at the specified coordinates.Returns the grid's <td> HtmlElement at the specified coordinates.Parameters:row
: NumberThe row index in which to find the cell.col
: NumberThe column index of the cell.
Returns:HtmlElement
The td at the specified coordinates.
GridView getGridInnerWidth()
+ :
+ NumberReturns the total internal width available to the grid, taking the scrollbar into accountReturns the total internal width available to the grid, taking the scrollbar into accountParameters:- None.
Returns:Number
The total width
GridView getGroupId( String value
)
:
StringDynamically tries to determine the groupId of a specific valueDynamically tries to determine the groupId of a specific valueParameters:value
: String
Returns:String
The group id
GroupingView getHeaderCell( Number index
)
:
@@ -337,7 +345,11 @@ The following property will be passed in, and may be appended to:
tstyle
: String A CSS style specification that willl be applied to the <table> element which encapsulates
both the standard grid row, and any expansion row.
-
store
: StoreThe Ext.data.Store this grid is bound to Returns:String
a CSS class name to add to the row.
GridView hasListener( String eventName
)
+store
: StoreThe Ext.data.Store this grid is bound to Returns:String
a CSS class name to add to the row.
GridView handleHdMenuClickDefault( Ext.menu.BaseItem item
)
+ :
+ voidCalled by handleHdMenuClick if any button except a sort ASC/DESC button was clicked. The default implementation provi...Called by handleHdMenuClick if any button except a sort ASC/DESC button was clicked. The default implementation provides
+the column hide/show functionality based on the check state of the menu item. A different implementation can be provided
+if needed.Parameters:item
: Ext.menu.BaseItemThe menu item that was clicked
Returns:- void
GridView hasListener( String eventName
)
:
BooleanChecks to see if this object has any listeners for a specified eventChecks to see if this object has any listeners for a specified eventParameters:eventName
: StringThe 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
] )
: