-<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
-});</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\r
-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
+<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