Go to most recent revision | Blame | Last modification | View Log | RSS feed
<div class="body-wrap"><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 ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a><img src="resources/elbow-end.gif"/><a ext:cls="Ext.grid.GridView" ext:member="" href="output/Ext.grid.GridView.html">GridView</a><img src="resources/elbow-end.gif"/>GroupingView</pre></div><h1>Class Ext.grid.GroupingView</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/widgets/grid/GroupingView.js" target="_blank">GroupingView.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info">GroupingView</td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.grid.GridView" ext:member="" href="output/Ext.grid.GridView.html">GridView</a></td></tr></table><div class="description">Adds the ability for single level grouping to the grid.<pre><code>var grid = <b>new</b> Ext.grid.GridPanel({<i>// A groupingStore is required <b>for</b> a GroupingView</i>store: <b>new</b> Ext.data.GroupingStore({reader: reader,data: xg.dummyData,sortInfo:{field: <em>'company'</em>, direction: <em>"ASC"</em>},groupField:<em>'industry'</em>}),columns: [{id:<em>'company'</em>,header: <em>"Company"</em>, width: 60, sortable: true, dataIndex: <em>'company'</em>},{header: <em>"Price"</em>, width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: <em>'price'</em>},{header: <em>"Change"</em>, width: 20, sortable: true, dataIndex: <em>'change'</em>, renderer: Ext.util.Format.usMoney},{header: <em>"Industry"</em>, width: 20, sortable: true, dataIndex: <em>'industry'</em>},{header: <em>"Last Updated"</em>, width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer(<em>'m/d/Y'</em>), dataIndex: <em>'lastChange'</em>}],view: <b>new</b> Ext.grid.GroupingView({forceFit:true,<i>// custom grouping text template to display the number of items per group</i>groupTextTpl: <em>'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'</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"><tr><th class="sig-header" colspan="2">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row inherited"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-autoFill"></a><b>autoFill</b> : Boolean <div class="mdesc">True to auto expand the columns to fit the grid <b>when the grid is created</b>. </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#autoFill" href="output/Ext.grid.GridView.html#autoFill">GridView</a></td></tr><tr class="config-row alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-emptyGroupText"></a><b>emptyGroupText</b> : String <div class="mdesc">The text to display when there is an empty group value </div></td><td class="msource">GroupingView</td></tr><tr class="config-row inherited"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-emptyText"></a><b>emptyText</b> : String <div class="mdesc">Default text to display in the grid body when no rows are available (defaults to ''). </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#emptyText" href="output/Ext.grid.GridView.html#emptyText">GridView</a></td></tr><tr class="config-row alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-enableGrouping"></a><b>enableGrouping</b> : Boolean <div class="mdesc">False to disable grouping functionality (defaults to true) </div></td><td class="msource">GroupingView</td></tr><tr class="config-row"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-enableGroupingMenu"></a><b>enableGroupingMenu</b> : Boolean <div class="mdesc">True to enable the grouping control in the column menu </div></td><td class="msource">GroupingView</td></tr><tr class="config-row alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-enableNoGroups"></a><b>enableNoGroups</b> : Boolean <div class="mdesc">True to allow the user to turn off grouping </div></td><td class="msource">GroupingView</td></tr><tr class="config-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-enableRowBody"></a><b>enableRowBody</b> : Boolean <div class="mdesc"><div class="short">True to add a second TR element per row that can be used to provide a row body that spans beneath the data row. Use t...</div><div class="long">True to add a second TR element per row that can be used to provide a row body that spans beneath the data row. Use the <a ext:cls="Ext.grid.GridView" ext:member="getRowClass" href="output/Ext.grid.GridView.html#getRowClass">getRowClass</a> method's rowParams config to customize the row body. </div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#enableRowBody" href="output/Ext.grid.GridView.html#enableRowBody">GridView</a></td></tr><tr class="config-row inherited alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-forceFit"></a><b>forceFit</b> : Boolean <div class="mdesc">True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#forceFit" href="output/Ext.grid.GridView.html#forceFit">GridView</a></td></tr><tr class="config-row"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupByText"></a><b>groupByText</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 alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupRenderer"></a><b>groupRenderer</b> : Function <div class="mdesc"><div class="short">The function used to format the grouping field value for display in the group header. Should return a string value. T...</div><div class="long">The function used to format the grouping field value for display in the group header. Should return a string value. This takes the following parameters: <div class="mdetail-params"><ul> <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li> <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li> <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data for the row which caused group change.</p></li> <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li> <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li> <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li> </ul></div></p> </div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-groupTextTpl"></a><b>groupTextTpl</b> : String <div class="mdesc"><div class="short">The template used to render the group header. This is used to format an object which contains the following propertie...</div><div class="long">The template used to render the group header. 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 <a ext:cls="Ext.grid.GroupingView" ext:member="groupRenderer" href="output/Ext.grid.GroupingView.html#groupRenderer">groupRenderer</a> is specified, it is the result of a call to that.</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 <a ext:cls="Ext.grid.GroupingView" ext:member="header" href="output/Ext.grid.GroupingView.html#header">header</a> (If <a ext:cls="Ext.grid.GroupingView" ext:member="showGroupName" href="output/Ext.grid.GroupingView.html#showGroupName">showGroupName</a> is true) 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 ext:cls="Ext.XTemplate" href="output/Ext.XTemplate.html">Ext.XTemplate</a> for information on how to format data using a template. </div></div></td><td class="msource">GroupingView</td></tr><tr class="config-row alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-header"></a><b>header</b> : String <div class="mdesc">The text with which to prefix the group field value in the group header line. </div></td><td class="msource">GroupingView</td></tr><tr class="config-row"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-hideGroupedColumn"></a><b>hideGroupedColumn</b> : Boolean <div class="mdesc">True to hide the column that is currently grouped </div></td><td class="msource">GroupingView</td></tr><tr class="config-row alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-ignoreAdd"></a><b>ignoreAdd</b> : Boolean <div class="mdesc">True to skip refreshing the view when new rows are added (defaults to false) </div></td><td class="msource">GroupingView</td></tr><tr class="config-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-listeners"></a><b>listeners</b> : Object <div class="mdesc"><div class="short">A config object containing one or more event handlers to be added to this object during initialization. This should b...</div><div class="long">A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the <a ext:cls="Ext.util.Observable" ext:member="addListener" href="output/Ext.util.Observable.html#addListener">addListener</a> example for attaching multiple handlers at once. </div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#listeners" href="output/Ext.util.Observable.html#listeners">Observable</a></td></tr><tr class="config-row alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-showGroupName"></a><b>showGroupName</b> : Boolean <div class="mdesc">True to display the name for each set of grouped rows (defaults to true) </div></td><td class="msource">GroupingView</td></tr><tr class="config-row"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-showGroupsText"></a><b>showGroupsText</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 alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-startCollapsed"></a><b>startCollapsed</b> : Boolean <div class="mdesc">True to start all groups collapsed </div></td><td class="msource">GroupingView</td></tr></table><a id="Ext.grid.GroupingView-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tr><th class="sig-header" colspan="2">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row inherited"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-columnsText"></a><b>columnsText</b> : String <div class="mdesc">The text displayed in the "Columns" menu item </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#columnsText" href="output/Ext.grid.GridView.html#columnsText">GridView</a></td></tr><tr class="property-row inherited alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-scrollOffset"></a><b>scrollOffset</b> : Number <div class="mdesc">The amount of space to reserve for the scrollbar (defaults to 19 pixels) </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#scrollOffset" href="output/Ext.grid.GridView.html#scrollOffset">GridView</a></td></tr><tr class="property-row inherited"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-sortAscText"></a><b>sortAscText</b> : String <div class="mdesc">The text displayed in the "Sort Ascending" menu item </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#sortAscText" href="output/Ext.grid.GridView.html#sortAscText">GridView</a></td></tr><tr class="property-row inherited alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-sortClasses"></a><b>sortClasses</b> : Array <div class="mdesc">The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"]) </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#sortClasses" href="output/Ext.grid.GridView.html#sortClasses">GridView</a></td></tr><tr class="property-row inherited"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-sortDescText"></a><b>sortDescText</b> : String <div class="mdesc">The text displayed in the "Sort Descending" menu item </div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#sortDescText" href="output/Ext.grid.GridView.html#sortDescText">GridView</a></td></tr></table><a id="Ext.grid.GroupingView-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tr><th class="sig-header" colspan="2">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-GroupingView"></a><b>GroupingView</b>( <code>Object config</code> ) <div class="mdesc"><div class="short"></div><div class="long"><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object<div class="sub-desc"></div></li> </ul><strong>Returns:</strong><ul><li><code></code></li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-addEvents"></a><b>addEvents</b>( <code>Object object</code> ) : void <div class="mdesc"><div class="short">Used to define events on this Observable</div><div class="long">Used to define events on this Observable <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="output/Ext.util.Observable.html#addEvents">Observable</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-addListener"></a><b>addListener</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : void <div class="mdesc"><div class="short">Appends an event handler to this component</div><div class="long">Appends an event handler to this component <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handlerfunction. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configurationproperties. This may contain any of the following properties:<ul><li><b>scope</b> : Object<p class="sub-desc">The scope in which to execute the handler function. The handler function's "this" context.</p></li><li><b>delay</b> : Number<p class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</p></li><li><b>single</b> : Boolean<p class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</p></li><li><b>buffer</b> : Number<p class="sub-desc">Causes the handler to be scheduled to run in an <a ext:cls="Ext.util.DelayedTask" href="output/Ext.util.DelayedTask.html">Ext.util.DelayedTask</a> delayedby the specified number of milliseconds. If the event fires again within that time, the originalhandler is <em>not</em> invoked, but the new handler is scheduled in its place.</p></li></ul><br><p><b>Combining Options</b><br>Using the options argument, it is possible to combine different types of listeners:<br><br>A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<pre><code>el.on(<em>'click'</em>, <b>this</b>.onClick, <b>this</b>, {single: true,delay: 100,forumId: 4});</code></pre><p><b>Attaching multiple handlers in 1 call</b><br>The method also allows for a single argument to be passed which is a config object containing propertieswhich specify multiple handlers.<p><pre><code>foo.on({<em>'click'</em> : {fn: <b>this</b>.onClick,scope: <b>this</b>,delay: 100},<em>'mouseover'</em> : {fn: <b>this</b>.onMouseOver,scope: <b>this</b>},<em>'mouseout'</em> : {fn: <b>this</b>.onMouseOut,scope: <b>this</b>}});</code></pre><p>Or a shorthand syntax:<br><pre><code>foo.on({<em>'click'</em> : <b>this</b>.onClick,<em>'mouseover'</em> : <b>this</b>.onMouseOver,<em>'mouseout'</em> : <b>this</b>.onMouseOut,scope: <b>this</b>});</code></pre></div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addListener" href="output/Ext.util.Observable.html#addListener">Observable</a></td></tr><tr class="method-row alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-collapseAllGroups"></a><b>collapseAllGroups</b>() : 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><code>void</code></li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-expandAllGroups"></a><b>expandAllGroups</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><code>void</code></li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-fireEvent"></a><b>fireEvent</b>( <code>String eventName</code>, <code>Object... args</code> ) : Boolean <div class="mdesc"><div class="short">Fires the specified event with the passed parameters (minus the event name).</div><div class="long">Fires the specified event with the passed parameters (minus the event name). <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc"></div></li><li><code>args</code> : Object...<div class="sub-desc">Variable number of parameters are passed to handlers</div></li> </ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true</div></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="output/Ext.util.Observable.html#fireEvent">Observable</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-focusCell"></a><b>focusCell</b>( <code>Number row</code>, <code>Number col</code> ) : void <div class="mdesc"><div class="short">Focuses the specified cell.</div><div class="long">Focuses the specified cell. <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>row</code> : Number<div class="sub-desc">The row index</div></li><li><code>col</code> : Number<div class="sub-desc">The column index</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#focusCell" href="output/Ext.grid.GridView.html#focusCell">GridView</a></td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-focusRow"></a><b>focusRow</b>( <code>Number row</code> ) : void <div class="mdesc"><div class="short">Focuses the specified row.</div><div class="long">Focuses the specified row. <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>row</code> : Number<div class="sub-desc">The row index</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#focusRow" href="output/Ext.grid.GridView.html#focusRow">GridView</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-getCell"></a><b>getCell</b>( <code>Number row</code>, <code>Number col</code> ) : HtmlElement <div class="mdesc"><div class="short">Returns the grid's <TD> HtmlElement at the specified coordinates.</div><div class="long">Returns the grid's <TD> HtmlElement at the specified coordinates. <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>row</code> : Number<div class="sub-desc">The row index in which to find the cell.</div></li><li><code>col</code> : Number<div class="sub-desc">The column index of the cell.</div></li> </ul><strong>Returns:</strong><ul><li><code>HtmlElement</code><div class="sub-desc">The <TD> at the specified coordinates.</div></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#getCell" href="output/Ext.grid.GridView.html#getCell">GridView</a></td></tr><tr class="method-row alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-getGroupId"></a><b>getGroupId</b>( <code>String value</code> ) : String <div class="mdesc"><div class="short">Dynamically tries to determine the groupId of a specific value</div><div class="long">Dynamically tries to determine the groupId of a specific value <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>value</code> : String<div class="sub-desc"></div></li> </ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The group id</div></li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-getHeaderCell"></a><b>getHeaderCell</b>( <code>Number index</code> ) : HtmlElement <div class="mdesc"><div class="short">Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index.</div><div class="long">Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index. <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>index</code> : Number<div class="sub-desc">The column index</div></li> </ul><strong>Returns:</strong><ul><li><code>HtmlElement</code><div class="sub-desc">The <TD> element.</div></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#getHeaderCell" href="output/Ext.grid.GridView.html#getHeaderCell">GridView</a></td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-getRow"></a><b>getRow</b>( <code>Number index</code> ) : HtmlElement <div class="mdesc"><div class="short">Return the <TR> HtmlElement which represents a Grid row for the specified index.</div><div class="long">Return the <TR> HtmlElement which represents a Grid row for the specified index. <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>index</code> : Number<div class="sub-desc">The row index</div></li> </ul><strong>Returns:</strong><ul><li><code>HtmlElement</code><div class="sub-desc">The <TR> element.</div></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#getRow" href="output/Ext.grid.GridView.html#getRow">GridView</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-getRowClass"></a><b>getRowClass</b>( <code>Record record</code>, <code>Number index</code>, <code>Object rowParams</code>, <code>Store store</code> ) : String <div class="mdesc"><div class="short">Override this function to apply custom CSS classes to rows during rendering. You can also supply customparameters t...</div><div class="long">Override this function to apply custom CSS classes to rows during rendering. You can also supply customparameters to the row template for the current row to customize how it is rendered using the <b>rowParams</b>parameter. This function should return the CSS class name (or empty string '' for none) that will be addedto the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string(e.g., 'my-class another-class'). <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>record</code> : Record<div class="sub-desc">The <a ext:cls="Ext.data.Record" href="output/Ext.data.Record.html">Ext.data.Record</a> corresponding to the current row</div></li><li><code>index</code> : Number<div class="sub-desc">The row index</div></li><li><code>rowParams</code> : Object<div class="sub-desc">A config object that is passed to the row template during rendering that allowscustomization of various aspects of a body row, if applicable. Note that this object will only be applied if<a ext:cls="Ext.grid.GridView" ext:member="enableRowBody" href="output/Ext.grid.GridView.html#enableRowBody">enableRowBody</a> = true, otherwise it will be ignored. The object may contain any of these properties:<ul><li><code>body</code> : String <div class="sub-desc">An HTML fragment to be rendered as the cell's body content (defaults to '').</div></li><li><code>bodyStyle</code> : String <div class="sub-desc">A CSS style string that will be applied to the row's TR style attribute (defaults to '').</div></li><li><code>cols</code> : Number <div class="sub-desc">The column count to apply to the body row's TD colspan attribute (defaults to the currentcolumn count of the grid).</div></li></ul></div></li><li><code>store</code> : Store<div class="sub-desc">The <a ext:cls="Ext.data.Store" href="output/Ext.data.Store.html">Ext.data.Store</a> this grid is bound to</div></li> </ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">a CSS class name to add to the row.</div></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#getRowClass" href="output/Ext.grid.GridView.html#getRowClass">GridView</a></td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-hasListener"></a><b>hasListener</b>( <code>String eventName</code> ) : Boolean <div class="mdesc"><div class="short">Checks to see if this object has any listeners for a specified event</div><div class="long">Checks to see if this object has any listeners for a specified event <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li> </ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="output/Ext.util.Observable.html#hasListener">Observable</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-on"></a><b>on</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : void <div class="mdesc"><div class="short">Appends an event handler to this element (shorthand for addListener)</div><div class="long">Appends an event handler to this element (shorthand for addListener) <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handlerfunction. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional)</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#on" href="output/Ext.util.Observable.html#on">Observable</a></td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-purgeListeners"></a><b>purgeListeners</b>() : void <div class="mdesc"><div class="short">Removes all listeners for this object</div><div class="long">Removes all listeners for this object <div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="output/Ext.util.Observable.html#purgeListeners">Observable</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-refresh"></a><b>refresh</b>( <span class="optional" title="Optional">[<code>Boolean headersToo</code>]</span> ) : void <div class="mdesc"><div class="short">Refreshs the grid UI</div><div class="long">Refreshs the grid UI <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>headersToo</code> : Boolean<div class="sub-desc">(optional) True to also refresh the headers</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#refresh" href="output/Ext.grid.GridView.html#refresh">GridView</a></td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-removeListener"></a><b>removeListener</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span> ) : void <div class="mdesc"><div class="short">Removes a listener</div><div class="long">Removes a listener <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="output/Ext.util.Observable.html#removeListener">Observable</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-resumeEvents"></a><b>resumeEvents</b>() : void <div class="mdesc"><div class="short">Resume firing events. (see <a ext:cls="Ext.util.Observable" ext:member="suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">suspendEvents</a>)</div><div class="long">Resume firing events. (see <a ext:cls="Ext.util.Observable" ext:member="suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">suspendEvents</a>) <div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">Observable</a></td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-scrollToTop"></a><b>scrollToTop</b>() : void <div class="mdesc"><div class="short">Scrolls the grid to the top</div><div class="long">Scrolls the grid to the top <div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#scrollToTop" href="output/Ext.grid.GridView.html#scrollToTop">GridView</a></td></tr><tr class="method-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-suspendEvents"></a><b>suspendEvents</b>() : void <div class="mdesc"><div class="short">Suspend the firing of all events. (see <a ext:cls="Ext.util.Observable" ext:member="resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">resumeEvents</a>)</div><div class="long">Suspend the firing of all events. (see <a ext:cls="Ext.util.Observable" ext:member="resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">resumeEvents</a>) <div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">Observable</a></td></tr><tr class="method-row alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-toggleAllGroups"></a><b>toggleAllGroups</b>( <span class="optional" title="Optional">[<code>Boolean expanded</code>]</span> ) : void <div class="mdesc"><div class="short">Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.</div><div class="long">Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed. <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>expanded</code> : Boolean<div class="sub-desc">(optional)</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-toggleGroup"></a><b>toggleGroup</b>( <code>String groupId</code>, <span class="optional" title="Optional">[<code>Boolean expanded</code>]</span> ) : void <div class="mdesc"><div class="short">Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.</div><div class="long">Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed. <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>groupId</code> : String<div class="sub-desc">The groupId assigned to the group (see getGroupId)</div></li><li><code>expanded</code> : Boolean<div class="sub-desc">(optional)</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource">GroupingView</td></tr><tr class="method-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-un"></a><b>un</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span> ) : void <div class="mdesc"><div class="short">Removes a listener (shorthand for removeListener)</div><div class="long">Removes a listener (shorthand for removeListener) <div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li> </ul><strong>Returns:</strong><ul><li><code>void</code></li></ul></div></div></div></td><td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#un" href="output/Ext.util.Observable.html#un">Observable</a></td></tr></table><a id="Ext.grid.GroupingView-events"></a><h2>Public Events</h2><table cellspacing="0" class="member-table"><tr><th class="sig-header" colspan="2">Event</th><th class="msource-header">Defined By</th></tr><tr class="event-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-beforerefresh"></a><b>beforerefresh</b> : ( <code>Ext.grid.GridView view</code> ) <div class="mdesc"><div class="short">Internal UI Event. Fired before the view is refreshed.</div><div class="long">Internal UI Event. Fired before the view is refreshed. <div class="mdetail-params"><strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong><ul><li><code>view</code> : Ext.grid.GridView<div class="sub-desc"></div></li> </ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#event-beforerefresh" href="output/Ext.grid.GridView.html#event-beforerefresh">GridView</a></td></tr><tr class="event-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-beforerowremoved"></a><b>beforerowremoved</b> : ( <code>Ext.grid.GridView view</code>, <code>Number rowIndex</code>, <code>Ext.data.Record record</code> ) <div class="mdesc"><div class="short">Internal UI Event. Fired before a row is removed.</div><div class="long">Internal UI Event. Fired before a row is removed. <div class="mdetail-params"><strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong><ul><li><code>view</code> : Ext.grid.GridView<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The index of the row to be removed.</div></li><li><code>record</code> : Ext.data.Record<div class="sub-desc">The Record to be removed</div></li> </ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#event-beforerowremoved" href="output/Ext.grid.GridView.html#event-beforerowremoved">GridView</a></td></tr><tr class="event-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-beforerowsinserted"></a><b>beforerowsinserted</b> : ( <code>Ext.grid.GridView view</code>, <code>Number firstRow</code>, <code>Number lastRow</code> ) <div class="mdesc"><div class="short">Internal UI Event. Fired before rows are inserted.</div><div class="long">Internal UI Event. Fired before rows are inserted. <div class="mdetail-params"><strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong><ul><li><code>view</code> : Ext.grid.GridView<div class="sub-desc"></div></li><li><code>firstRow</code> : Number<div class="sub-desc">The index of the first row to be inserted.</div></li><li><code>lastRow</code> : Number<div class="sub-desc">The index of the last row to be inserted.</div></li> </ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#event-beforerowsinserted" href="output/Ext.grid.GridView.html#event-beforerowsinserted">GridView</a></td></tr><tr class="event-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-refresh"></a><b>refresh</b> : ( <code>Ext.grid.GridView view</code> ) <div class="mdesc"><div class="short">Internal UI Event. Fired after the GridView's body has been refreshed.</div><div class="long">Internal UI Event. Fired after the GridView's body has been refreshed. <div class="mdetail-params"><strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong><ul><li><code>view</code> : Ext.grid.GridView<div class="sub-desc"></div></li> </ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#event-refresh" href="output/Ext.grid.GridView.html#event-refresh">GridView</a></td></tr><tr class="event-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-rowremoved"></a><b>rowremoved</b> : ( <code>Ext.grid.GridView view</code>, <code>Number rowIndex</code>, <code>Ext.data.Record record</code> ) <div class="mdesc"><div class="short">Internal UI Event. Fired after a row is removed.</div><div class="long">Internal UI Event. Fired after a row is removed. <div class="mdetail-params"><strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong><ul><li><code>view</code> : Ext.grid.GridView<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The index of the row that was removed.</div></li><li><code>record</code> : Ext.data.Record<div class="sub-desc">The Record that was removed</div></li> </ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#event-rowremoved" href="output/Ext.grid.GridView.html#event-rowremoved">GridView</a></td></tr><tr class="event-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-rowsinserted"></a><b>rowsinserted</b> : ( <code>Ext.grid.GridView view</code>, <code>Number firstRow</code>, <code>Number lastRow</code> ) <div class="mdesc"><div class="short">Internal UI Event. Fired after rows are inserted.</div><div class="long">Internal UI Event. Fired after rows are inserted. <div class="mdetail-params"><strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong><ul><li><code>view</code> : Ext.grid.GridView<div class="sub-desc"></div></li><li><code>firstRow</code> : Number<div class="sub-desc">The index of the first inserted.</div></li><li><code>lastRow</code> : Number<div class="sub-desc">The index of the last row inserted.</div></li> </ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#event-rowsinserted" href="output/Ext.grid.GridView.html#event-rowsinserted">GridView</a></td></tr><tr class="event-row inherited expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.grid.GroupingView-rowupdated"></a><b>rowupdated</b> : ( <code>Ext.grid.GridView view</code>, <code>Number firstRow</code>, <code>Ext.data.record record</code> ) <div class="mdesc"><div class="short">Internal UI Event. Fired after a row has been updated.</div><div class="long">Internal UI Event. Fired after a row has been updated. <div class="mdetail-params"><strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong><ul><li><code>view</code> : Ext.grid.GridView<div class="sub-desc"></div></li><li><code>firstRow</code> : Number<div class="sub-desc">The index of the row updated.</div></li><li><code>record</code> : Ext.data.record<div class="sub-desc">The Record backing the row updated.</div></li> </ul></div></div></div></td><td class="msource"><a ext:cls="Ext.grid.GridView" ext:member="#event-rowupdated" href="output/Ext.grid.GridView.html#event-rowupdated">GridView</a></td></tr></table></div>