-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.grid.GridPanel-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.grid.GridPanel-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.grid.GridPanel-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.grid.GridPanel-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.grid.GridPanel"><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.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Panel.html" ext:member="" ext:cls="Ext.Panel">Panel</a> <img src="resources/elbow-end.gif">GridPanel</pre></div><h1>Class <a href="source/GridPanel.html#cls-Ext.grid.GridPanel">Ext.grid.GridPanel</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">GridPanel.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/GridPanel.html#cls-Ext.grid.GridPanel">GridPanel</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.grid.EditorGridPanel.html" ext:cls="Ext.grid.EditorGridPanel">EditorGridPanel</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Panel.html" ext:cls="Ext.Panel" ext:member="">Panel</a></td></tr><tr><td class="label">xtype:</td><td class="hd-info">grid</td></tr></table><div class="description"><p>This class represents the primary interface of a component based grid control to represent data\r
-in a tabular format of rows and columns. The GridPanel is composed of the following:</p>\r
-<div class="mdetail-params"><ul>\r
-<li><b><a href="output/Ext.data.Store.html" ext:cls="Ext.data.Store">Store</a></b> : The Model holding the data records (rows)\r
-<div class="sub-desc"></div></li>\r
-<li><b><a href="output/Ext.grid.ColumnModel.html" ext:cls="Ext.grid.ColumnModel">Column model</a></b> : Column makeup\r
-<div class="sub-desc"></div></li>\r
-<li><b><a href="output/Ext.grid.GridView.html" ext:cls="Ext.grid.GridView">View</a></b> : Encapsulates the user interface \r
-<div class="sub-desc"></div></li>\r
-<li><b><a href="output/Ext.grid.AbstractSelectionModel.html" ext:cls="Ext.grid.AbstractSelectionModel">selection model</a></b> : Selection behavior \r
-<div class="sub-desc"></div></li>\r
-</ul></div>\r
-<p>Example usage:</p>\r
-<pre><code><b>var</b> grid = <b>new</b> Ext.grid.GridPanel({\r
- <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-store" ext:member="store" ext:cls="Ext.grid.GridPanel">store</a>: <b>new</b> (@link Ext.data.Store}({\r
- <a href="output/Ext.data.Store.html#Ext.data.Store-autoDestroy" ext:member="autoDestroy" ext:cls="Ext.data.Store">autoDestroy</a>: true,\r
- <a href="output/Ext.data.Store.html#Ext.data.Store-reader" ext:member="reader" ext:cls="Ext.data.Store">reader</a>: reader,\r
- <a href="output/Ext.data.Store.html#Ext.data.Store-data" ext:member="data" ext:cls="Ext.data.Store">data</a>: xg.dummyData\r
- }),\r
- <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-columns" ext:member="columns" ext:cls="Ext.grid.GridPanel">columns</a>: [\r
- {id: <em>'company'</em>, header: <em>'Company'</em>, width: 200, sortable: true, dataIndex: <em>'company'</em>},\r
- {header: <em>'Price'</em>, width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: <em>'price'</em>},\r
- {header: <em>'Change'</em>, width: 120, sortable: true, dataIndex: <em>'change'</em>},\r
- {header: <em>'% Change'</em>, width: 120, sortable: true, dataIndex: <em>'pctChange'</em>},\r
- <i>// instead of specifying renderer: Ext.util.Format.dateRenderer(<em>'m/d/Y'</em>) use xtype\r</i>
- {header: <em>'Last Updated'</em>, width: 135, sortable: true, dataIndex: <em>'lastChange'</em>, xtype: <em>'datecolumn'</em>, format: <em>'M d, Y'</em>}\r
- ],\r
- <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-viewConfig" ext:member="viewConfig" ext:cls="Ext.grid.GridPanel">viewConfig</a>: {\r
- <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit" ext:member="forceFit" ext:cls="Ext.grid.GridView">forceFit</a>: true,\r
-\r
-<i>// Return CSS class to apply to rows depending upon data values\r</i>
- <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-getRowClass" ext:member="getRowClass" ext:cls="Ext.grid.GridView">getRowClass</a>: <b>function</b>(record, index) {\r
- <b>var</b> c = record.<a href="output/Ext.data.Record.html#Ext.data.Record-get" ext:member="get" ext:cls="Ext.data.Record">get</a>(<em>'change'</em>);\r
- <b>if</b> (c < 0) {\r
- <b>return</b> <em>'price-fall'</em>;\r
- } <b>else</b> <b>if</b> (c > 0) {\r
- <b>return</b> <em>'price-rise'</em>;\r
- }\r
- }\r
- },\r
- <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-sm" ext:member="sm" ext:cls="Ext.grid.GridPanel">sm</a>: <b>new</b> Ext.grid.RowSelectionModel({singleSelect:true}),\r
- width: 600,\r
- height: 300,\r
- frame: true,\r
- title: <em>'Framed <b>with</b> Row Selection and Horizontal Scrolling'</em>,\r
- iconCls: <em>'icon-grid'</em>\r
-});</code></pre>\r
-<p><b><u>Notes:</u></b></p>\r
-<div class="mdetail-params"><ul>\r
-<li>Although this class inherits many configuration options from base classes, some of them\r
-(such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will\r
-have no effect.</li>\r
-<li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to\r
-scroll its rows. These dimensions can either be set explicitly through the\r
-<tt><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height" ext:member="height" ext:cls="Ext.BoxComponent">height</a></tt> and <tt><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-width" ext:member="width" ext:cls="Ext.BoxComponent">width</a></tt>\r
-configuration options or implicitly set by using the grid as a child item of a\r
-<a href="output/Ext.Container.html" ext:cls="Ext.Container">Container</a> which will have a <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout manager</a>\r
-provide the sizing of its child items (for example the Container of the Grid may specify\r
-<tt><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a>:'fit'</tt>).</li>\r
-<li>To access the data in a Grid, it is necessary to use the data model encapsulated\r
-by the <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-store" ext:member="store" ext:cls="Ext.grid.GridPanel">Store</a>. See the <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-cellclick" ext:member="cellclick" ext:cls="Ext.grid.GridPanel">cellclick</a> event for more details.</li>\r
-</ul></div></div><div class="hr"></div><a id="Ext.grid.GridPanel-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.Component-anchor"></a><b><a href="source/Component.html#cfg-Ext.Component-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.grid.GridPanel-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.grid.GridPanel-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.grid.GridPanel-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.grid.GridPanel-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.grid.GridPanel"><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.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Panel.html" ext:member="" ext:cls="Ext.Panel">Panel</a> <img src="resources/elbow-end.gif">GridPanel</pre></div><h1>Class <a href="source/GridPanel.html#cls-Ext.grid.GridPanel">Ext.grid.GridPanel</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/GridPanel.html#cls-Ext.grid.GridPanel">GridPanel.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/GridPanel.html#cls-Ext.grid.GridPanel">GridPanel</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.grid.EditorGridPanel.html" ext:cls="Ext.grid.EditorGridPanel">EditorGridPanel</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Panel.html" ext:cls="Ext.Panel" ext:member="">Panel</a></td></tr></table><div class="description"><p>This class represents the primary interface of a component based grid control to represent data
+in a tabular format of rows and columns. The GridPanel is composed of the following:</p>
+<div class="mdetail-params"><ul>
+<li><b><a href="output/Ext.data.Store.html" ext:cls="Ext.data.Store">Store</a></b> : The Model holding the data records (rows)
+<div class="sub-desc"></div></li>
+<li><b><a href="output/Ext.grid.ColumnModel.html" ext:cls="Ext.grid.ColumnModel">Column model</a></b> : Column makeup
+<div class="sub-desc"></div></li>
+<li><b><a href="output/Ext.grid.GridView.html" ext:cls="Ext.grid.GridView">View</a></b> : Encapsulates the user interface
+<div class="sub-desc"></div></li>
+<li><b><a href="output/Ext.grid.AbstractSelectionModel.html" ext:cls="Ext.grid.AbstractSelectionModel">selection model</a></b> : Selection behavior
+<div class="sub-desc"></div></li>
+</ul></div>
+<p>Example usage:</p>
+<pre><code><b>var</b> grid = <b>new</b> Ext.grid.GridPanel({
+ <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-store" ext:member="store" ext:cls="Ext.grid.GridPanel">store</a>: <b>new</b> <a href="output/Ext.data.Store.html" ext:cls="Ext.data.Store">Ext.data.Store</a>({
+ <a href="output/Ext.data.Store.html#Ext.data.Store-autoDestroy" ext:member="autoDestroy" ext:cls="Ext.data.Store">autoDestroy</a>: true,
+ <a href="output/Ext.data.Store.html#Ext.data.Store-reader" ext:member="reader" ext:cls="Ext.data.Store">reader</a>: reader,
+ <a href="output/Ext.data.Store.html#Ext.data.Store-data" ext:member="data" ext:cls="Ext.data.Store">data</a>: xg.dummyData
+ }),
+ <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-colModel" ext:member="colModel" ext:cls="Ext.grid.GridPanel">colModel</a>: <b>new</b> <a href="output/Ext.grid.ColumnModel.html" ext:cls="Ext.grid.ColumnModel">Ext.grid.ColumnModel</a>({
+ <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-defaults" ext:member="defaults" ext:cls="Ext.grid.ColumnModel">defaults</a>: {
+ width: 120,
+ sortable: true
+ },
+ <a href="output/Ext.grid.ColumnModel.html#Ext.grid.ColumnModel-columns" ext:member="columns" ext:cls="Ext.grid.ColumnModel">columns</a>: [
+ {id: <em>'company'</em>, header: <em>'Company'</em>, width: 200, sortable: true, dataIndex: <em>'company'</em>},
+ {header: <em>'Price'</em>, renderer: Ext.util.Format.usMoney, dataIndex: <em>'price'</em>},
+ {header: <em>'Change'</em>, dataIndex: <em>'change'</em>},
+ {header: <em>'% Change'</em>, dataIndex: <em>'pctChange'</em>},
+ <i>// instead of specifying renderer: Ext.util.Format.dateRenderer(<em>'m/d/Y'</em>) use xtype</i>
+ {
+ header: <em>'Last Updated'</em>, width: 135, dataIndex: <em>'lastChange'</em>,
+ xtype: <em>'datecolumn'</em>, format: <em>'M d, Y'</em>
+ }
+ ],
+ }),
+ <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-viewConfig" ext:member="viewConfig" ext:cls="Ext.grid.GridPanel">viewConfig</a>: {
+ <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-forceFit" ext:member="forceFit" ext:cls="Ext.grid.GridView">forceFit</a>: true,
+
+<i>// Return CSS class to apply to rows depending upon data values</i>
+ <a href="output/Ext.grid.GridView.html#Ext.grid.GridView-getRowClass" ext:member="getRowClass" ext:cls="Ext.grid.GridView">getRowClass</a>: <b>function</b>(record, index) {
+ <b>var</b> c = record.<a href="output/Ext.data.Record.html#Ext.data.Record-get" ext:member="get" ext:cls="Ext.data.Record">get</a>(<em>'change'</em>);
+ <b>if</b> (c < 0) {
+ <b>return</b> <em>'price-fall'</em>;
+ } <b>else</b> <b>if</b> (c > 0) {
+ <b>return</b> <em>'price-rise'</em>;
+ }
+ }
+ },
+ <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-sm" ext:member="sm" ext:cls="Ext.grid.GridPanel">sm</a>: <b>new</b> Ext.grid.RowSelectionModel({singleSelect:true}),
+ width: 600,
+ height: 300,
+ frame: true,
+ title: <em>'Framed <b>with</b> Row Selection and Horizontal Scrolling'</em>,
+ iconCls: <em>'icon-grid'</em>
+});</code></pre>
+<p><b><u>Notes:</u></b></p>
+<div class="mdetail-params"><ul>
+<li>Although this class inherits many configuration options from base classes, some of them
+(such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
+have no effect.</li>
+<li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to
+scroll its rows. These dimensions can either be set explicitly through the
+<tt><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-height" ext:member="height" ext:cls="Ext.BoxComponent">height</a></tt> and <tt><a href="output/Ext.BoxComponent.html#Ext.BoxComponent-width" ext:member="width" ext:cls="Ext.BoxComponent">width</a></tt>
+configuration options or implicitly set by using the grid as a child item of a
+<a href="output/Ext.Container.html" ext:cls="Ext.Container">Container</a> which will have a <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout manager</a>
+provide the sizing of its child items (for example the Container of the Grid may specify
+<tt><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a>:'fit'</tt>).</li>
+<li>To access the data in a Grid, it is necessary to use the data model encapsulated
+by the <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-store" ext:member="store" ext:cls="Ext.grid.GridPanel">Store</a>. See the <a href="output/Ext.grid.GridPanel.html#Ext.grid.GridPanel-cellclick" ext:member="cellclick" ext:cls="Ext.grid.GridPanel">cellclick</a> event for more details.</li>
+</ul></div></div><div class="hr"></div><a id="Ext.grid.GridPanel-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.BoxComponent-anchor"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered
git.ithinksw.org / extjs.git / blobdiff