-<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.grid.GridView.html" ext:member="" ext:cls="Ext.grid.GridView">GridView</a> <img src="resources/elbow-end.gif">GroupingView</pre></div><h1>Class <a href="source/GroupingView.html#cls-Ext.grid.GroupingView">Ext.grid.GroupingView</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.grid</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">GroupingView.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/GroupingView.html#cls-Ext.grid.GroupingView">GroupingView</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.grid.GridView.html" ext:cls="Ext.grid.GridView" ext:member="">GridView</a></td></tr></table><div class="description">Adds the ability for single level grouping to the grid. A <a href="output/Ext.data.GroupingStore.html" ext:cls="Ext.data.GroupingStore">GroupingStore</a>\r
-must be used to enable grouping. Some grouping characteristics may also be configured at the\r
-<a href="output/Ext.grid.Column.html" ext:cls="Ext.grid.Column">Column level</a><div class="mdetail-params"><ul>\r
-<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-emptyGroupText" ext:member="emptyGroupText" ext:cls="Ext.grid.Column">emptyGroupText</a></li>\r
-<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable" ext:member="groupable" ext:cls="Ext.grid.Column">groupable</a></li>\r
-<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName" ext:member="groupName" ext:cls="Ext.grid.Column">groupName</a></li>\r
-<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRender" ext:member="groupRender" ext:cls="Ext.grid.Column">groupRender</a></li>\r
-</ul></div>\r
-<p>Sample usage:</p>\r
-<pre><code>\r
-<b>var</b> grid = <b>new</b> Ext.grid.GridPanel({\r
- <i>// A groupingStore is required <b>for</b> a GroupingView\r</i>
- store: <b>new</b> <a href="output/Ext.data.GroupingStore.html" ext:cls="Ext.data.GroupingStore">Ext.data.GroupingStore</a>({\r
- autoDestroy: true,\r
- reader: reader,\r
- data: xg.dummyData,\r
- sortInfo: {field: <em>'company'</em>, direction: <em>'ASC'</em>},\r
- <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-groupOnSort" ext:member="groupOnSort" ext:cls="Ext.data.GroupingStore">groupOnSort</a>: true,\r
- <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-remoteGroup" ext:member="remoteGroup" ext:cls="Ext.data.GroupingStore">remoteGroup</a>: true,\r
- <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-groupField" ext:member="groupField" ext:cls="Ext.data.GroupingStore">groupField</a>: <em>'industry'</em>\r
- }),\r
- colModel: <b>new</b> <a href="output/Ext.grid.ColumnModel.html" ext:cls="Ext.grid.ColumnModel">Ext.grid.ColumnModel</a>({\r
- columns:[\r
- {id:<em>'company'</em>,header: <em>'Company'</em>, width: 60, dataIndex: <em>'company'</em>},\r
- <i>// <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable" ext:member="groupable" ext:cls="Ext.grid.Column">groupable</a>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName" ext:member="groupName" ext:cls="Ext.grid.Column">groupName</a>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRender" ext:member="groupRender" ext:cls="Ext.grid.Column">groupRender</a> are also configurable at column level\r</i>
- {header: <em>'Price'</em>, renderer: Ext.util.Format.usMoney, dataIndex: <em>'price'</em>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable" ext:member="groupable" ext:cls="Ext.grid.Column">groupable</a>: false},\r
- {header: <em>'Change'</em>, dataIndex: <em>'change'</em>, renderer: Ext.util.Format.usMoney},\r
- {header: <em>'Industry'</em>, dataIndex: <em>'industry'</em>},\r
- {header: <em>'Last Updated'</em>, renderer: Ext.util.Format.dateRenderer(<em>'m/d/Y'</em>), dataIndex: <em>'lastChange'</em>}\r
- ],\r
- defaults: {\r
- sortable: true,\r
- menuDisabled: false,\r
- width: 20\r
- }\r
- }),\r
-\r
- view: <b>new</b> Ext.grid.GroupingView({\r
- <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit" ext:member="forceFit" ext:cls="Ext.grid.GridView">forceFit</a>: true,\r
- <i>// custom grouping text template to display the number of items per group\r</i>
- <a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-groupTextTpl" ext:member="groupTextTpl" ext:cls="Ext.grid.GroupingView">groupTextTpl</a>: <em>'{text} ({[values.rs.length]} {[values.rs.length > 1 ? <em>"Items"</em> : <em>"Item"</em>]})'</em>\r
- }),\r
-\r
- frame:true,\r
- width: 700,\r
- height: 450,\r
- collapsible: true,\r
- animCollapse: false,\r
- title: <em>'Grouping Example'</em>,\r
- iconCls: <em>'icon-grid'</em>,\r
- renderTo: document.body\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.grid.GroupingView-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.grid.GroupingView-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.grid.GroupingView-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.grid.GroupingView-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.grid.GroupingView"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.grid.GridView.html" ext:member="" ext:cls="Ext.grid.GridView">GridView</a> <img src="resources/elbow-end.gif">GroupingView</pre></div><h1>Class <a href="source/GroupingView.html#cls-Ext.grid.GroupingView">Ext.grid.GroupingView</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.grid</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/GroupingView.html#cls-Ext.grid.GroupingView">GroupingView.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/GroupingView.html#cls-Ext.grid.GroupingView">GroupingView</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.grid.GridView.html" ext:cls="Ext.grid.GridView" ext:member="">GridView</a></td></tr></table><div class="description">Adds the ability for single level grouping to the grid. A <a href="output/Ext.data.GroupingStore.html" ext:cls="Ext.data.GroupingStore">GroupingStore</a>
+must be used to enable grouping. Some grouping characteristics may also be configured at the
+<a href="output/Ext.grid.Column.html" ext:cls="Ext.grid.Column">Column level</a><div class="mdetail-params"><ul>
+<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-emptyGroupText" ext:member="emptyGroupText" ext:cls="Ext.grid.Column">emptyGroupText</a></code></li>
+<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable" ext:member="groupable" ext:cls="Ext.grid.Column">groupable</a></code></li>
+<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName" ext:member="groupName" ext:cls="Ext.grid.Column">groupName</a></code></li>
+<li><code><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRender" ext:member="groupRender" ext:cls="Ext.grid.Column">groupRender</a></code></li>
+</ul></div>
+<p>Sample usage:</p>
+<pre><code><b>var</b> grid = <b>new</b> Ext.grid.GridPanel({
+ <i>// A groupingStore is required <b>for</b> a GroupingView</i>
+ store: <b>new</b> <a href="output/Ext.data.GroupingStore.html" ext:cls="Ext.data.GroupingStore">Ext.data.GroupingStore</a>({
+ autoDestroy: true,
+ reader: reader,
+ data: xg.dummyData,
+ sortInfo: {field: <em>'company'</em>, direction: <em>'ASC'</em>},
+ <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-groupOnSort" ext:member="groupOnSort" ext:cls="Ext.data.GroupingStore">groupOnSort</a>: true,
+ <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-remoteGroup" ext:member="remoteGroup" ext:cls="Ext.data.GroupingStore">remoteGroup</a>: true,
+ <a href="output/Ext.data.GroupingStore.html#Ext.data.GroupingStore-groupField" ext:member="groupField" ext:cls="Ext.data.GroupingStore">groupField</a>: <em>'industry'</em>
+ }),
+ colModel: <b>new</b> <a href="output/Ext.grid.ColumnModel.html" ext:cls="Ext.grid.ColumnModel">Ext.grid.ColumnModel</a>({
+ columns:[
+ {id:<em>'company'</em>,header: <em>'Company'</em>, width: 60, dataIndex: <em>'company'</em>},
+ <i>// <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable" ext:member="groupable" ext:cls="Ext.grid.Column">groupable</a>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName" ext:member="groupName" ext:cls="Ext.grid.Column">groupName</a>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRender" ext:member="groupRender" ext:cls="Ext.grid.Column">groupRender</a> are also configurable at column level</i>
+ {header: <em>'Price'</em>, renderer: Ext.util.Format.usMoney, dataIndex: <em>'price'</em>, <a href="output/Ext.grid.Column.html#Ext.grid.Column-groupable" ext:member="groupable" ext:cls="Ext.grid.Column">groupable</a>: false},
+ {header: <em>'Change'</em>, dataIndex: <em>'change'</em>, renderer: Ext.util.Format.usMoney},
+ {header: <em>'Industry'</em>, dataIndex: <em>'industry'</em>},
+ {header: <em>'Last Updated'</em>, renderer: Ext.util.Format.dateRenderer(<em>'m/d/Y'</em>), dataIndex: <em>'lastChange'</em>}
+ ],
+ defaults: {
+ sortable: true,
+ menuDisabled: false,
+ width: 20
+ }
+ }),
+
+ view: <b>new</b> Ext.grid.GroupingView({
+ <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit" ext:member="forceFit" ext:cls="Ext.grid.GridView">forceFit</a>: true,
+ <i>// custom grouping text template to display the number of items per group</i>
+ <a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-groupTextTpl" ext:member="groupTextTpl" ext:cls="Ext.grid.GroupingView">groupTextTpl</a>: <em>'{text} ({[values.rs.length]} {[values.rs.length > 1 ? <em>"Items"</em> : <em>"Item"</em>]})'</em>
+ }),
+
+ frame:true,
+ width: 700,
+ height: 450,
+ collapsible: true,
+ animCollapse: false,
+ title: <em>'Grouping Example'</em>,
+ iconCls: <em>'icon-grid'</em>,
+ renderTo: document.body
});</code></pre></div><div class="hr"></div><a id="Ext.grid.GroupingView-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-autoFill"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-autoFill">autoFill</a></b> : Boolean<div class="mdesc"><div class="short">Defaults to false. Specify true to have the column widths re-proportioned
-when the grid is initially rendered. The ...</div><div class="long">Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned
-when the grid is <b>initially rendered</b>. The
+when the grid is initially rendered. The
+...</div><div class="long">Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned
+when the grid is <b>initially rendered</b>. The
<a href="output/Ext.grid.Column.html#Ext.grid.Column-width" ext:member="width" ext:cls="Ext.grid.Column">initially configured width</a></tt> 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 <b>not</b> be resized to fit the grid width.
See <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit" ext:member="forceFit" ext:cls="Ext.grid.GridView">forceFit</a></tt> also.</div></div></td><td class="msource"><a href="output/Ext.grid.GridView.html#autoFill" ext:member="#autoFill" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-cellSelector"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-cellSelector">cellSelector</a></b> : String<div class="mdesc">The selector used to find cells internally (defaults to <tt>'td.x-grid3-cell'</tt>)</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#cellSelector" ext:member="#cellSelector" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-cellSelectorDepth"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-cellSelectorDepth">cellSelectorDepth</a></b> : Number<div class="mdesc">The number of levels to search for cells in event delegation (defaults to <tt>4</tt>)</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#cellSelectorDepth" ext:member="#cellSelectorDepth" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-columnsText"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-columnsText">columnsText</a></b> : String<div class="mdesc">The text displayed in the 'Columns' menu item (defaults to <tt>'Columns'</tt>)</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#columnsText" ext:member="#columnsText" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-deferEmptyText"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-deferEmptyText">deferEmptyText</a></b> : Boolean<div class="mdesc">True to defer <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-emptyText" ext:member="emptyText" ext:cls="Ext.grid.GridView">emptyText</a></tt> being applied until the store's
-first load (defaults to <tt>true</tt>).</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#deferEmptyText" ext:member="#deferEmptyText" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-emptyGroupText"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-emptyGroupText">emptyGroupText</a></b> : String<div class="mdesc"><div class="short">The text to display when there is an empty group value (defaults to '(None)').
-May also be specified per column, see...</div><div class="long">The text to display when there is an empty group value (defaults to <tt>'(None)'</tt>).\r
+first load (defaults to <tt>true</tt>).</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#deferEmptyText" ext:member="#deferEmptyText" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-emptyGroupText"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-emptyGroupText">emptyGroupText</a></b> : String<div class="mdesc"><div class="short">The text to display when there is an empty group value (defaults to '(None)').
+May also be specified per column, see ...</div><div class="long">The text to display when there is an empty group value (defaults to <tt>'(None)'</tt>).
May also be specified per column, see <a href="output/Ext.grid.Column.html" ext:cls="Ext.grid.Column">Ext.grid.Column</a>.<a href="output/Ext.grid.Column.html#Ext.grid.Column-emptyGroupText" ext:member="emptyGroupText" ext:cls="Ext.grid.Column">emptyGroupText</a>.</div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-emptyText"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-emptyText">emptyText</a></b> : String<div class="mdesc"><div class="short">Default text (html tags are accepted) to display in the grid body when no rows
are available (defaults to ''). This v...</div><div class="long">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 <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-mainBody" ext:member="mainBody" ext:cls="Ext.grid.GridView">mainBody</a></tt>:
at <b>all times</b>. The <a href="output/Ext.grid.Column.html#Ext.grid.Column-width" ext:member="width" ext:cls="Ext.grid.Column">initially configured width</a></tt> 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 <b>will</b> be resized
-to fit the grid width. See <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-autoFill" ext:member="autoFill" ext:cls="Ext.grid.GridView">autoFill</a></tt> also.</div></div></td><td class="msource"><a href="output/Ext.grid.GridView.html#forceFit" ext:member="#forceFit" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupByText"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupByText">groupByText</a></b> : String<div class="mdesc">Text displayed in the grid header menu for grouping by a column\r
-(defaults to 'Group By This Field').</div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupMode"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupMode">groupMode</a></b> : String<div class="mdesc"><div class="short">Indicates how to construct the group identifier. 'value' constructs the id using
-raw value, 'display' constructs the...</div><div class="long">Indicates how to construct the group identifier. <tt>'value'</tt> constructs the id using\r
-raw value, <tt>'display'</tt> constructs the id using the rendered value. Defaults to <tt>'value'</tt>.</div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupRenderer"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupRenderer">groupRenderer</a></b> : Function<div class="mdesc">This property must be configured in the <a href="output/Ext.grid.Column.html" ext:cls="Ext.grid.Column">Ext.grid.Column</a> for\r
-each column.</div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupTextTpl"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupTextTpl">groupTextTpl</a></b> : String<div class="mdesc"><div class="short">The template used to render the group header (defaults to '{text}').
-This is used to format an object which contains...</div><div class="long">The template used to render the group header (defaults to <tt>'{text}'</tt>).\r
-This is used to format an object which contains the following properties:\r
-<div class="mdetail-params"><ul>\r
-<li><b>group</b> : String<p class="sub-desc">The <i>rendered</i> value of the group field.\r
-By default this is the unchanged value of the group field. If a <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRenderer" ext:member="groupRenderer" ext:cls="Ext.grid.Column">groupRenderer</a></b></tt>\r
-is specified, it is the result of a call to that function.</p></li>\r
-<li><b>gvalue</b> : Object<p class="sub-desc">The <i>raw</i> value of the group field.</p></li>\r
-<li><b>text</b> : String<p class="sub-desc">The configured header (as described in <tt><a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-showGroupName" ext:member="showGroupName" ext:cls="Ext.grid.GroupingView">showGroupName</a>)</tt>\r
-if <tt><a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-showGroupName" ext:member="showGroupName" ext:cls="Ext.grid.GroupingView">showGroupName</a></tt> is <tt>true</tt>) plus the <i>rendered</i> group field value.</p></li>\r
-<li><b>groupId</b> : String<p class="sub-desc">A unique, generated ID which is applied to the\r
-View Element which contains the group.</p></li>\r
-<li><b>startRow</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>\r
-<li><b>rs</b> : Array<p class="sub-desc">Contains a single element: The Record providing the data\r
-for the row which caused group change.</p></li>\r
-<li><b>cls</b> : String<p class="sub-desc">The generated class name string to apply to the group header Element.</p></li>\r
-<li><b>style</b> : String<p class="sub-desc">The inline style rules to apply to the group header Element.</p></li>\r
-</ul></div></p>\r
-See <a href="output/Ext.XTemplate.html" ext:cls="Ext.XTemplate">Ext.XTemplate</a> for information on how to format data using a template. Possible usage:<pre><code><b>var</b> grid = <b>new</b> Ext.grid.GridPanel({\r
- ...\r
- view: <b>new</b> Ext.grid.GroupingView({\r
- groupTextTpl: <em>'{text} ({[values.rs.length]} {[values.rs.length > 1 ? <em>"Items"</em> : <em>"Item"</em>]})'</em>\r
- }),\r
-});</code></pre></div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-headersDisabled"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-headersDisabled">headersDisabled</a></b> : Boolean<div class="mdesc"><div class="short">True to disable the grid column headers (defaults to false).
+to fit the grid width. See <tt><a href="output/Ext.grid.GridView.html#Ext.grid.GridView-autoFill" ext:member="autoFill" ext:cls="Ext.grid.GridView">autoFill</a></tt> also.</div></div></td><td class="msource"><a href="output/Ext.grid.GridView.html#forceFit" ext:member="#forceFit" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupByText"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupByText">groupByText</a></b> : String<div class="mdesc">Text displayed in the grid header menu for grouping by a column
+(defaults to 'Group By This Field').</div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupMode"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupMode">groupMode</a></b> : String<div class="mdesc"><div class="short">Indicates how to construct the group identifier. 'value' constructs the id using
+raw value, 'display' constructs the ...</div><div class="long">Indicates how to construct the group identifier. <tt>'value'</tt> constructs the id using
+raw value, <tt>'display'</tt> constructs the id using the rendered value. Defaults to <tt>'value'</tt>.</div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupRenderer"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupRenderer">groupRenderer</a></b> : Function<div class="mdesc">This property must be configured in the <a href="output/Ext.grid.Column.html" ext:cls="Ext.grid.Column">Ext.grid.Column</a> for
+each column.</div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupTextTpl"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-groupTextTpl">groupTextTpl</a></b> : String<div class="mdesc"><div class="short">The template used to render the group header (defaults to '{text}').
+This is used to format an object which contains ...</div><div class="long">The template used to render the group header (defaults to <tt>'{text}'</tt>).
+This is used to format an object which contains the following properties:
+<div class="mdetail-params"><ul>
+<li><b>group</b> : String<p class="sub-desc">The <i>rendered</i> value of the group field.
+By default this is the unchanged value of the group field. If a <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupRenderer" ext:member="groupRenderer" ext:cls="Ext.grid.Column">groupRenderer</a></b></tt>
+is specified, it is the result of a call to that function.</p></li>
+<li><b>gvalue</b> : Object<p class="sub-desc">The <i>raw</i> value of the group field.</p></li>
+<li><b>text</b> : String<p class="sub-desc">The configured header (as described in <tt><a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-showGroupName" ext:member="showGroupName" ext:cls="Ext.grid.GroupingView">showGroupName</a>)</tt>
+if <tt><a href="output/Ext.grid.GroupingView.html#Ext.grid.GroupingView-showGroupName" ext:member="showGroupName" ext:cls="Ext.grid.GroupingView">showGroupName</a></tt> is <tt>true</tt>) plus the <i>rendered</i> group field value.</p></li>
+<li><b>groupId</b> : String<p class="sub-desc">A unique, generated ID which is applied to the
+View Element which contains the group.</p></li>
+<li><b>startRow</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
+<li><b>rs</b> : Array<p class="sub-desc">Contains a single element: The Record providing the data
+for the row which caused group change.</p></li>
+<li><b>cls</b> : String<p class="sub-desc">The generated class name string to apply to the group header Element.</p></li>
+<li><b>style</b> : String<p class="sub-desc">The inline style rules to apply to the group header Element.</p></li>
+</ul></div></p>
+See <a href="output/Ext.XTemplate.html" ext:cls="Ext.XTemplate">Ext.XTemplate</a> for information on how to format data using a template. Possible usage:<pre><code><b>var</b> grid = <b>new</b> Ext.grid.GridPanel({
+ ...
+ view: <b>new</b> Ext.grid.GroupingView({
+ groupTextTpl: <em>'{text} ({[values.rs.length]} {[values.rs.length > 1 ? <em>"Items"</em> : <em>"Item"</em>]})'</em>
+ }),
+});</code></pre></div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-headersDisabled"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-headersDisabled">headersDisabled</a></b> : Boolean<div class="mdesc"><div class="short">True to disable the grid column headers (defaults to false).
Use the ColumnModel menuDisabled
-config to disable the ...</div><div class="long">True to disable the grid column headers (defaults to <tt>false</tt>).
+config to disable the m...</div><div class="long">True to disable the grid column headers (defaults to <tt>false</tt>).
Use the <a href="output/Ext.grid.ColumnModel.html" ext:cls="Ext.grid.ColumnModel">ColumnModel</a> <tt><a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-menuDisabled" ext:member="menuDisabled" ext:cls="Ext.grid.ColumnModel">menuDisabled</a></tt>
config to disable the <i>menu</i> for individual columns. While this config is true the
following will be disabled:<div class="mdetail-params"><ul>
facets (like text) use something like:
<pre><code>.x-grid3-row-selected .x-grid3-cell-inner {
color: #FFCC00;
- }</code></pre></div></div></td><td class="msource"><a href="output/Ext.grid.GridView.html#selectedRowClass" ext:member="#selectedRowClass" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-showGroupName"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-showGroupName">showGroupName</a></b> : Boolean<div class="mdesc"><div class="short">If true will display a prefix plus a ': ' before the group field value
-in the group header line. The prefix will co...</div><div class="long">If <tt>true</tt> will display a prefix plus a ': ' before the group field value\r
-in the group header line. The prefix will consist of the <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName" ext:member="groupName" ext:cls="Ext.grid.Column">groupName</a></b></tt>\r
-(or the configured <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-header" ext:member="header" ext:cls="Ext.grid.Column">header</a></b></tt> if not provided) configured in the\r
-<a href="output/Ext.grid.Column.html" ext:cls="Ext.grid.Column">Ext.grid.Column</a> for each set of grouped rows (defaults to <tt>true</tt>).</div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-showGroupsText"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-showGroupsText">showGroupsText</a></b> : String<div class="mdesc">Text displayed in the grid header for enabling/disabling grouping\r
+ }</code></pre></div></div></td><td class="msource"><a href="output/Ext.grid.GridView.html#selectedRowClass" ext:member="#selectedRowClass" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-showGroupName"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-showGroupName">showGroupName</a></b> : Boolean<div class="mdesc"><div class="short">If true will display a prefix plus a ': ' before the group field value
+in the group header line. The prefix will con...</div><div class="long">If <tt>true</tt> will display a prefix plus a ': ' before the group field value
+in the group header line. The prefix will consist of the <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-groupName" ext:member="groupName" ext:cls="Ext.grid.Column">groupName</a></b></tt>
+(or the configured <tt><b><a href="output/Ext.grid.Column.html#Ext.grid.Column-header" ext:member="header" ext:cls="Ext.grid.Column">header</a></b></tt> if not provided) configured in the
+<a href="output/Ext.grid.Column.html" ext:cls="Ext.grid.Column">Ext.grid.Column</a> for each set of grouped rows (defaults to <tt>true</tt>).</div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-showGroupsText"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-showGroupsText">showGroupsText</a></b> : String<div class="mdesc">Text displayed in the grid header for enabling/disabling grouping
(defaults to 'Show in Groups').</div></td><td class="msource">GroupingView</td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-sortAscText"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-sortAscText">sortAscText</a></b> : String<div class="mdesc">The text displayed in the 'Sort Ascending' menu item (defaults to <tt>'Sort Ascending'</tt>)</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#sortAscText" ext:member="#sortAscText" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-sortClasses"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-sortClasses">sortClasses</a></b> : Array<div class="mdesc">The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#sortClasses" ext:member="#sortClasses" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-sortDescText"></a><b><a href="source/GridView.html#cfg-Ext.grid.GridView-sortDescText">sortDescText</a></b> : String<div class="mdesc">The text displayed in the 'Sort Descending' menu item (defaults to <tt>'Sort Descending'</tt>)</div></td><td class="msource"><a href="output/Ext.grid.GridView.html#sortDescText" ext:member="#sortDescText" ext:cls="Ext.grid.GridView">GridView</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-startCollapsed"></a><b><a href="source/GroupingView.html#cfg-Ext.grid.GroupingView-startCollapsed">startCollapsed</a></b> : Boolean<div class="mdesc"><tt>true</tt> to start all groups collapsed (defaults to <tt>false</tt>)</div></td><td class="msource">GroupingView</td></tr></tbody></table><a id="Ext.grid.GroupingView-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-dragZone"></a><b><a href="source/GridView.html#prop-Ext.grid.GridView-dragZone">dragZone</a></b> : Ext.grid.GridDragZone<div class="mdesc"><div class="short">A customized implementation of a DragZone which provides default implementations
of the template methods of DragZone ...</div><div class="long"><p>A customized implementation of a <a href="output/Ext.dd.DragZone.html" ext:cls="Ext.dd.DragZone">DragZone</a> which provides default implementations
of the template methods of DragZone to enable dragging of the selected rows of a GridPanel.
:
void<div class="mdesc"><div class="short">Collapses all grouped rows.</div><div class="long">Collapses all grouped rows.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-enableBubble"></a><b><a href="source/Observable-more.html#method-Ext.util.Observable-enableBubble">enableBubble</a></b>( <code>String/Array events</code> )
:
- void<div class="mdesc"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
-this.getBubbleTarget() if present...</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling\r
-<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>\r
-<p>This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="output/Ext.Component.getBubbleTarget.html" ext:cls="Ext.Component.getBubbleTarget">Ext.Component.getBubbleTarget</a>. The default\r
-implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\r
-access the required target more quickly.</p>\r
-<p>Example:</p><pre><code>Ext.override(Ext.form.Field, {\r
- <i>// Add functionality to Field's initComponent to enable the change event to bubble\r</i>
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(<b>function</b>() {\r
- this.enableBubble(<em>'change'</em>);\r
- }),\r
-\r
- <i>// We know that we want Field's events to bubble directly to the FormPanel.\r</i>
- getBubbleTarget : <b>function</b>() {\r
- <b>if</b> (!this.formPanel) {\r
- this.formPanel = this.findParentByType(<em>'form'</em>);\r
- }\r
- <b>return</b> this.formPanel;\r
- }\r
-});\r
-\r
-<b>var</b> myForm = <b>new</b> Ext.formPanel({\r
- title: <em>'User Details'</em>,\r
- items: [{\r
- ...\r
- }],\r
- listeners: {\r
- change: <b>function</b>() {\r
- <i>// Title goes red <b>if</b> form has been modified.\r</i>
- myForm.header.setStyle(<em>'color'</em>, <em>'red'</em>);\r
- }\r
- }\r
+ void<div class="mdesc"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present....</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling
+<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>
+<p>This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="output/Ext.Component.getBubbleTarget.html" ext:cls="Ext.Component.getBubbleTarget">Ext.Component.getBubbleTarget</a>. 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.</p>
+<p>Example:</p><pre><code>Ext.override(Ext.form.Field, {
+ <i>// Add functionality to Field's initComponent to enable the change event to bubble</i>
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(<b>function</b>() {
+ this.enableBubble(<em>'change'</em>);
+ }),
+
+ <i>// We know that we want Field's events to bubble directly to the FormPanel.</i>
+ getBubbleTarget : <b>function</b>() {
+ <b>if</b> (!this.formPanel) {
+ this.formPanel = this.findParentByType(<em>'form'</em>);
+ }
+ <b>return</b> this.formPanel;
+ }
+});
+
+<b>var</b> myForm = <b>new</b> Ext.formPanel({
+ title: <em>'User Details'</em>,
+ items: [{
+ ...
+ }],
+ listeners: {
+ change: <b>function</b>() {
+ <i>// Title goes red <b>if</b> form has been modified.</i>
+ myForm.header.setStyle(<em>'color'</em>, <em>'red'</em>);
+ }
+ }
});</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>events</code> : String/Array<div class="sub-desc">The event name to bubble, or an Array of event names.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#enableBubble" ext:member="#enableBubble" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-expandAllGroups"></a><b><a href="source/GroupingView.html#method-Ext.grid.GroupingView-expandAllGroups">expandAllGroups</a></b>()
:
void<div class="mdesc"><div class="short">Expands all grouped rows.</div><div class="long">Expands all grouped rows.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.grid.GridView-findCellIndex"></a><b><a href="source/GridView.html#method-Ext.grid.GridView-findCellIndex">findCellIndex</a></b>( <code>HTMLElement el</code> )
git.ithinksw.org / extjs.git / blobdiff