git.roojs.org Git - roojs1/blob - docs/symbols/Roo.KeyMap.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2
   3
   4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   5
   6         <head>
   7                 <meta http-equiv="content-type" content="text/html; charset=undefined" />
   8                 <meta name="generator" content="JsDoc Toolkit" />
   9
  10
  11                 <title>JsDoc Reference - Roo.KeyMap</title>
  12
  13
  14         <link rel="stylesheet" type="text/css" href="../../css/roojs.css" />
  15         <link rel="stylesheet" type="text/css" href="../default.css" />
  16
  17
  18         <script type="text/javascript" src="../page.js">
  19
  20         </script>
  21
  22
  23         </head>
  24
  25         <body onload="RooDocsPage.onload();">
  26
  27
  28 <div class="body-wrap">
  29
  30     <!-- ============================== links to methods. ================================= -->
  31
  32     <div class="top-tools">
  33     <!--
  34         <a class="inner-link" href="#Roo.KeyMap-props"><img src="resources/s.gif" class="item-icon icon-prop">Properties</a>
  35         <a class="inner-link" href="#Roo.KeyMap-methods"><img src="resources/s.gif" class="item-icon icon-method">Methods</a>
  36         <a class="inner-link" href="#Roo.KeyMap-events"><img src="resources/s.gif" class="item-icon icon-event">Events</a>
  37         <a class="inner-link" href="#Roo.KeyMap-configs"><img src="resources/s.gif" class="item-icon icon-config">Config Options</a>
  38         <a class="bookmark" href="NEED_TO_CREATE_DIRECT_LINK_HREF"><img src="resources/s.gif" class="item-icon icon-fav">Direct Link</a>
  39         -->
  40     </div>
  41
  42
  43 <!-- ============================== inheritance Block. ================================= -->
  44
  45 <!-- ============================== class title / details ============================ -->
  46
  47
  48     <h1 class="classTitle">
  49
  50                                 Class Roo.KeyMap
  51                         </h1>
  52
  53     <table cellspacing="0" class="class-summary-table">
  54
  55                 <tr><td class="label">Package:</td><td class="hd-info">Roo</td></tr>
  56
  57         <tr><td class="label">Defined In:</td><td class="hd-info">
  58
  59                                         <a href="./src/Roo_KeyMap.js.html">Roo/KeyMap.js</a>.
  60
  61         </td></tr>
  62         <tr><td class="label">Class:</td><td class="hd-info">KeyMap</td></tr>
  63
  64
  65
  66
  67     </table>
  68
  69
  70 <!-- ============================== class summary ========================== -->
  71     <div class="description">
  72         Handles mapping keys to actions for an element. One key map can be used for multiple actions.<br/>The constructor accepts the same config object as defined by {<b>link</b> <b>addBinding</b>}.<br/>If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key<br/>combination it will call the function with this signature (if the match is a multi-key<br/>combination the callback will still be called only once): (String key, Roo.EventObject e)<br/>A KeyMap can also handle a string representation of keys.<br /><br/>Usage:<br/> <pre><code><br/>// map one key by key code<br/>var map = new Roo.KeyMap("my-element", {<br/>    key: 13, // or Roo.EventObject.ENTER<br/>    fn: myHandler,<br/>    scope: myObject<br/>});<br/><br/>// map multiple keys to one action by string<br/>var map = new Roo.KeyMap("my-element", {<br/>    key: "a\r\n\t",<br/>    fn: myHandler,<br/>    scope: myObject<br/>});<br/><br/>// map multiple keys to multiple actions by strings and array of codes<br/>var map = new Roo.KeyMap("my-element", [<br/>    {<br/>        key: [10,13],<br/>        fn: function(){ alert("Return was pressed"); }<br/>    }, {<br/>        key: "abc",<br/>        fn: function(){ alert('a, b or c was pressed'); }<br/>    }, {<br/>        key: "\t",<br/>        ctrl:true,<br/>        shift:true,<br/>        fn: function(){ alert('Control + shift + tab was pressed.'); }<br/>    }<br/>]);<br/></code></pre><br/><b>Note: A KeyMap starts enabled</b>
  73     </div>
  74
  75
  76 <!-- ============================== Class comment block... ========================== -->
  77
  78 <div class="comments">
  79         <b>Class Comments / Notes</B> =>
  80         <u onclick="parent.CommentDialog.showCommentId = 'Roo.KeyMap';">[Add Your comment/notes about this class]</u>
  81         <br/>
  82         <iframe frameborder="0"  id="comments-Roo" style="border: none;width:100%;"
  83                 src="/blog.php/GtkDjsComments/Roo.KeyMap.html"></iframe>
  84 </div>
  85
  86
  87
  88 <!-- ============================== config options ========================== -->
  89
  90
  91
  92
  93     <div class="hr"></div>
  94     <a id="Roo.KeyMap-configs"></a>
  95
  96
  97
  98      <table cellspacing="0" class="member-table">
  99       <caption class="Empty">Config Options - Has None</caption>
 100      </table>
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113   <!-- ============================== public properties ==================== -->
 114
 115
 116
 117     <a id="Roo.KeyMap-props"></a>
 118
 119
 120
 121
 122
 123      <table cellspacing="0" class="member-table">
 124       <caption class="Empty">Public Properties - Has None</caption>
 125      </table>
 126
 127
 128
 129
 130   <!-- ============================== methods summary / details ======================== -->
 131
 132
 133   <a id="Roo.KeyMap-methods"></a>
 134         <!-- constructor?? -->
 135
 136         <!-- static's first
 137
 138
 139         -->
 140
 141         <!-- then dynamics first -->
 142
 143
 144
 145
 146
 147
 148       <table cellspacing="0" class="member-table">
 149       <caption>Public Methods</caption>
 150         <tr>
 151             <th class="sig-header" colspan="2">Method</th>
 152             <th class="msource-header">Defined By</th>
 153
 154         </tr>
 155
 156
 157
 158
 159
 160
 161
 162           <tr class="method-row config-row-alt0 expandable notInherited">
 163             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 164
 165
 166             <td class="sig">
 167                 <a id="Roo-method-KeyMap"   name=".KeyMap"></a>
 168                 <div class="fixedFont">
 169                         <span class="attributes">new <B>Roo.</B></span><b class="itemname">KeyMap</b>
 170
 171                                  (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Roo.Element <B><i>el</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>config</i></B>, <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>eventName</i></B>)
 172
 173
 174
 175                 </div>
 176                 <div class="mdesc">
 177
 178
 179                         <div class="short">Create a new Roo.KeyMap</div>
 180
 181
 182                     <div class="long">
 183
 184
 185
 186                                 Create a new Roo.KeyMap
 187
 188
 189                                 <dl class="detailList">
 190                                 <dt class="heading">Parameters:</dt>
 191
 192                                         <dt>
 193                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Roo.Element</span>  <b>el</b>
 194
 195                                         </dt>
 196                                         <dd>The element to bind to</dd>
 197
 198                                         <dt>
 199                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>config</b>
 200
 201                                         </dt>
 202                                         <dd>The config (see {<b>link</b> <b>addBinding</b>})</dd>
 203
 204                                         <dt>
 205                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span>  <b>eventName</b>
 206
 207                                         </dt>
 208                                         <dd>(optional) The event to bind to (defaults to "keydown")</dd>
 209
 210                                 </dl>
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222                     </div>
 223                 </div>
 224
 225             </td>
 226             <td class="msource">
 227                 &nbsp;
 228             </td>
 229         </tr>
 230
 231
 232           <tr class="method-row config-row-alt1 expandable notInherited">
 233             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 234
 235
 236             <td class="sig">
 237                 <a id="Roo.KeyMap-method-addBinding"   name=".addBinding"></a>
 238                 <div class="fixedFont">
 239                         <span class="attributes"></span><b class="itemname">addBinding</b>
 240
 241                                  (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/Array <B><i>config</i></B>)
 242
 243
 244
 245                 </div>
 246                 <div class="mdesc">
 247
 248                    <div class="short">Add a new binding to this KeyMap.</div>
 249
 250
 251
 252                     <div class="long">
 253
 254                                 Add a new binding to this KeyMap. The following config object properties are supported:<br/><pre><br/>Property    Type             Description<br/>----------  ---------------  ----------------------------------------------------------------------<br/>key         String/Array     A single keycode or an array of keycodes to handle<br/>shift       Boolean          True to handle key only when shift is pressed (defaults to false)<br/>ctrl        Boolean          True to handle key only when ctrl is pressed (defaults to false)<br/>alt         Boolean          True to handle key only when alt is pressed (defaults to false)<br/>fn          Function         The function to call when KeyMap finds the expected key combination<br/>scope       Object           The scope of the callback function<br/></pre><br/><br/>Usage:<br/><pre><code><br/>// Create a KeyMap<br/>var map = new Roo.KeyMap(document, {<br/>    key: Roo.EventObject.ENTER,<br/>    fn: handleKey,<br/>    scope: this<br/>});<br/><br/>//Add a new binding to the existing KeyMap later<br/>map.addBinding({<br/>    key: 'abc',<br/>    shift: true,<br/>    fn: handleKey,<br/>    scope: this<br/>});<br/></code></pre>
 255
 256
 257
 258
 259
 260
 261                                 <dl class="detailList">
 262                                 <dt class="heading">Parameters:</dt>
 263
 264                                         <dt>
 265                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/Array</span>  <b>config</b>
 266
 267                                         </dt>
 268                                         <dd>A single KeyMap config or an array of configs</dd>
 269
 270                                 </dl>
 271
 272
 273
 274
 275
 276
 277
 278
 279
 280
 281
 282                     </div>
 283                 </div>
 284
 285             </td>
 286             <td class="msource">
 287
 288                         Roo.KeyMap
 289                 &nbsp;
 290             </td>
 291         </tr>
 292
 293
 294           <tr class="method-row config-row-alt0 expandable notInherited">
 295             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 296
 297
 298             <td class="sig">
 299                 <a id="Roo.KeyMap-method-disable"   name=".disable"></a>
 300                 <div class="fixedFont">
 301                         <span class="attributes"></span><b class="itemname">disable</b>
 302
 303                                  ()
 304
 305
 306
 307                 </div>
 308                 <div class="mdesc">
 309
 310                    <div class="short">Disable this KeyMap</div>
 311
 312
 313
 314                     <div class="long">
 315
 316                                 Disable this KeyMap
 317
 318
 319
 320
 321
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331
 332
 333                     </div>
 334                 </div>
 335
 336             </td>
 337             <td class="msource">
 338
 339                         Roo.KeyMap
 340                 &nbsp;
 341             </td>
 342         </tr>
 343
 344
 345           <tr class="method-row config-row-alt1 expandable notInherited">
 346             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 347
 348
 349             <td class="sig">
 350                 <a id="Roo.KeyMap-method-enable"   name=".enable"></a>
 351                 <div class="fixedFont">
 352                         <span class="attributes"></span><b class="itemname">enable</b>
 353
 354                                  ()
 355
 356
 357
 358                 </div>
 359                 <div class="mdesc">
 360
 361                    <div class="short">Enables this KeyMap</div>
 362
 363
 364
 365                     <div class="long">
 366
 367                                 Enables this KeyMap
 368
 369
 370
 371
 372
 373
 374
 375
 376
 377
 378
 379
 380
 381
 382
 383
 384                     </div>
 385                 </div>
 386
 387             </td>
 388             <td class="msource">
 389
 390                         Roo.KeyMap
 391                 &nbsp;
 392             </td>
 393         </tr>
 394
 395
 396           <tr class="method-row config-row-alt0 expandable notInherited">
 397             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 398
 399
 400             <td class="sig">
 401                 <a id="Roo.KeyMap-method-isEnabled"   name=".isEnabled"></a>
 402                 <div class="fixedFont">
 403                         <span class="attributes"></span><b class="itemname">isEnabled</b>
 404
 405                                  ()
 406
 407
 408                                          :
 409
 410
 411                                                 <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a>
 412
 413
 414
 415
 416
 417                 </div>
 418                 <div class="mdesc">
 419
 420                    <div class="short">Returns true if this KeyMap is enabled</div>
 421
 422
 423
 424                     <div class="long">
 425
 426                                 Returns true if this KeyMap is enabled
 427
 428
 429
 430
 431
 432
 433
 434
 435
 436
 437                                 <dl class="detailList">
 438                                 <dt class="heading">Returns:</dt>
 439
 440                                         <dd><span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span>  </dd>
 441
 442                                 </dl>
 443
 444
 445
 446
 447
 448
 449
 450                     </div>
 451                 </div>
 452
 453             </td>
 454             <td class="msource">
 455
 456                         Roo.KeyMap
 457                 &nbsp;
 458             </td>
 459         </tr>
 460
 461
 462           <tr class="method-row config-row-alt1 expandable notInherited">
 463             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 464
 465
 466             <td class="sig">
 467                 <a id="Roo.KeyMap-method-on"   name=".on"></a>
 468                 <div class="fixedFont">
 469                         <span class="attributes"></span><b class="itemname">on</b>
 470
 471                                  (<a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a>/Array/Object <B><i>key</i></B>, <a href="./Function.html#constructor" roo:cls="Function.html#constructor">Function</a> <B><i>fn</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>scope</i></B>)
 472
 473
 474
 475                 </div>
 476                 <div class="mdesc">
 477
 478                    <div class="short">Shorthand for adding a single key listener</div>
 479
 480
 481
 482                     <div class="long">
 483
 484                                 Shorthand for adding a single key listener
 485
 486
 487
 488
 489
 490
 491                                 <dl class="detailList">
 492                                 <dt class="heading">Parameters:</dt>
 493
 494                                         <dt>
 495                                                 <span class="fixedFont"><a href="./Number.html#constructor" roo:cls="Number.html#constructor">Number</a>/Array/Object</span>  <b>key</b>
 496
 497                                         </dt>
 498                                         <dd>Either the numeric key code, array of key codes or an object with the<br/>following options:<br/>{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</dd>
 499
 500                                         <dt>
 501                                                 <span class="fixedFont"><a href="./Function.html#constructor" roo:cls="Function.html#constructor">Function</a></span>  <b>fn</b>
 502
 503                                         </dt>
 504                                         <dd>The function to call</dd>
 505
 506                                         <dt>
 507                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span>  <b>scope</b>
 508
 509                                         </dt>
 510                                         <dd>(optional) The scope of the function</dd>
 511
 512                                 </dl>
 513
 514
 515
 516
 517
 518
 519
 520
 521
 522
 523
 524                     </div>
 525                 </div>
 526
 527             </td>
 528             <td class="msource">
 529
 530                         Roo.KeyMap
 531                 &nbsp;
 532             </td>
 533         </tr>
 534
 535
 536     </table>
 537
 538
 539   <!-- ============================== events summary / details ======================== -->
 540
 541
 542   <a id="Roo.KeyMap-events"></a>
 543
 544
 545
 546
 547
 548      <table cellspacing="0" class="member-table">
 549       <caption class="Empty">Events - Has None</caption>
 550      </table>
 551
 552
 553
 554
 555
 556
 557
 558
 559
 560 <!-- ============================== footer ================================= -->
 561                 <div class="fineprint" style="clear:both">
 562
 563                         Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspection Doc Generator</a>  on Tue Jul 27 2010 11:05:06 GMT+0800 (HKT)
 564                         Based on
 565                         <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a>
 566                 </div>
 567         </body>
 568 </html>