Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / output / Ext.grid.CellSelectionModel.html
index 542720e..37dcf5e 100644 (file)
-        <div class="body-wrap">
-        <div class="top-tools">
-            <a class="inner-link" href="#Ext.grid.CellSelectionModel-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
-            <a class="inner-link" href="#Ext.grid.CellSelectionModel-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
-            <a class="inner-link" href="#Ext.grid.CellSelectionModel-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
-                            <a class="inner-link" href="#Ext.grid.CellSelectionModel-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
-                        <a class="bookmark" href="../docs/?class=Ext.grid.CellSelectionModel"><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.AbstractSelectionModel" ext:member="" href="output/Ext.grid.AbstractSelectionModel.html">AbstractSelectionModel</a>
-    <img src="resources/elbow-end.gif"/>CellSelectionModel</pre></div>
-                <h1>Class Ext.grid.CellSelectionModel</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="../src/CellSelectionModel.js" target="_blank">CellSelectionModel.js</a></td></tr>
-            <tr><td class="label">Class:</td><td class="hd-info">CellSelectionModel</td></tr>
-                                    <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.grid.AbstractSelectionModel" ext:member="" href="output/Ext.grid.AbstractSelectionModel.html">AbstractSelectionModel</a></td></tr>
-                    </table>
-        <div class="description">
-            *
-This class provides the basic implementation for single cell selection in a grid. The object stored
-as the selection and returned by <a ext:cls="getSelectedCell" href="output/getSelectedCell.html">getSelectedCell</a> contains the following properties:
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.grid.CellSelectionModel-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.grid.CellSelectionModel-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.grid.CellSelectionModel-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.grid.CellSelectionModel-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.grid.CellSelectionModel"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</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.AbstractSelectionModel.html" ext:member="" ext:cls="Ext.grid.AbstractSelectionModel">AbstractSelectionModel</a>
+    <img src="resources/elbow-end.gif">CellSelectionModel</pre></div><h1>Class <a href="source/CellSelectionModel.html#cls-Ext.grid.CellSelectionModel">Ext.grid.CellSelectionModel</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/CellSelectionModel.html#cls-Ext.grid.CellSelectionModel">CellSelectionModel.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/CellSelectionModel.html#cls-Ext.grid.CellSelectionModel">CellSelectionModel</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.grid.AbstractSelectionModel.html" ext:cls="Ext.grid.AbstractSelectionModel" ext:member="">AbstractSelectionModel</a></td></tr></table><div class="description">This class provides the basic implementation for <i>single</i> <b>cell</b> selection in a grid.
+The object stored as the selection contains the following properties:
 <div class="mdetail-params"><ul>
 <div class="mdetail-params"><ul>
-<li><b>record</b> : Ext.data.record<p class="sub-desc">The <a ext:cls="Ext.data.Record" href="output/Ext.data.Record.html">Record</a>
-which provides the data for the row containing the selection</p></li>
-<li><b>cell</b> : Ext.data.record<p class="sub-desc">An object containing the
-following properties:
-<div class="mdetail-params"><ul>
-<li><b>rowIndex</b> : Number<p class="sub-desc">The index of the selected row</p></li>
-<li><b>cellIndex</b> : Number<p class="sub-desc">The index of the selected cell<br>
-<b>Note that due to possible column reordering, the cellIndex should not be used as an index into
-the Record's data. Instead, the <i>name</i> of the selected field should be determined
-in order to retrieve the data value from the record by name:</b><pre><code>var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
-    <b>var</b> data = record.get(fieldName);</code></pre></p></li>
-</ul></div></p></li>
-</ul></div>        </div>
-        
-        <div class="hr"></div>
-                <a id="Ext.grid.CellSelectionModel-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 expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-listeners"></a>\r
-            <b>listeners</b> : Object            <div class="mdesc">\r
-                        <div class="short">(optional) A config object containing one or more event handlers to be added to this object during initialization. Th...</div>\r
-            <div class="long">\r
-                (optional) 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>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#listeners" href="output/Ext.util.Observable.html#listeners">Observable</a></td>\r
-    </tr>\r
-            </table>
-                <a id="Ext.grid.CellSelectionModel-props"></a>
-        <h2>Public Properties</h2>
-        <div class="no-members">This class has no public properties.</div>        <a id="Ext.grid.CellSelectionModel-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">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-CellSelectionModel"></a>\r
-            <b>CellSelectionModel</b>(&nbsp;<code>Object config</code>&nbsp;)            <div class="mdesc">\r
-                        <div class="short"></div>\r
-            <div class="long">\r
-                    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li><code>config</code> : Object<div class="sub-desc">The object containing the configuration of this model.</div></li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code></code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-        <tr class="method-row inherited alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-addEvents"></a>\r
-            <b>addEvents</b>(&nbsp;<code>Object object</code>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Used to define events on this Observable</div>\r
-            <div class="long">\r
-                Used to define events on this Observable    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="output/Ext.util.Observable.html#addEvents">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-addListener"></a>\r
-            <b>addListener</b>(&nbsp;<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>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Appends an event handler to this component</div>\r
-            <div class="long">\r
-                Appends an event handler to this component    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <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 handler
-function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration
+<li><b>cell</b> : see <a href="output/Ext.grid.CellSelectionModel.html#Ext.grid.CellSelectionModel-getSelectedCell" ext:member="getSelectedCell" ext:cls="Ext.grid.CellSelectionModel">getSelectedCell</a> 
+<li><b>record</b> : Ext.data.record The <a href="output/Ext.data.Record.html" ext:cls="Ext.data.Record">Record</a>
+which provides the data for the row containing the selection</li>
+</ul></div></div><div class="hr"></div><a id="Ext.grid.CellSelectionModel-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">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-listeners"></a><b><a href="source/Observable.html#cfg-Ext.util.Observable-listeners">listeners</a></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 ...</div><div class="long"><p>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 href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> example for attaching multiple handlers at once.</p>
+<br><p><b><u>DOM events from ExtJs <a href="output/Ext.Component.html" ext:cls="Ext.Component">Components</a></u></b></p>
+<br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
+is usually only done when extra value can be added. For example the <a href="output/Ext.DataView.html" ext:cls="Ext.DataView">DataView</a>'s
+<b><code><a href="output/Ext.DataView.html#Ext.DataView-click" ext:member="click" ext:cls="Ext.DataView">click</a></code></b> event passing the node clicked on. To access DOM
+events directly from a Component's HTMLElement, listeners must be added to the <i><a href="output/Ext.Component.html#Ext.Component-getEl" ext:member="getEl" ext:cls="Ext.Component">Element</a></i> after the Component
+has been rendered. A plugin can simplify this step:<pre><code><i>// Plugin is configured <b>with</b> a listeners config object.</i>
+<i>// The Component is appended to the argument list of all handler functions.</i>
+Ext.DomObserver = Ext.extend(Object, {
+    constructor: <b>function</b>(config) {
+        this.listeners = config.listeners ? config.listeners : config;
+    },
+
+    <i>// Component passes itself into plugin&#39;s init method</i>
+    init: <b>function</b>(c) {
+        <b>var</b> p, l = this.listeners;
+        <b>for</b> (p <b>in</b> l) {
+            <b>if</b> (Ext.isFunction(l[p])) {
+                l[p] = this.createHandler(l[p], c);
+            } <b>else</b> {
+                l[p].fn = this.createHandler(l[p].fn, c);
+            }
+        }
+
+        <i>// Add the listeners to the Element immediately following the render call</i>
+        c.render = c.render.<a href="output/Function.html#Function-createSequence" ext:member="createSequence" ext:cls="Function">createSequence</a>(<b>function</b>() {
+            <b>var</b> e = c.getEl();
+            <b>if</b> (e) {
+                e.on(l);
+            }
+        });
+    },
+
+    createHandler: <b>function</b>(fn, c) {
+        <b>return</b> <b>function</b>(e) {
+            fn.call(this, e, c);
+        };
+    }
+});
+
+<b>var</b> combo = <b>new</b> Ext.form.ComboBox({
+
+    <i>// Collapse combo when its element is clicked on</i>
+    plugins: [ <b>new</b> Ext.DomObserver({
+        click: <b>function</b>(evt, comp) {
+            comp.collapse();
+        }
+    })],
+    store: myStore,
+    typeAhead: true,
+    mode: <em>'local'</em>,
+    triggerAction: <em>'all'</em>
+});</code></pre></p></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#listeners" ext:member="#listeners" ext:cls="Ext.util.Observable">Observable</a></td></tr></tbody></table><a id="Ext.grid.CellSelectionModel-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  inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.AbstractSelectionModel-grid"></a><b><a href="source/AbstractSelectionModel.html#prop-Ext.grid.AbstractSelectionModel-grid">grid</a></b> : Object<div class="mdesc">The GridPanel for which this SelectionModel is handling selection. Read-only.</div></td><td class="msource"><a href="output/Ext.grid.AbstractSelectionModel.html#grid" ext:member="#grid" ext:cls="Ext.grid.AbstractSelectionModel">AbstractSelectionModel</a></td></tr></tbody></table><a id="Ext.grid.CellSelectionModel-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-CellSelectionModel"></a><b><a href="source/CellSelectionModel.html#cls-Ext.grid.CellSelectionModel">CellSelectionModel</a></b>(&nbsp;<code>Object&nbsp;config</code>&nbsp;)
+    <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">The object containing the configuration of this model.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-addEvents"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addEvents">addEvents</a></b>(&nbsp;<code>Object|String&nbsp;o</code>,&nbsp;<code>string&nbsp;Optional.</code>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Adds the specified events to the list of events which this Observable may fire.</div><div class="long">Adds the specified events to the list of events which this Observable may fire.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object|String<div class="sub-desc">Either an object with event names as properties with a value of <code>true</code>
+or the first event name string if multiple event names are being passed as separate parameters.</div></li><li><code>Optional.</code> : string<div class="sub-desc">Event name if multiple event names are being passed as separate parameters.
+Usage:<pre><code>this.addEvents(<em>'storeloaded'</em>, <em>'storecleared'</em>);</code></pre></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#addEvents" ext:member="#addEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-addListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addListener">addListener</a></b>(&nbsp;<code>String&nbsp;eventName</code>,&nbsp;<code>Function&nbsp;handler</code>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;scope</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Appends an event handler to this object.</div><div class="long">Appends an event handler to this object.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the 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 (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to the object which fired the event.</b></div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration.
 properties. This may contain any of the following properties:<ul>
 properties. 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> delayed
+<li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to the object which fired the event.</b></div></li>
+<li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
+<li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
+<li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an <a href="output/Ext.util.DelayedTask.html" ext:cls="Ext.util.DelayedTask">Ext.util.DelayedTask</a> delayed
 by the specified number of milliseconds. If the event fires again within that time, the original
 by the specified number of milliseconds. If the event fires again within that time, the original
-handler is <em>not</em> invoked, but the new handler is scheduled in its place.</p></li>
+handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
+<li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
+if the event was bubbled up from a child Observable.</div></li>
 </ul><br>
 <p>
 <b>Combining Options</b><br>
 Using the options argument, it is possible to combine different types of listeners:<br>
 <br>
 </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
+A delayed, one-time listener.
+<pre><code>myDataView.on(<em>'click'</em>, this.onClick, this, {
+single: true,
+delay: 100
 });</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 properties
 which specify multiple handlers.
 <p>
 });</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 properties
 which 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>
-    }
+<pre><code>myGridPanel.on({
+<em>'click'</em> : {
+    fn: this.onClick,
+    scope: this,
+    delay: 100
+},
+<em>'mouseover'</em> : {
+    fn: this.onMouseOver,
+    scope: this
+},
+<em>'mouseout'</em> : {
+    fn: this.onMouseOut,
+    scope: this
+}
 });</code></pre>
 <p>
 Or a shorthand syntax:<br>
 });</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>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addListener" href="output/Ext.util.Observable.html#addListener">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-clearSelections"></a>\r
-            <b>clearSelections</b>(&nbsp;<code>Boolean true</code>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Clears all selections.</div>\r
-            <div class="long">\r
-                Clears all selections.    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li><code>true</code> : Boolean<div class="sub-desc">to prevent the gridview from being notified about the change.</div></li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-fireEvent"></a>\r
-            <b>fireEvent</b>(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;) : Boolean            <div class="mdesc">\r
-                        <div class="short">Fires the specified event with the passed parameters (minus the event name).</div>\r
-            <div class="long">\r
-                Fires the specified event with the passed parameters (minus the event name).    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <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>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true</div></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="output/Ext.util.Observable.html#fireEvent">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-getSelectedCell"></a>\r
-            <b>getSelectedCell</b>() : Array            <div class="mdesc">\r
-                        <div class="short">Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).</div>\r
-            <div class="long">\r
-                Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>Array</code><div class="sub-desc">An array containing the row and column indexes of the selected cell, or null if none selected.</div></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-hasListener"></a>\r
-            <b>hasListener</b>(&nbsp;<code>String eventName</code>&nbsp;) : Boolean            <div class="mdesc">\r
-                        <div class="short">Checks to see if this object has any listeners for a specified event</div>\r
-            <div class="long">\r
-                Checks to see if this object has any listeners for a specified event    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="output/Ext.util.Observable.html#hasListener">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-hasSelection"></a>\r
-            <b>hasSelection</b>() : Boolean            <div class="mdesc">\r
-                        <div class="short">Returns true if there is a selection.</div>\r
-            <div class="long">\r
-                Returns true if there is a selection.    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>Boolean</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-isLocked"></a>\r
-            <b>isLocked</b>() : Boolean            <div class="mdesc">\r
-                        <div class="short">Returns true if the selections are locked.</div>\r
-            <div class="long">\r
-                Returns true if the selections are locked.    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>Boolean</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.grid.AbstractSelectionModel" ext:member="#isLocked" href="output/Ext.grid.AbstractSelectionModel.html#isLocked">AbstractSelectionModel</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-lock"></a>\r
-            <b>lock</b>() : void            <div class="mdesc">\r
-                        <div class="short">Locks the selections.</div>\r
-            <div class="long">\r
-                Locks the selections.    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.grid.AbstractSelectionModel" ext:member="#lock" href="output/Ext.grid.AbstractSelectionModel.html#lock">AbstractSelectionModel</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-on"></a>\r
-            <b>on</b>(&nbsp;<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>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Appends an event handler to this element (shorthand for addListener)</div>\r
-            <div class="long">\r
-                Appends an event handler to this element (shorthand for addListener)    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <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 handler
-function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional)</div></li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#on" href="output/Ext.util.Observable.html#on">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-purgeListeners"></a>\r
-            <b>purgeListeners</b>() : void            <div class="mdesc">\r
-                        <div class="short">Removes all listeners for this object</div>\r
-            <div class="long">\r
-                Removes all listeners for this object    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="output/Ext.util.Observable.html#purgeListeners">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-relayEvents"></a>\r
-            <b>relayEvents</b>(&nbsp;<code>Object o</code>, <code>Array events</code>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.</div>\r
-            <div class="long">\r
-                Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li><code>o</code> : Object<div class="sub-desc">The Observable whose events this object is to relay.</div></li><li><code>events</code> : Array<div class="sub-desc">Array of event names to relay.</div></li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#relayEvents" href="output/Ext.util.Observable.html#relayEvents">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-removeListener"></a>\r
-            <b>removeListener</b>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Removes a listener</div>\r
-            <div class="long">\r
-                Removes a listener    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <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>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="output/Ext.util.Observable.html#removeListener">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-resumeEvents"></a>\r
-            <b>resumeEvents</b>() : void            <div class="mdesc">\r
-                        <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>\r
-            <div class="long">\r
-                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">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-select"></a>\r
-            <b>select</b>(&nbsp;<code>Number rowIndex</code>, <code>Number collIndex</code>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Selects a cell.</div>\r
-            <div class="long">\r
-                Selects a cell.    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li><code>rowIndex</code> : Number<div class="sub-desc"></div></li><li><code>collIndex</code> : Number<div class="sub-desc"></div></li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-suspendEvents"></a>\r
-            <b>suspendEvents</b>() : void            <div class="mdesc">\r
-                        <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>\r
-            <div class="long">\r
-                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">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-un"></a>\r
-            <b>un</b>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void            <div class="mdesc">\r
-                        <div class="short">Removes a listener (shorthand for removeListener)</div>\r
-            <div class="long">\r
-                Removes a listener (shorthand for removeListener)    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <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>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#un" href="output/Ext.util.Observable.html#un">Observable</a></td>\r
-    </tr>\r
-        <tr class="method-row inherited expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-unlock"></a>\r
-            <b>unlock</b>() : void            <div class="mdesc">\r
-                        <div class="short">Unlocks the selections.</div>\r
-            <div class="long">\r
-                Unlocks the selections.    <div class="mdetail-params">\r
-        <strong>Parameters:</strong>\r
-        <ul><li>None.</li>        </ul>\r
-        <strong>Returns:</strong>\r
-        <ul>\r
-            <li><code>void</code></li>\r
-        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource"><a ext:cls="Ext.grid.AbstractSelectionModel" ext:member="#unlock" href="output/Ext.grid.AbstractSelectionModel.html#unlock">AbstractSelectionModel</a></td>\r
-    </tr>\r
-            </table>
-                <a id="Ext.grid.CellSelectionModel-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 expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-beforecellselect"></a>\r
-            <b>beforecellselect</b> : (&nbsp;<code>SelectionModel this</code>, <code>Number rowIndex</code>, <code>Number colIndex</code>&nbsp;)            <div class="mdesc">\r
-                        <div class="short">Fires before a cell is selected.</div>\r
-            <div class="long">\r
-                Fires before a cell is selected.    <div class="mdetail-params">\r
-        <strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong>\r
-        <ul><li><code>this</code> : SelectionModel<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The selected row index</div></li><li><code>colIndex</code> : Number<div class="sub-desc">The selected cell index</div></li>        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-        <tr class="event-row alt expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-cellselect"></a>\r
-            <b>cellselect</b> : (&nbsp;<code>SelectionModel this</code>, <code>Number rowIndex</code>, <code>Number colIndex</code>&nbsp;)            <div class="mdesc">\r
-                        <div class="short">Fires when a cell is selected.</div>\r
-            <div class="long">\r
-                Fires when a cell is selected.    <div class="mdetail-params">\r
-        <strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong>\r
-        <ul><li><code>this</code> : SelectionModel<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The selected row index</div></li><li><code>colIndex</code> : Number<div class="sub-desc">The selected cell index</div></li>        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-        <tr class="event-row expandable">\r
-        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
-        <td class="sig">\r
-        <a id="Ext.grid.CellSelectionModel-selectionchange"></a>\r
-            <b>selectionchange</b> : (&nbsp;<code>SelectionModel this</code>, <code>Object selection</code>&nbsp;)            <div class="mdesc">\r
-                        <div class="short">Fires when the active selection changes.</div>\r
-            <div class="long">\r
-                Fires when the active selection changes.    <div class="mdetail-params">\r
-        <strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong>\r
-        <ul><li><code>this</code> : SelectionModel<div class="sub-desc"></div></li><li><code>selection</code> : Object<div class="sub-desc">null for no selection or an object (o) with two properties\r
-        <ul>\r
-        <li>o.record: the record object for the row the selection is in</li>\r
-        <li>o.cell: An array of [rowIndex, columnIndex]</li>\r
-        </ul></div></li>        </ul>\r
-    </div>\r
-                </div>\r
-                        </div>\r
-        </td>\r
-        <td class="msource">CellSelectionModel</td>\r
-    </tr>\r
-            </table>
-        
-        </div>
\ No newline at end of file
+<pre><code>myGridPanel.on({
+<em>'click'</em> : this.onClick,
+<em>'mouseover'</em> : this.onMouseOver,
+<em>'mouseout'</em> : this.onMouseOut,
+ scope: this
+});</code></pre></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#addListener" ext:member="#addListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-clearSelections"></a><b><a href="source/CellSelectionModel.html#method-Ext.grid.CellSelectionModel-clearSelections">clearSelections</a></b>(&nbsp;<code>Boolean&nbsp;preventNotify</code>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">If anything is selected, clears all selections and fires the selectionchange event.</div><div class="long">If anything is selected, clears all selections and fires the selectionchange event.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>preventNotify</code> : Boolean<div class="sub-desc"><tt>true</tt> to prevent the gridview from
+being notified about the change.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</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>(&nbsp;<code>String/Array&nbsp;events</code>&nbsp;)
+    :
+                                        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&#39;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&#39;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 inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-fireEvent"></a><b><a href="source/Observable.html#method-Ext.util.Observable-fireEvent">fireEvent</a></b>(&nbsp;<code>String&nbsp;eventName</code>,&nbsp;<code>Object...&nbsp;args</code>&nbsp;)
+    :
+                                        Boolean<div class="mdesc"><div class="short">Fires the specified event with the passed parameters (minus the event name).
+An event may be set to bubble up an Obse...</div><div class="long"><p>Fires the specified event with the passed parameters (minus the event name).</p>
+<p>An event may be set to bubble up an Observable parent hierarchy (See <a href="output/Ext.Component.html#Ext.Component-getBubbleTarget" ext:member="getBubbleTarget" ext:cls="Ext.Component">Ext.Component.getBubbleTarget</a>)
+by calling <a href="output/Ext.util.Observable.html#Ext.util.Observable-enableBubble" ext:member="enableBubble" ext:cls="Ext.util.Observable">enableBubble</a>.</p><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to fire.</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 href="output/Ext.util.Observable.html#fireEvent" ext:member="#fireEvent" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-getSelectedCell"></a><b><a href="source/CellSelectionModel.html#method-Ext.grid.CellSelectionModel-getSelectedCell">getSelectedCell</a></b>()
+    :
+                                        Array<div class="mdesc"><div class="short">Returns an array containing the row and column indexes of the currently selected cell
+(e.g., [0, 0]), or null if none...</div><div class="long">Returns an array containing the row and column indexes of the currently selected cell
+(e.g., [0, 0]), or null if none selected. The array has elements:
+<div class="mdetail-params"><ul>
+<li><b>rowIndex</b> : Number<p class="sub-desc">The index of the selected row</p></li>
+<li><b>cellIndex</b> : Number<p class="sub-desc">The index of the selected cell. 
+Due to possible column reordering, the cellIndex should <b>not</b> be used as an
+index into the Record's data. Instead, use the cellIndex to determine the <i>name</i>
+of the selected cell and use the field name to retrieve the data value from the record:<pre><code><i>// get name</i>
+<b>var</b> fieldName = grid.getColumnModel().getDataIndex(cellIndex);
+<i>// get data value based on name</i>
+<b>var</b> data = record.get(fieldName);</code></pre></p></li>
+</ul></div><div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Array</code><div class="sub-desc">An array containing the row and column indexes of the selected cell, or null if none selected.</div></li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-hasListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-hasListener">hasListener</a></b>(&nbsp;<code>String&nbsp;eventName</code>&nbsp;)
+    :
+                                        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 href="output/Ext.util.Observable.html#hasListener" ext:member="#hasListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-hasSelection"></a><b><a href="source/CellSelectionModel.html#method-Ext.grid.CellSelectionModel-hasSelection">hasSelection</a></b>()
+    :
+                                        Boolean<div class="mdesc"><div class="short">Returns true if there is a selection.</div><div class="long">Returns <tt>true</tt> if there is a selection.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.AbstractSelectionModel-isLocked"></a><b><a href="source/AbstractSelectionModel.html#method-Ext.grid.AbstractSelectionModel-isLocked">isLocked</a></b>()
+    :
+                                        Boolean<div class="mdesc"><div class="short">Returns true if the selections are locked.</div><div class="long">Returns true if the selections are locked.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.grid.AbstractSelectionModel.html#isLocked" ext:member="#isLocked" ext:cls="Ext.grid.AbstractSelectionModel">AbstractSelectionModel</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.AbstractSelectionModel-lock"></a><b><a href="source/AbstractSelectionModel.html#method-Ext.grid.AbstractSelectionModel-lock">lock</a></b>()
+    :
+                                        void<div class="mdesc"><div class="short">Locks the selections.</div><div class="long">Locks the selections.<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"><a href="output/Ext.grid.AbstractSelectionModel.html#lock" ext:member="#lock" ext:cls="Ext.grid.AbstractSelectionModel">AbstractSelectionModel</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-on"></a><b><a href="source/Observable.html#method-Ext.util.Observable-on">on</a></b>(&nbsp;<code>String&nbsp;eventName</code>,&nbsp;<code>Function&nbsp;handler</code>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;scope</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;options</code>]</span>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Appends an event handler to this object (shorthand for addListener.)</div><div class="long">Appends an event handler to this object (shorthand for <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a>.)<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 (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to the object which fired the event.</b></div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration.</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#on" ext:member="#on" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-purgeListeners"></a><b><a href="source/Observable.html#method-Ext.util.Observable-purgeListeners">purgeListeners</a></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>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#purgeListeners" ext:member="#purgeListeners" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-relayEvents"></a><b><a href="source/Observable-more.html#method-Ext.util.Observable-relayEvents">relayEvents</a></b>(&nbsp;<code>Object&nbsp;o</code>,&nbsp;<code>Array&nbsp;events</code>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Relays selected events from the specified Observable as if the events were fired by this.</div><div class="long">Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object<div class="sub-desc">The Observable whose events this object is to relay.</div></li><li><code>events</code> : Array<div class="sub-desc">Array of event names to relay.</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#relayEvents" ext:member="#relayEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-removeListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-removeListener">removeListener</a></b>(&nbsp;<code>String&nbsp;eventName</code>,&nbsp;<code>Function&nbsp;handler</code>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;scope</code>]</span>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Removes an event handler.</div><div class="long">Removes an event handler.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event the handler was associated with.</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove. <b>This must be a reference to the function passed into the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> call.</b></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope originally specified for the handler.</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#removeListener" ext:member="#removeListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-resumeEvents"></a><b><a href="source/Observable.html#method-Ext.util.Observable-resumeEvents">resumeEvents</a></b>()
+    :
+                                        void<div class="mdesc"><div class="short">Resume firing events. (see suspendEvents)
+If events were suspended using the queueSuspended parameter, then all
+event...</div><div class="long">Resume firing events. (see <a href="output/Ext.util.Observable.html#Ext.util.Observable-suspendEvents" ext:member="suspendEvents" ext:cls="Ext.util.Observable">suspendEvents</a>)
+If events were suspended using the <tt><b>queueSuspended</b></tt> parameter, then all
+events fired during event suspension will be sent to any listeners now.<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"><a href="output/Ext.util.Observable.html#resumeEvents" ext:member="#resumeEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-select"></a><b><a href="source/CellSelectionModel.html#method-Ext.grid.CellSelectionModel-select">select</a></b>(&nbsp;<code>Number&nbsp;rowIndex</code>,&nbsp;<code>Number&nbsp;colIndex</code>,&nbsp;<span title="Optional" class="optional">[<code>Boolean&nbsp;preventViewNotify</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Boolean&nbsp;preventFocus</code>]</span>,&nbsp;<span title="Optional" class="optional">[<code>Ext.data.Record&nbsp;r</code>]</span>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Selects a cell.  Before selecting a cell, fires the
+beforecellselect event.  If this check is satisfied the cell
+will...</div><div class="long">Selects a cell.  Before selecting a cell, fires the
+<a href="output/Ext.grid.CellSelectionModel.html#Ext.grid.CellSelectionModel-beforecellselect" ext:member="beforecellselect" ext:cls="Ext.grid.CellSelectionModel">beforecellselect</a> event.  If this check is satisfied the cell
+will be selected and followed up by  firing the <a href="output/Ext.grid.CellSelectionModel.html#Ext.grid.CellSelectionModel-cellselect" ext:member="cellselect" ext:cls="Ext.grid.CellSelectionModel">cellselect</a> and
+<a href="output/Ext.grid.CellSelectionModel.html#Ext.grid.CellSelectionModel-selectionchange" ext:member="selectionchange" ext:cls="Ext.grid.CellSelectionModel">selectionchange</a> events.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>rowIndex</code> : Number<div class="sub-desc">The index of the row to select</div></li><li><code>colIndex</code> : Number<div class="sub-desc">The index of the column to select</div></li><li><code>preventViewNotify</code> : Boolean<div class="sub-desc">(optional) Specify <tt>true</tt> to
+prevent notifying the view (disables updating the selected appearance)</div></li><li><code>preventFocus</code> : Boolean<div class="sub-desc">(optional) Whether to prevent the cell at
+the specified rowIndex / colIndex from being focused.</div></li><li><code>r</code> : Ext.data.Record<div class="sub-desc">(optional) The record to select</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-suspendEvents"></a><b><a href="source/Observable.html#method-Ext.util.Observable-suspendEvents">suspendEvents</a></b>(&nbsp;<code>Boolean&nbsp;queueSuspended</code>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Suspend the firing of all events. (see resumeEvents)</div><div class="long">Suspend the firing of all events. (see <a href="output/Ext.util.Observable.html#Ext.util.Observable-resumeEvents" ext:member="resumeEvents" ext:cls="Ext.util.Observable">resumeEvents</a>)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>queueSuspended</code> : Boolean<div class="sub-desc">Pass as true to queue up suspended events to be fired
+after the <a href="output/Ext.util.Observable.html#Ext.util.Observable-resumeEvents" ext:member="resumeEvents" ext:cls="Ext.util.Observable">resumeEvents</a> call instead of discarding all suspended events;</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#suspendEvents" ext:member="#suspendEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.util.Observable-un"></a><b><a href="source/Observable.html#method-Ext.util.Observable-un">un</a></b>(&nbsp;<code>String&nbsp;eventName</code>,&nbsp;<code>Function&nbsp;handler</code>,&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;scope</code>]</span>&nbsp;)
+    :
+                                        void<div class="mdesc"><div class="short">Removes an event handler (shorthand for removeListener.)</div><div class="long">Removes an event handler (shorthand for <a href="output/Ext.util.Observable.html#Ext.util.Observable-removeListener" ext:member="removeListener" ext:cls="Ext.util.Observable">removeListener</a>.)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The type of event the handler was associated with.</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove. <b>This must be a reference to the function passed into the <a href="output/Ext.util.Observable.html#Ext.util.Observable-addListener" ext:member="addListener" ext:cls="Ext.util.Observable">addListener</a> call.</b></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope originally specified for the handler.</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#un" ext:member="#un" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.AbstractSelectionModel-unlock"></a><b><a href="source/AbstractSelectionModel.html#method-Ext.grid.AbstractSelectionModel-unlock">unlock</a></b>()
+    :
+                                        void<div class="mdesc"><div class="short">Unlocks the selections.</div><div class="long">Unlocks the selections.<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"><a href="output/Ext.grid.AbstractSelectionModel.html#unlock" ext:member="#unlock" ext:cls="Ext.grid.AbstractSelectionModel">AbstractSelectionModel</a></td></tr></tbody></table><a id="Ext.grid.CellSelectionModel-events"></a><h2>Public Events</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Event</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-beforecellselect"></a><b><a href="source/CellSelectionModel.html#event-Ext.grid.CellSelectionModel-beforecellselect">beforecellselect</a></b> :
+                                      (&nbsp;<code>SelectionModel&nbsp;this</code>,&nbsp;<code>Number&nbsp;rowIndex</code>,&nbsp;<code>Number&nbsp;colIndex</code>&nbsp;)
+    <div class="mdesc"><div class="short">Fires before a cell is selected, return false to cancel the selection.</div><div class="long">Fires before a cell is selected, return false to cancel the selection.<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : SelectionModel<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The selected row index</div></li><li><code>colIndex</code> : Number<div class="sub-desc">The selected cell index</div></li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-cellselect"></a><b><a href="source/CellSelectionModel.html#event-Ext.grid.CellSelectionModel-cellselect">cellselect</a></b> :
+                                      (&nbsp;<code>SelectionModel&nbsp;this</code>,&nbsp;<code>Number&nbsp;rowIndex</code>,&nbsp;<code>Number&nbsp;colIndex</code>&nbsp;)
+    <div class="mdesc"><div class="short">Fires when a cell is selected.</div><div class="long">Fires when a cell is selected.<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : SelectionModel<div class="sub-desc"></div></li><li><code>rowIndex</code> : Number<div class="sub-desc">The selected row index</div></li><li><code>colIndex</code> : Number<div class="sub-desc">The selected cell index</div></li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.grid.CellSelectionModel-selectionchange"></a><b><a href="source/CellSelectionModel.html#event-Ext.grid.CellSelectionModel-selectionchange">selectionchange</a></b> :
+                                      (&nbsp;<code>SelectionModel&nbsp;this</code>,&nbsp;<code>Object&nbsp;selection</code>&nbsp;)
+    <div class="mdesc"><div class="short">Fires when the active selection changes.</div><div class="long">Fires when the active selection changes.<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : SelectionModel<div class="sub-desc"></div></li><li><code>selection</code> : Object<div class="sub-desc">null for no selection or an object with two properties
+<div class="mdetail-params"><ul>
+<li><b>cell</b> : see <a href="output/Ext.grid.CellSelectionModel.html#Ext.grid.CellSelectionModel-getSelectedCell" ext:member="getSelectedCell" ext:cls="Ext.grid.CellSelectionModel">getSelectedCell</a> 
+<li><b>record</b> : Ext.data.record<p class="sub-desc">The <a href="output/Ext.data.Record.html" ext:cls="Ext.data.Record">Record</a>
+which provides the data for the row containing the selection</p></li>
+</ul></div></div></li></ul></div></div></div></td><td class="msource">CellSelectionModel</td></tr></tbody></table></div>
\ No newline at end of file