docs/output/Ext.Resizable.html

   1         <div class="body-wrap">
   2         <div class="top-tools">
   3             <a class="inner-link" href="#Ext.Resizable-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
   4             <a class="inner-link" href="#Ext.Resizable-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
   5             <a class="inner-link" href="#Ext.Resizable-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
   6                             <a class="inner-link" href="#Ext.Resizable-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
   7                         <a class="bookmark" href="../docs/?class=Ext.Resizable"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
   8         </div>
   9                 <div class="inheritance res-block">
  10 <pre class="res-block-inner"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a>
  11   <img src="resources/elbow-end.gif"/>Resizable</pre></div>
  12                 <h1>Class Ext.Resizable</h1>
  13         <table cellspacing="0">
  14             <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
  15             <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../src/Resizable.js" target="_blank">Resizable.js</a></td></tr>
  16             <tr><td class="label">Class:</td><td class="hd-info">Resizable</td></tr>
  17                                     <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a></td></tr>
  18                     </table>
  19         <div class="description">
  20             *
  21 <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
  22 and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
  23 the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
  24 the element will be wrapped for you automatically.</p>
  25 <p>Here is the list of valid resize handles:</p>
  26 <pre>Value   Description\r
  27 ------  -------------------\r
  28  'n'     north\r
  29  's'     south\r
  30  'e'     east\r
  31  'w'     west\r
  32  'nw'    northwest\r
  33  'sw'    southwest\r
  34  'se'    southeast\r
  35  'ne'    northeast\r
  36  'all'   all</pre>
  37 <p>Here's an example showing the creation of a typical Resizable:</p>
  38 <pre><code>var resizer = <b>new</b> Ext.Resizable(<em>"element-id"</em>, {
  39     handles: <em>'all'</em>,
  40     minWidth: 200,
  41     minHeight: 100,
  42     maxWidth: 500,
  43     maxHeight: 400,
  44     pinned: true
  45 });
  46 resizer.on(<em>"resize"</em>, myHandler);</code></pre>
  47 <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
  48 resizer.east.setDisplayed(false);</p>        </div>
  49
  50         <div class="hr"></div>
  51                 <a id="Ext.Resizable-configs"></a>
  52         <h2>Config Options</h2>
  53         <table cellspacing="0" class="member-table">
  54             <tr>
  55                 <th class="sig-header" colspan="2">Config Options</th>
  56                 <th class="msource-header">Defined By</th>
  57             </tr>
  58                 <tr class="config-row expandable">\r
  59         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  60         <td class="sig">\r
  61         <a id="Ext.Resizable-adjustments"></a>\r
  62             <b>adjustments</b> : Array/String            <div class="mdesc">\r
  63                         <div class="short">String "auto" or an array [width, height] with values to be added to the resize operation's new size (defaults to [0,...</div>\r
  64             <div class="long">\r
  65                 String "auto" or an array [width, height] with values to be <b>added</b> to the resize operation's new size (defaults to [0, 0])            </div>\r
  66                         </div>\r
  67         </td>\r
  68         <td class="msource">Resizable</td>\r
  69     </tr>\r
  70         <tr class="config-row alt">\r
  71         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  72         <td class="sig">\r
  73         <a id="Ext.Resizable-animate"></a>\r
  74             <b>animate</b> : Boolean            <div class="mdesc">\r
  75                             True to animate the resize (not compatible with dynamic sizing, defaults to false)                        </div>\r
  76         </td>\r
  77         <td class="msource">Resizable</td>\r
  78     </tr>\r
  79         <tr class="config-row">\r
  80         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  81         <td class="sig">\r
  82         <a id="Ext.Resizable-constrainTo"></a>\r
  83             <b>constrainTo</b> : Mixed            <div class="mdesc">\r
  84                             Constrain the resize to a particular element                        </div>\r
  85         </td>\r
  86         <td class="msource">Resizable</td>\r
  87     </tr>\r
  88         <tr class="config-row alt">\r
  89         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  90         <td class="sig">\r
  91         <a id="Ext.Resizable-disableTrackOver"></a>\r
  92             <b>disableTrackOver</b> : Boolean            <div class="mdesc">\r
  93                             True to disable mouse tracking. This is only applied at config time. (defaults to false)                        </div>\r
  94         </td>\r
  95         <td class="msource">Resizable</td>\r
  96     </tr>\r
  97         <tr class="config-row">\r
  98         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  99         <td class="sig">\r
 100         <a id="Ext.Resizable-draggable"></a>\r
 101             <b>draggable</b> : Boolean            <div class="mdesc">\r
 102                             Convenience to initialize drag drop (defaults to false)                        </div>\r
 103         </td>\r
 104         <td class="msource">Resizable</td>\r
 105     </tr>\r
 106         <tr class="config-row alt">\r
 107         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 108         <td class="sig">\r
 109         <a id="Ext.Resizable-duration"></a>\r
 110             <b>duration</b> : Number            <div class="mdesc">\r
 111                             Animation duration if animate = true (defaults to .35)                        </div>\r
 112         </td>\r
 113         <td class="msource">Resizable</td>\r
 114     </tr>\r
 115         <tr class="config-row">\r
 116         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 117         <td class="sig">\r
 118         <a id="Ext.Resizable-dynamic"></a>\r
 119             <b>dynamic</b> : Boolean            <div class="mdesc">\r
 120                             True to resize the element while dragging instead of using a proxy (defaults to false)                        </div>\r
 121         </td>\r
 122         <td class="msource">Resizable</td>\r
 123     </tr>\r
 124         <tr class="config-row alt">\r
 125         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 126         <td class="sig">\r
 127         <a id="Ext.Resizable-easing"></a>\r
 128             <b>easing</b> : String            <div class="mdesc">\r
 129                             Animation easing if animate = true (defaults to 'easingOutStrong')                        </div>\r
 130         </td>\r
 131         <td class="msource">Resizable</td>\r
 132     </tr>\r
 133         <tr class="config-row">\r
 134         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 135         <td class="sig">\r
 136         <a id="Ext.Resizable-enabled"></a>\r
 137             <b>enabled</b> : Boolean            <div class="mdesc">\r
 138                             False to disable resizing (defaults to true)                        </div>\r
 139         </td>\r
 140         <td class="msource">Resizable</td>\r
 141     </tr>\r
 142         <tr class="config-row alt">\r
 143         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 144         <td class="sig">\r
 145         <a id="Ext.Resizable-handles"></a>\r
 146             <b>handles</b> : String            <div class="mdesc">\r
 147                             String consisting of the resize handles to display (defaults to undefined)                        </div>\r
 148         </td>\r
 149         <td class="msource">Resizable</td>\r
 150     </tr>\r
 151         <tr class="config-row">\r
 152         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 153         <td class="sig">\r
 154         <a id="Ext.Resizable-height"></a>\r
 155             <b>height</b> : Number            <div class="mdesc">\r
 156                             The height of the element in pixels (defaults to null)                        </div>\r
 157         </td>\r
 158         <td class="msource">Resizable</td>\r
 159     </tr>\r
 160         <tr class="config-row alt">\r
 161         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 162         <td class="sig">\r
 163         <a id="Ext.Resizable-heightIncrement"></a>\r
 164             <b>heightIncrement</b> : Number            <div class="mdesc">\r
 165                             The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)                        </div>\r
 166         </td>\r
 167         <td class="msource">Resizable</td>\r
 168     </tr>\r
 169         <tr class="config-row inherited expandable">\r
 170         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 171         <td class="sig">\r
 172         <a id="Ext.Resizable-listeners"></a>\r
 173             <b>listeners</b> : Object            <div class="mdesc">\r
 174                         <div class="short">(optional) A config object containing one or more event handlers to be added to this object during initialization. Th...</div>\r
 175             <div class="long">\r
 176                 (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
 177                         </div>\r
 178         </td>\r
 179         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#listeners" href="output/Ext.util.Observable.html#listeners">Observable</a></td>\r
 180     </tr>\r
 181         <tr class="config-row alt">\r
 182         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 183         <td class="sig">\r
 184         <a id="Ext.Resizable-maxHeight"></a>\r
 185             <b>maxHeight</b> : Number            <div class="mdesc">\r
 186                             The maximum height for the element (defaults to 10000)                        </div>\r
 187         </td>\r
 188         <td class="msource">Resizable</td>\r
 189     </tr>\r
 190         <tr class="config-row">\r
 191         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 192         <td class="sig">\r
 193         <a id="Ext.Resizable-maxWidth"></a>\r
 194             <b>maxWidth</b> : Number            <div class="mdesc">\r
 195                             The maximum width for the element (defaults to 10000)                        </div>\r
 196         </td>\r
 197         <td class="msource">Resizable</td>\r
 198     </tr>\r
 199         <tr class="config-row alt">\r
 200         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 201         <td class="sig">\r
 202         <a id="Ext.Resizable-minHeight"></a>\r
 203             <b>minHeight</b> : Number            <div class="mdesc">\r
 204                             The minimum height for the element (defaults to 5)                        </div>\r
 205         </td>\r
 206         <td class="msource">Resizable</td>\r
 207     </tr>\r
 208         <tr class="config-row">\r
 209         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 210         <td class="sig">\r
 211         <a id="Ext.Resizable-minWidth"></a>\r
 212             <b>minWidth</b> : Number            <div class="mdesc">\r
 213                             The minimum width for the element (defaults to 5)                        </div>\r
 214         </td>\r
 215         <td class="msource">Resizable</td>\r
 216     </tr>\r
 217         <tr class="config-row alt">\r
 218         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 219         <td class="sig">\r
 220         <a id="Ext.Resizable-minX"></a>\r
 221             <b>minX</b> : Number            <div class="mdesc">\r
 222                             The minimum allowed page X for the element (only used for west resizing, defaults to 0)                        </div>\r
 223         </td>\r
 224         <td class="msource">Resizable</td>\r
 225     </tr>\r
 226         <tr class="config-row">\r
 227         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 228         <td class="sig">\r
 229         <a id="Ext.Resizable-minY"></a>\r
 230             <b>minY</b> : Number            <div class="mdesc">\r
 231                             The minimum allowed page Y for the element (only used for north resizing, defaults to 0)                        </div>\r
 232         </td>\r
 233         <td class="msource">Resizable</td>\r
 234     </tr>\r
 235         <tr class="config-row alt expandable">\r
 236         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 237         <td class="sig">\r
 238         <a id="Ext.Resizable-multiDirectional"></a>\r
 239             <b>multiDirectional</b> : Boolean            <div class="mdesc">\r
 240                         <div class="short">Deprecated. The old style of adding multi-direction resize handles, deprecated in favor of the handles config option ...</div>\r
 241             <div class="long">\r
 242                 <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated in favor of the handles config option (defaults to false)            </div>\r
 243                         </div>\r
 244         </td>\r
 245         <td class="msource">Resizable</td>\r
 246     </tr>\r
 247         <tr class="config-row expandable">\r
 248         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 249         <td class="sig">\r
 250         <a id="Ext.Resizable-pinned"></a>\r
 251             <b>pinned</b> : Boolean            <div class="mdesc">\r
 252                         <div class="short">True to ensure that the resize handles are always visible, false to display them only when the user mouses over the r...</div>\r
 253             <div class="long">\r
 254                 True to ensure that the resize handles are always visible, false to display them only when the user mouses over the resizable borders. This is only applied at config time. (defaults to false)            </div>\r
 255                         </div>\r
 256         </td>\r
 257         <td class="msource">Resizable</td>\r
 258     </tr>\r
 259         <tr class="config-row alt">\r
 260         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 261         <td class="sig">\r
 262         <a id="Ext.Resizable-preserveRatio"></a>\r
 263             <b>preserveRatio</b> : Boolean            <div class="mdesc">\r
 264                             True to preserve the original ratio between height and width during resize (defaults to false)                        </div>\r
 265         </td>\r
 266         <td class="msource">Resizable</td>\r
 267     </tr>\r
 268         <tr class="config-row">\r
 269         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 270         <td class="sig">\r
 271         <a id="Ext.Resizable-resizeChild"></a>\r
 272             <b>resizeChild</b> : Boolean/String/Element            <div class="mdesc">\r
 273                             True to resize the first child, or id/element to resize (defaults to false)                        </div>\r
 274         </td>\r
 275         <td class="msource">Resizable</td>\r
 276     </tr>\r
 277         <tr class="config-row alt">\r
 278         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 279         <td class="sig">\r
 280         <a id="Ext.Resizable-resizeRegion"></a>\r
 281             <b>resizeRegion</b> : Ext.lib.Region            <div class="mdesc">\r
 282                             Constrain the resize to a particular region                        </div>\r
 283         </td>\r
 284         <td class="msource">Resizable</td>\r
 285     </tr>\r
 286         <tr class="config-row">\r
 287         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 288         <td class="sig">\r
 289         <a id="Ext.Resizable-transparent"></a>\r
 290             <b>transparent</b> : Boolean            <div class="mdesc">\r
 291                             True for transparent handles. This is only applied at config time. (defaults to false)                        </div>\r
 292         </td>\r
 293         <td class="msource">Resizable</td>\r
 294     </tr>\r
 295         <tr class="config-row alt">\r
 296         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 297         <td class="sig">\r
 298         <a id="Ext.Resizable-width"></a>\r
 299             <b>width</b> : Number            <div class="mdesc">\r
 300                             The width of the element in pixels (defaults to null)                        </div>\r
 301         </td>\r
 302         <td class="msource">Resizable</td>\r
 303     </tr>\r
 304         <tr class="config-row">\r
 305         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 306         <td class="sig">\r
 307         <a id="Ext.Resizable-widthIncrement"></a>\r
 308             <b>widthIncrement</b> : Number            <div class="mdesc">\r
 309                             The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)                        </div>\r
 310         </td>\r
 311         <td class="msource">Resizable</td>\r
 312     </tr>\r
 313         <tr class="config-row alt">\r
 314         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 315         <td class="sig">\r
 316         <a id="Ext.Resizable-wrap"></a>\r
 317             <b>wrap</b> : Boolean            <div class="mdesc">\r
 318                             True to wrap an element with a div if needed (required for textareas and images, defaults to false)                        </div>\r
 319         </td>\r
 320         <td class="msource">Resizable</td>\r
 321     </tr>\r
 322             </table>
 323                 <a id="Ext.Resizable-props"></a>
 324         <h2>Public Properties</h2>
 325                 <table cellspacing="0" class="member-table">
 326             <tr>
 327                 <th class="sig-header" colspan="2">Property</th>
 328                 <th class="msource-header">Defined By</th>
 329             </tr>
 330                 <tr class="property-row expandable">\r
 331         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 332         <td class="sig">\r
 333         <a id="Ext.Resizable-proxy"></a>\r
 334             <b>proxy</b> : Ext.Element.            <div class="mdesc">\r
 335                         <div class="short">The proxy Element that is resized in place of the real Element during the resize operation.
 336 This may be queried using...</div>\r
 337             <div class="long">\r
 338                 The proxy Element that is resized in place of the real Element during the resize operation.
 339 This may be queried using <a ext:cls="Ext.Element" ext:member="getBox" href="output/Ext.Element.html#getBox">Ext.Element.getBox</a> to provide the new area to resize to.
 340 Read only.            </div>\r
 341                         </div>\r
 342         </td>\r
 343         <td class="msource">Resizable</td>\r
 344     </tr>\r
 345             </table>
 346                 <a id="Ext.Resizable-methods"></a>
 347         <h2>Public Methods</h2>
 348                 <table cellspacing="0" class="member-table">
 349             <tr>
 350                 <th class="sig-header" colspan="2">Method</th>
 351                 <th class="msource-header">Defined By</th>
 352             </tr>
 353                 <tr class="method-row expandable">\r
 354         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 355         <td class="sig">\r
 356         <a id="Ext.Resizable-Resizable"></a>\r
 357             <b>Resizable</b>(&nbsp;<code>Mixed el</code>, <code>Object config</code>&nbsp;)            <div class="mdesc">\r
 358                         <div class="short">Create a new resizable component</div>\r
 359             <div class="long">\r
 360                 Create a new resizable component    <div class="mdetail-params">\r
 361         <strong>Parameters:</strong>\r
 362         <ul><li><code>el</code> : Mixed<div class="sub-desc">The id or element to resize</div></li><li><code>config</code> : Object<div class="sub-desc">configuration options</div></li>        </ul>\r
 363         <strong>Returns:</strong>\r
 364         <ul>\r
 365             <li><code></code></li>\r
 366         </ul>\r
 367     </div>\r
 368                 </div>\r
 369                         </div>\r
 370         </td>\r
 371         <td class="msource">Resizable</td>\r
 372     </tr>\r
 373         <tr class="method-row inherited alt expandable">\r
 374         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 375         <td class="sig">\r
 376         <a id="Ext.Resizable-addEvents"></a>\r
 377             <b>addEvents</b>(&nbsp;<code>Object object</code>&nbsp;) : void            <div class="mdesc">\r
 378                         <div class="short">Used to define events on this Observable</div>\r
 379             <div class="long">\r
 380                 Used to define events on this Observable    <div class="mdetail-params">\r
 381         <strong>Parameters:</strong>\r
 382         <ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li>        </ul>\r
 383         <strong>Returns:</strong>\r
 384         <ul>\r
 385             <li><code>void</code></li>\r
 386         </ul>\r
 387     </div>\r
 388                 </div>\r
 389                         </div>\r
 390         </td>\r
 391         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="output/Ext.util.Observable.html#addEvents">Observable</a></td>\r
 392     </tr>\r
 393         <tr class="method-row inherited expandable">\r
 394         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 395         <td class="sig">\r
 396         <a id="Ext.Resizable-addListener"></a>\r
 397             <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
 398                         <div class="short">Appends an event handler to this component</div>\r
 399             <div class="long">\r
 400                 Appends an event handler to this component    <div class="mdetail-params">\r
 401         <strong>Parameters:</strong>\r
 402         <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
 403 function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration
 404 properties. This may contain any of the following properties:<ul>
 405 <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>
 406 <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>
 407 <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>
 408 <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
 409 by the specified number of milliseconds. If the event fires again within that time, the original
 410 handler is <em>not</em> invoked, but the new handler is scheduled in its place.</p></li>
 411 </ul><br>
 412 <p>
 413 <b>Combining Options</b><br>
 414 Using the options argument, it is possible to combine different types of listeners:<br>
 415 <br>
 416 A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
 417 <pre><code>el.on(<em>'click'</em>, <b>this</b>.onClick, <b>this</b>, {
 418     single: true,
 419     delay: 100,
 420     forumId: 4
 421 });</code></pre>
 422 <p>
 423 <b>Attaching multiple handlers in 1 call</b><br>
 424 The method also allows for a single argument to be passed which is a config object containing properties
 425 which specify multiple handlers.
 426 <p>
 427 <pre><code>foo.on({
 428     <em>'click'</em> : {
 429         fn: <b>this</b>.onClick,
 430         scope: <b>this</b>,
 431         delay: 100
 432     },
 433     <em>'mouseover'</em> : {
 434         fn: <b>this</b>.onMouseOver,
 435         scope: <b>this</b>
 436     },
 437     <em>'mouseout'</em> : {
 438         fn: <b>this</b>.onMouseOut,
 439         scope: <b>this</b>
 440     }
 441 });</code></pre>
 442 <p>
 443 Or a shorthand syntax:<br>
 444 <pre><code>foo.on({
 445     <em>'click'</em> : <b>this</b>.onClick,
 446     <em>'mouseover'</em> : <b>this</b>.onMouseOver,
 447     <em>'mouseout'</em> : <b>this</b>.onMouseOut,
 448      scope: <b>this</b>
 449 });</code></pre></div></li>        </ul>\r
 450         <strong>Returns:</strong>\r
 451         <ul>\r
 452             <li><code>void</code></li>\r
 453         </ul>\r
 454     </div>\r
 455                 </div>\r
 456                         </div>\r
 457         </td>\r
 458         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addListener" href="output/Ext.util.Observable.html#addListener">Observable</a></td>\r
 459     </tr>\r
 460         <tr class="method-row alt expandable">\r
 461         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 462         <td class="sig">\r
 463         <a id="Ext.Resizable-destroy"></a>\r
 464             <b>destroy</b>(&nbsp;<span class="optional" title="Optional">[<code>Boolean removeEl</code>]</span>&nbsp;) : void            <div class="mdesc">\r
 465                         <div class="short">Destroys this resizable. If the element was wrapped and
 466 removeEl is not true then the element remains.</div>\r
 467             <div class="long">\r
 468                 Destroys this resizable. If the element was wrapped and
 469 removeEl is not true then the element remains.    <div class="mdetail-params">\r
 470         <strong>Parameters:</strong>\r
 471         <ul><li><code>removeEl</code> : Boolean<div class="sub-desc">(optional) true to remove the element from the DOM</div></li>        </ul>\r
 472         <strong>Returns:</strong>\r
 473         <ul>\r
 474             <li><code>void</code></li>\r
 475         </ul>\r
 476     </div>\r
 477                 </div>\r
 478                         </div>\r
 479         </td>\r
 480         <td class="msource">Resizable</td>\r
 481     </tr>\r
 482         <tr class="method-row inherited expandable">\r
 483         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 484         <td class="sig">\r
 485         <a id="Ext.Resizable-fireEvent"></a>\r
 486             <b>fireEvent</b>(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;) : Boolean            <div class="mdesc">\r
 487                         <div class="short">Fires the specified event with the passed parameters (minus the event name).</div>\r
 488             <div class="long">\r
 489                 Fires the specified event with the passed parameters (minus the event name).    <div class="mdetail-params">\r
 490         <strong>Parameters:</strong>\r
 491         <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
 492         <strong>Returns:</strong>\r
 493         <ul>\r
 494             <li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true</div></li>\r
 495         </ul>\r
 496     </div>\r
 497                 </div>\r
 498                         </div>\r
 499         </td>\r
 500         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="output/Ext.util.Observable.html#fireEvent">Observable</a></td>\r
 501     </tr>\r
 502         <tr class="method-row alt expandable">\r
 503         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 504         <td class="sig">\r
 505         <a id="Ext.Resizable-getEl"></a>\r
 506             <b>getEl</b>() : Ext.Element            <div class="mdesc">\r
 507                         <div class="short">Returns the element this component is bound to.</div>\r
 508             <div class="long">\r
 509                 Returns the element this component is bound to.    <div class="mdetail-params">\r
 510         <strong>Parameters:</strong>\r
 511         <ul><li>None.</li>        </ul>\r
 512         <strong>Returns:</strong>\r
 513         <ul>\r
 514             <li><code>Ext.Element</code></li>\r
 515         </ul>\r
 516     </div>\r
 517                 </div>\r
 518                         </div>\r
 519         </td>\r
 520         <td class="msource">Resizable</td>\r
 521     </tr>\r
 522         <tr class="method-row expandable">\r
 523         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 524         <td class="sig">\r
 525         <a id="Ext.Resizable-getResizeChild"></a>\r
 526             <b>getResizeChild</b>() : Ext.Element            <div class="mdesc">\r
 527                         <div class="short">Returns the resizeChild element (or null).</div>\r
 528             <div class="long">\r
 529                 Returns the resizeChild element (or null).    <div class="mdetail-params">\r
 530         <strong>Parameters:</strong>\r
 531         <ul><li>None.</li>        </ul>\r
 532         <strong>Returns:</strong>\r
 533         <ul>\r
 534             <li><code>Ext.Element</code></li>\r
 535         </ul>\r
 536     </div>\r
 537                 </div>\r
 538                         </div>\r
 539         </td>\r
 540         <td class="msource">Resizable</td>\r
 541     </tr>\r
 542         <tr class="method-row inherited alt expandable">\r
 543         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 544         <td class="sig">\r
 545         <a id="Ext.Resizable-hasListener"></a>\r
 546             <b>hasListener</b>(&nbsp;<code>String eventName</code>&nbsp;) : Boolean            <div class="mdesc">\r
 547                         <div class="short">Checks to see if this object has any listeners for a specified event</div>\r
 548             <div class="long">\r
 549                 Checks to see if this object has any listeners for a specified event    <div class="mdetail-params">\r
 550         <strong>Parameters:</strong>\r
 551         <ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li>        </ul>\r
 552         <strong>Returns:</strong>\r
 553         <ul>\r
 554             <li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li>\r
 555         </ul>\r
 556     </div>\r
 557                 </div>\r
 558                         </div>\r
 559         </td>\r
 560         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="output/Ext.util.Observable.html#hasListener">Observable</a></td>\r
 561     </tr>\r
 562         <tr class="method-row inherited expandable">\r
 563         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 564         <td class="sig">\r
 565         <a id="Ext.Resizable-on"></a>\r
 566             <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
 567                         <div class="short">Appends an event handler to this element (shorthand for addListener)</div>\r
 568             <div class="long">\r
 569                 Appends an event handler to this element (shorthand for addListener)    <div class="mdetail-params">\r
 570         <strong>Parameters:</strong>\r
 571         <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
 572 function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional)</div></li>        </ul>\r
 573         <strong>Returns:</strong>\r
 574         <ul>\r
 575             <li><code>void</code></li>\r
 576         </ul>\r
 577     </div>\r
 578                 </div>\r
 579                         </div>\r
 580         </td>\r
 581         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#on" href="output/Ext.util.Observable.html#on">Observable</a></td>\r
 582     </tr>\r
 583         <tr class="method-row inherited alt expandable">\r
 584         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 585         <td class="sig">\r
 586         <a id="Ext.Resizable-purgeListeners"></a>\r
 587             <b>purgeListeners</b>() : void            <div class="mdesc">\r
 588                         <div class="short">Removes all listeners for this object</div>\r
 589             <div class="long">\r
 590                 Removes all listeners for this object    <div class="mdetail-params">\r
 591         <strong>Parameters:</strong>\r
 592         <ul><li>None.</li>        </ul>\r
 593         <strong>Returns:</strong>\r
 594         <ul>\r
 595             <li><code>void</code></li>\r
 596         </ul>\r
 597     </div>\r
 598                 </div>\r
 599                         </div>\r
 600         </td>\r
 601         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="output/Ext.util.Observable.html#purgeListeners">Observable</a></td>\r
 602     </tr>\r
 603         <tr class="method-row inherited expandable">\r
 604         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 605         <td class="sig">\r
 606         <a id="Ext.Resizable-relayEvents"></a>\r
 607             <b>relayEvents</b>(&nbsp;<code>Object o</code>, <code>Array events</code>&nbsp;) : void            <div class="mdesc">\r
 608                         <div class="short">Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.</div>\r
 609             <div class="long">\r
 610                 Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.    <div class="mdetail-params">\r
 611         <strong>Parameters:</strong>\r
 612         <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
 613         <strong>Returns:</strong>\r
 614         <ul>\r
 615             <li><code>void</code></li>\r
 616         </ul>\r
 617     </div>\r
 618                 </div>\r
 619                         </div>\r
 620         </td>\r
 621         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#relayEvents" href="output/Ext.util.Observable.html#relayEvents">Observable</a></td>\r
 622     </tr>\r
 623         <tr class="method-row inherited alt expandable">\r
 624         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 625         <td class="sig">\r
 626         <a id="Ext.Resizable-removeListener"></a>\r
 627             <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
 628                         <div class="short">Removes a listener</div>\r
 629             <div class="long">\r
 630                 Removes a listener    <div class="mdetail-params">\r
 631         <strong>Parameters:</strong>\r
 632         <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
 633         <strong>Returns:</strong>\r
 634         <ul>\r
 635             <li><code>void</code></li>\r
 636         </ul>\r
 637     </div>\r
 638                 </div>\r
 639                         </div>\r
 640         </td>\r
 641         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="output/Ext.util.Observable.html#removeListener">Observable</a></td>\r
 642     </tr>\r
 643         <tr class="method-row expandable">\r
 644         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 645         <td class="sig">\r
 646         <a id="Ext.Resizable-resizeElement"></a>\r
 647             <b>resizeElement</b>() : void            <div class="mdesc">\r
 648                         <div class="short">Performs resizing of the associated Element. This method is called internally by this
 649 class, and should not be called...</div>\r
 650             <div class="long">\r
 651                 <p>Performs resizing of the associated Element. This method is called internally by this
 652 class, and should not be called by user code.</p>
 653 <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
 654 component such as a Panel, this method may be overridden by specifying an implementation
 655 as a config option to provide appropriate behaviour at the end of the resize operation on
 656 mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
 657 <p>The new area to be resized to is available by examining the state of the <a ext:cls="Ext.Resizable" ext:member="proxy" href="output/Ext.Resizable.html#proxy">proxy</a>
 658 Element. Example:\r
 659 <pre><code>new Ext.Panel({
 660     title: <em>'Resize me'</em>,
 661     x: 100,
 662     y: 100,
 663     renderTo: Ext.getBody(),
 664     floating: true,
 665     frame: true,
 666     width: 400,
 667     height: 200,
 668     listeners: {
 669         render: <b>function</b>(p) {
 670             <b>new</b> Ext.Resizable(p.getEl(), {
 671                 handles: <em>'all'</em>,
 672                 pinned: true,
 673                 transparent: true,
 674                 resizeElement: <b>function</b>() {
 675                     <b>var</b> box = <b>this</b>.proxy.getBox();
 676                     p.updateBox(box);
 677                     <b>if</b> (p.layout) {
 678                         p.doLayout();
 679                     }
 680                     <b>return</b> box;
 681                 }
 682            });
 683        }
 684     }
 685 }).show();</code></pre>    <div class="mdetail-params">\r
 686         <strong>Parameters:</strong>\r
 687         <ul><li>None.</li>        </ul>\r
 688         <strong>Returns:</strong>\r
 689         <ul>\r
 690             <li><code>void</code></li>\r
 691         </ul>\r
 692     </div>\r
 693                 </div>\r
 694                         </div>\r
 695         </td>\r
 696         <td class="msource">Resizable</td>\r
 697     </tr>\r
 698         <tr class="method-row alt expandable">\r
 699         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 700         <td class="sig">\r
 701         <a id="Ext.Resizable-resizeTo"></a>\r
 702             <b>resizeTo</b>(&nbsp;<code>Number width</code>, <code>Number height</code>&nbsp;) : void            <div class="mdesc">\r
 703                         <div class="short">
 704 Perform a manual resize</div>\r
 705             <div class="long">\r
 706
 707 Perform a manual resize    <div class="mdetail-params">\r
 708         <strong>Parameters:</strong>\r
 709         <ul><li><code>width</code> : Number<div class="sub-desc"></div></li><li><code>height</code> : Number<div class="sub-desc"></div></li>        </ul>\r
 710         <strong>Returns:</strong>\r
 711         <ul>\r
 712             <li><code>void</code></li>\r
 713         </ul>\r
 714     </div>\r
 715                 </div>\r
 716                         </div>\r
 717         </td>\r
 718         <td class="msource">Resizable</td>\r
 719     </tr>\r
 720         <tr class="method-row inherited expandable">\r
 721         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 722         <td class="sig">\r
 723         <a id="Ext.Resizable-resumeEvents"></a>\r
 724             <b>resumeEvents</b>() : void            <div class="mdesc">\r
 725                         <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
 726             <div class="long">\r
 727                 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
 728         <strong>Parameters:</strong>\r
 729         <ul><li>None.</li>        </ul>\r
 730         <strong>Returns:</strong>\r
 731         <ul>\r
 732             <li><code>void</code></li>\r
 733         </ul>\r
 734     </div>\r
 735                 </div>\r
 736                         </div>\r
 737         </td>\r
 738         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">Observable</a></td>\r
 739     </tr>\r
 740         <tr class="method-row inherited alt expandable">\r
 741         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 742         <td class="sig">\r
 743         <a id="Ext.Resizable-suspendEvents"></a>\r
 744             <b>suspendEvents</b>() : void            <div class="mdesc">\r
 745                         <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
 746             <div class="long">\r
 747                 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
 748         <strong>Parameters:</strong>\r
 749         <ul><li>None.</li>        </ul>\r
 750         <strong>Returns:</strong>\r
 751         <ul>\r
 752             <li><code>void</code></li>\r
 753         </ul>\r
 754     </div>\r
 755                 </div>\r
 756                         </div>\r
 757         </td>\r
 758         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">Observable</a></td>\r
 759     </tr>\r
 760         <tr class="method-row inherited expandable">\r
 761         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 762         <td class="sig">\r
 763         <a id="Ext.Resizable-un"></a>\r
 764             <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
 765                         <div class="short">Removes a listener (shorthand for removeListener)</div>\r
 766             <div class="long">\r
 767                 Removes a listener (shorthand for removeListener)    <div class="mdetail-params">\r
 768         <strong>Parameters:</strong>\r
 769         <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
 770         <strong>Returns:</strong>\r
 771         <ul>\r
 772             <li><code>void</code></li>\r
 773         </ul>\r
 774     </div>\r
 775                 </div>\r
 776                         </div>\r
 777         </td>\r
 778         <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#un" href="output/Ext.util.Observable.html#un">Observable</a></td>\r
 779     </tr>\r
 780             </table>
 781                 <a id="Ext.Resizable-events"></a>
 782         <h2>Public Events</h2>
 783                 <table cellspacing="0" class="member-table">
 784             <tr>
 785                 <th class="sig-header" colspan="2">Event</th>
 786                 <th class="msource-header">Defined By</th>
 787             </tr>
 788                 <tr class="event-row expandable">\r
 789         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 790         <td class="sig">\r
 791         <a id="Ext.Resizable-beforeresize"></a>\r
 792             <b>beforeresize</b> : (&nbsp;<code>Ext.Resizable this</code>, <code>Ext.EventObject e</code>&nbsp;)            <div class="mdesc">\r
 793                         <div class="short">
 794 Fired before resize is allowed. Set enabled to false to cancel resize.</div>\r
 795             <div class="long">\r
 796
 797 Fired before resize is allowed. Set enabled to false to cancel resize.    <div class="mdetail-params">\r
 798         <strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong>\r
 799         <ul><li><code>this</code> : Ext.Resizable<div class="sub-desc"></div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc">The mousedown event</div></li>        </ul>\r
 800     </div>\r
 801                 </div>\r
 802                         </div>\r
 803         </td>\r
 804         <td class="msource">Resizable</td>\r
 805     </tr>\r
 806         <tr class="event-row alt expandable">\r
 807         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 808         <td class="sig">\r
 809         <a id="Ext.Resizable-resize"></a>\r
 810             <b>resize</b> : (&nbsp;<code>Ext.Resizable this</code>, <code>Number width</code>, <code>Number height</code>, <code>Ext.EventObject e</code>&nbsp;)            <div class="mdesc">\r
 811                         <div class="short">
 812 Fired after a resize.</div>\r
 813             <div class="long">\r
 814
 815 Fired after a resize.    <div class="mdetail-params">\r
 816         <strong style="font-weight:normal;">Listeners will be called with the following arguments:</strong>\r
 817         <ul><li><code>this</code> : Ext.Resizable<div class="sub-desc"></div></li><li><code>width</code> : Number<div class="sub-desc">The new width</div></li><li><code>height</code> : Number<div class="sub-desc">The new height</div></li><li><code>e</code> : Ext.EventObject<div class="sub-desc">The mouseup event</div></li>        </ul>\r
 818     </div>\r
 819                 </div>\r
 820                         </div>\r
 821         </td>\r
 822         <td class="msource">Resizable</td>\r
 823     </tr>\r
 824             </table>
 825
 826         </div>