X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.grid.GroupingView.html diff --git a/docs/output/Ext.grid.GroupingView.html b/docs/output/Ext.grid.GroupingView.html index 5e4ba125..3175577b 100644 --- a/docs/output/Ext.grid.GroupingView.html +++ b/docs/output/Ext.grid.GroupingView.html @@ -1,63 +1,63 @@ -
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 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:
@@ -68,34 +68,36 @@ at all times. The initially configured wi...Defaults to
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 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. 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).
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:
@@ -156,21 +158,23 @@ Ext.DomObserver = Ext.extend(Object, {
typeAhead: true,
mode: 'local',
triggerAction: 'all'
-});
Observable 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 19 pixels). GridView selectedRowClass : StringThe CSS class applied to a selected row (defaults to "x-grid3-row-selected"). An
-example overriding the default styli...The CSS class applied to a selected row (defaults to "x-grid3-row-selected"). An
+}); 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
+(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
+example overriding the default styli...The CSS class applied to a selected row (defaults to 'x-grid3-row-selected'). An
example overriding the default styling:
.x-grid3-row-selected {background-color: yellow;}
Note that this only controls the row, and will not do anything for the text inside it. To style inner
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 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.
@@ -180,9 +184,11 @@ See
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 object
)
+ Parameters:config
: Object
Returns:- void
GroupingView addEvents( Object|String o
, string Optional.
)
:
- voidUsed to define events on this ObservableUsed to define events on this ObservableParameters:object
: ObjectThe object with the events defined
Returns:- void
Observable addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
+ voidAdds the specified events to the list of events which this Observable may fire.Adds the specified events to the list of events which this Observable may fire.Parameters:o
: Object|StringEither an object with event names as properties with a value of true
+or the first event name string if multiple event names are being passed as separate parameters.Optional.
: stringEvent name if multiple event names are being passed as separate parameters.
+Usage:this.addEvents('storeloaded', 'storecleared');
Returns:- void
Observable addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
:
voidAppends an event handler to this object.Appends an event handler to this object.Parameters:eventName
: StringThe name of the event to listen for.handler
: FunctionThe method the event invokes.scope
: Object(optional) The scope (this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.options
: Object(optional) An object containing handler configuration.
@@ -203,8 +209,8 @@ Using the options argument, it is possible to combine different types of listene
A delayed, one-time listener.
myDataView.on('click', this.onClick, this, {
- single: true,
- delay: 100
+single: true,
+delay: 100
});
Attaching multiple handlers in 1 call
@@ -212,44 +218,78 @@ The method also allows for a single argument to be passed which is a config obje
which specify multiple handlers.
myGridPanel.on({
- 'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- 'mouseover' : {
- fn: this.onMouseOver,
- scope: this
- },
- 'mouseout' : {
- fn: this.onMouseOut,
- scope: this
- }
+'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+},
+'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+},
+'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+}
});
Or a shorthand syntax:
myGridPanel.on({
- 'click' : this.onClick,
- 'mouseover' : this.onMouseOver,
- 'mouseout' : this.onMouseOut,
- scope: this
+'click' : this.onClick,
+'mouseover' : this.onMouseOver,
+'mouseout' : this.onMouseOut,
+ scope: this
});
Returns:- void
Observable collapseAllGroups()
:
- voidCollapses all grouped rows.Collapses all grouped rows.Parameters:- None.
Returns:- void
GroupingView enableBubble( Object events
)
+ voidCollapses all grouped rows.Collapses all grouped rows.Parameters:- None.
Returns:- void
GroupingView enableBubble( String/Array events
)
:
- voidUsed to enable bubbling of eventsUsed to enable bubbling of eventsParameters:events
: Object
Returns:- void
Observable expandAllGroups()
+ 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
)
:
- TheReturn the index of the grid column which contains the passed HTMLElement.
+ NumberReturn the index of the grid column which contains the passed HTMLElement.
See also findRowIndexReturn the index of the grid column which contains the passed HTMLElement.
-See also findRowIndexParameters:el
: HTMLElementThe target element
Returns:The
column index, or <b>false</b> if the target element is not within a row of this GridView.
GridView findRow( HTMLElement el
)
+See also findRowIndexParameters:el
: HTMLElementThe target element
Returns:Number
The column index, or <b>false</b> if the target element is not within a row of this GridView.
GridView findRow( HTMLElement el
)
:
- TheReturn the HtmlElement representing the grid row which contains the passed element.Return the HtmlElement representing the grid row which contains the passed element.Parameters:el
: HTMLElementThe target HTMLElement
Returns:The
row element, or null if the target element is not within a row of this GridView.
GridView findRowIndex( HTMLElement el
)
+ HTMLElementReturn the HtmlElement representing the grid row which contains the passed element.Return the HtmlElement representing the grid row which contains the passed element.Parameters:el
: HTMLElementThe target HTMLElement
Returns:HTMLElement
The row element, or null if the target element is not within a row of this GridView.
GridView findRowBody( HTMLElement el
)
:
- TheReturn the index of the grid row which contains the passed HTMLElement.
+ HTMLElementReturn 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 findCellIndexParameters:el
: HTMLElementThe target HTMLElement
Returns: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
)
+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).
An event may be set to bubble up an Obse...Fires the specified event with the passed parameters (minus the event name).
@@ -325,7 +365,9 @@ after the 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
] )
:
- voidToggles 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
: StringThe groupId assigned to the group (see getGroupId)expanded
: Boolean(optional)
Returns:- void
GroupingView un( String eventName
, Function handler
, [Object scope
] )
+ voidToggles 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
: StringThe groupId assigned to the group (see getGroupId)expanded
: Boolean(optional)
Returns:- void
GroupingView toggleRowIndex( Number rowIndex
, [Boolean expanded
] )
+ :
+ voidToggle the group that contains the specific row.Toggle the group that contains the specific row.Parameters:rowIndex
: NumberThe row inside the groupexpanded
: Boolean(optional)
Returns:- void
GroupingView un( String eventName
, Function handler
, [Object scope
] )
:
voidRemoves an event handler (shorthand for removeListener.)Removes an event handler (shorthand for removeListener.)Parameters:eventName
: StringThe type of event the handler was associated with.handler
: FunctionThe handler to remove. This must be a reference to the function passed into the addListener call.scope
: Object(optional) The scope originally specified for the handler.
Returns:- void
Observable
Public Events
Event Defined By beforerefresh :
( Ext.grid.GridView view
)