X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.grid.GroupingView.html diff --git a/docs/output/Ext.grid.GroupingView.html b/docs/output/Ext.grid.GroupingView.html index 777c5759..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)').
+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,36 +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 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. 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:
@@ -169,11 +169,11 @@ 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
+ } 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.
@@ -243,38 +243,38 @@ Or a shorthand syntax:
:
void
Collapses 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
)