docs/source/Focus.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">(function(){\r
   9 Ext.ns('Ext.a11y');\r
  10 \r
  11 Ext.a11y.Frame = Ext.extend(Object, {\r
  12     initialized: false,\r
  13     \r
  14     constructor: function(size, color){\r
  15         this.setSize(size || 1);\r
  16         this.setColor(color || '15428B');\r
  17     },\r
  18     \r
  19     init: function(){\r
  20         if (!this.initialized) {\r
  21             this.sides = [];\r
  22             \r
  23             var s, i;\r
  24             \r
  25             this.ct = Ext.DomHelper.append(document.body, {\r
  26                 cls: 'x-a11y-focusframe'\r
  27             }, true);\r
  28             \r
  29             for (i = 0; i < 4; i++) {\r
  30                 s = Ext.DomHelper.append(this.ct, {\r
  31                     cls: 'x-a11y-focusframe-side',\r
  32                     style: 'background-color: #' + this.color\r
  33                 }, true);\r
  34                 s.visibilityMode = Ext.Element.DISPLAY;\r
  35                 this.sides.push(s);\r
  36             }\r
  37             \r
  38             this.frameTask = new Ext.util.DelayedTask(function(el){\r
  39                 var newEl = Ext.get(el);\r
  40                 if (newEl != this.curEl) {\r
  41                     var w = newEl.getWidth();\r
  42                     var h = newEl.getHeight();\r
  43                     this.sides[0].show().setSize(w, this.size).anchorTo(el, 'tl', [0, -1]);\r
  44                     this.sides[2].show().setSize(w, this.size).anchorTo(el, 'bl', [0, -1]);\r
  45                     this.sides[1].show().setSize(this.size, h).anchorTo(el, 'tr', [-1, 0]);\r
  46                     this.sides[3].show().setSize(this.size, h).anchorTo(el, 'tl', [-1, 0]);\r
  47                     this.curEl = newEl;\r
  48                 }\r
  49             }, this);\r
  50             \r
  51             this.unframeTask = new Ext.util.DelayedTask(function(){\r
  52                 if (this.initialized) {\r
  53                     this.sides[0].hide();\r
  54                     this.sides[1].hide();\r
  55                     this.sides[2].hide();\r
  56                     this.sides[3].hide();\r
  57                     this.curEl = null;\r
  58                 }\r
  59             }, this);\r
  60             this.initialized = true;\r
  61         }\r
  62     },\r
  63     \r
  64     frame: function(el){\r
  65         this.init();\r
  66         this.unframeTask.cancel();\r
  67         this.frameTask.delay(2, false, false, [el]);\r
  68     },\r
  69     \r
  70     unframe: function(){\r
  71         this.init();\r
  72         this.unframeTask.delay(2);\r
  73     },\r
  74     \r
  75     setSize: function(size){\r
  76         this.size = size;\r
  77     },\r
  78     \r
  79     setColor: function(color){\r
  80         this.color = color;\r
  81     }\r
  82 });\r
  83 \r
  84 Ext.a11y.FocusFrame = new Ext.a11y.Frame(2, '15428B');\r
  85 Ext.a11y.RelayFrame = new Ext.a11y.Frame(1, '6B8CBF');\r
  86 \r
  87 Ext.a11y.Focusable = Ext.extend(Ext.util.Observable, {\r
  88     constructor: function(el, relayTo, noFrame, frameEl){\r
  89         Ext.a11y.Focusable.superclass.constructor.call(this);\r
  90         \r
  91         this.addEvents('focus', 'blur', 'left', 'right', 'up', 'down', 'esc', 'enter', 'space');\r
  92         \r
  93         if (el instanceof Ext.Component) {\r
  94             this.el = el.el;\r
  95             this.setComponent(el);\r
  96         }\r
  97         else {\r
  98             this.el = Ext.get(el);\r
  99             this.setComponent(null);\r
 100         }\r
 101         \r
 102         this.setRelayTo(relayTo)\r
 103         this.setNoFrame(noFrame);\r
 104         this.setFrameEl(frameEl);\r
 105         \r
 106         this.init();\r
 107         \r
 108         Ext.a11y.FocusMgr.register(this);\r
 109     },\r
 110     \r
 111     init: function(){\r
 112         this.el.dom.tabIndex = '1';\r
 113         this.el.addClass('x-a11y-focusable');\r
 114         this.el.on({\r
 115             focus: this.onFocus,\r
 116             blur: this.onBlur,\r
 117             keydown: this.onKeyDown,\r
 118             scope: this\r
 119         });\r
 120     },\r
 121     \r
 122     setRelayTo: function(relayTo){\r
 123         this.relayTo = relayTo ? Ext.a11y.FocusMgr.get(relayTo) : null;\r
 124     },\r
 125     \r
 126     setNoFrame: function(noFrame){\r
 127         this.noFrame = (noFrame === true) ? true : false;\r
 128     },\r
 129     \r
 130     setFrameEl: function(frameEl){\r
 131         this.frameEl = frameEl && Ext.get(frameEl) || this.el;\r
 132     },\r
 133     \r
 134     setComponent: function(cmp){\r
 135         this.component = cmp || null;\r
 136     },\r
 137     \r
 138     onKeyDown: function(e, t){\r
 139         var k = e.getKey(), SK = Ext.a11y.Focusable.SpecialKeys, ret, tf;\r
 140         \r
 141         tf = (t !== this.el.dom) ? Ext.a11y.FocusMgr.get(t, true) : this;\r
 142         if (!tf) {\r
 143             // this can happen when you are on a focused item within a panel body\r
 144             // that is not a Ext.a11y.Focusable\r
 145             tf = Ext.a11y.FocusMgr.get(Ext.fly(t).parent('.x-a11y-focusable'));\r
 146         }\r
 147         \r
 148         if (SK[k] !== undefined) {\r
 149             ret = this.fireEvent(SK[k], e, t, tf, this);\r
 150         }\r
 151         if (ret === false || this.fireEvent('keydown', e, t, tf, this) === false) {\r
 152             e.stopEvent();\r
 153         }\r
 154     },\r
 155     \r
 156     focus: function(){\r
 157         this.el.dom.focus();\r
 158     },\r
 159     \r
 160     blur: function(){\r
 161         this.el.dom.blur();\r
 162     },\r
 163     \r
 164     onFocus: function(e, t){\r
 165         this.el.addClass('x-a11y-focused');\r
 166         if (this.relayTo) {\r
 167             this.relayTo.el.addClass('x-a11y-focused-relay');\r
 168             if (!this.relayTo.noFrame) {\r
 169                 Ext.a11y.FocusFrame.frame(this.relayTo.frameEl);\r
 170             }\r
 171             if (!this.noFrame) {\r
 172                 Ext.a11y.RelayFrame.frame(this.frameEl);\r
 173             }\r
 174         }\r
 175         else {\r
 176             if (!this.noFrame) {\r
 177                 Ext.a11y.FocusFrame.frame(this.frameEl);\r
 178             }\r
 179         }\r
 180         \r
 181         this.fireEvent('focus', e, t, this);\r
 182     },\r
 183     \r
 184     onBlur: function(e, t){\r
 185         if (this.relayTo) {\r
 186             this.relayTo.el.removeClass('x-a11y-focused-relay');\r
 187             Ext.a11y.RelayFrame.unframe();\r
 188         }\r
 189         this.el.removeClass('x-a11y-focused');\r
 190         Ext.a11y.FocusFrame.unframe();\r
 191         this.fireEvent('blur', e, t, this);\r
 192     },\r
 193     \r
 194     destroy: function(){\r
 195         this.el.un('keydown', this.onKeyDown);\r
 196         this.el.un('focus', this.onFocus);\r
 197         this.el.un('blur', this.onBlur);\r
 198         this.el.removeClass('x-a11y-focusable');\r
 199         this.el.removeClass('x-a11y-focused');\r
 200         if (this.relayTo) {\r
 201             this.relayTo.el.removeClass('x-a11y-focused-relay');\r
 202         }\r
 203     }\r
 204 });\r
 205 \r
 206 Ext.a11y.FocusItem = Ext.extend(Object, {\r
 207     constructor: function(el, enableTabbing){\r
 208         Ext.a11y.FocusItem.superclass.constructor.call(this);\r
 209         \r
 210         this.el = Ext.get(el);\r
 211         this.fi = new Ext.a11y.Focusable(el);\r
 212         this.fi.setComponent(this);\r
 213         \r
 214         this.fi.on('tab', this.onTab, this);\r
 215         \r
 216         this.enableTabbing = enableTabbing === true ? true : false;\r
 217     },\r
 218     \r
 219     getEnterItem: function(){\r
 220         if (this.enableTabbing) {\r
 221             var items = this.getFocusItems();\r
 222             if (items && items.length) {\r
 223                 return items[0];\r
 224             }\r
 225         }\r
 226     },\r
 227     \r
 228     getFocusItems: function(){\r
 229         if (this.enableTabbing) {\r
 230             return this.el.query('a, button, input, select');\r
 231         }\r
 232         return null;\r
 233     },\r
 234     \r
 235     onTab: function(e, t){\r
 236         var items = this.getFocusItems(), i;\r
 237         \r
 238         if (items && items.length && (i = items.indexOf(t)) !== -1) {\r
 239             if (e.shiftKey && i > 0) {\r
 240                 e.stopEvent();\r
 241                 items[i - 1].focus();\r
 242                 Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);\r
 243                 return;\r
 244             }\r
 245             else \r
 246                 if (!e.shiftKey && i < items.length - 1) {\r
 247                     e.stopEvent();\r
 248                     items[i + 1].focus();\r
 249                     Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);\r
 250                     return;\r
 251                 }\r
 252         }\r
 253     },\r
 254     \r
 255     focus: function(){\r
 256         if (this.enableTabbing) {\r
 257             var items = this.getFocusItems();\r
 258             if (items && items.length) {\r
 259                 items[0].focus();\r
 260                 Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);\r
 261                 return;\r
 262             }\r
 263         }\r
 264         this.fi.focus();\r
 265     },\r
 266     \r
 267     blur: function(){\r
 268         this.fi.blur();\r
 269     }\r
 270 });\r
 271 \r
 272 Ext.a11y.FocusMgr = function(){\r
 273     var all = new Ext.util.MixedCollection();\r
 274     \r
 275     return {\r
 276         register: function(f){\r
 277             all.add(f.el && Ext.id(f.el), f);\r
 278         },\r
 279         \r
 280         unregister: function(f){\r
 281             all.remove(f);\r
 282         },\r
 283         \r
 284         get: function(el, noCreate){\r
 285             return all.get(Ext.id(el)) || (noCreate ? false : new Ext.a11y.Focusable(el));\r
 286         },\r
 287         \r
 288         all: all\r
 289     }\r
 290 }();\r
 291 \r
 292 Ext.a11y.Focusable.SpecialKeys = {};\r
 293 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.LEFT] = 'left';\r
 294 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.RIGHT] = 'right';\r
 295 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.DOWN] = 'down';\r
 296 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.UP] = 'up';\r
 297 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ESC] = 'esc';\r
 298 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ENTER] = 'enter';\r
 299 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.SPACE] = 'space';\r
 300 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.TAB] = 'tab';\r
 301 \r
 302 // we use the new observeClass method to fire our new initFocus method on components\r
 303 Ext.util.Observable.observeClass(Ext.Component);\r
 304 Ext.Component.on('render', function(cmp){\r
 305     cmp.initFocus();\r
 306     cmp.initARIA();\r
 307 });\r
 308 Ext.override(Ext.Component, {\r
 309     initFocus: Ext.emptyFn,\r
 310     initARIA: Ext.emptyFn\r
 311 });\r
 312 \r
 313 Ext.override(Ext.Container, {\r
 314     isFocusable: true,\r
 315     noFocus: false,\r
 316     \r
 317     // private\r
 318     initFocus: function(){\r
 319         if (!this.fi && !this.noFocus) {\r
 320             this.fi = new Ext.a11y.Focusable(this);\r
 321         }\r
 322         this.mon(this.fi, {\r
 323             focus: this.onFocus,\r
 324             blur: this.onBlur,\r
 325             tab: this.onTab,\r
 326             enter: this.onEnter,\r
 327             esc: this.onEsc,\r
 328             scope: this\r
 329         });\r
 330         \r
 331         if (this.hidden) {\r
 332             this.isFocusable = false;\r
 333         }\r
 334         \r
 335         this.on('show', function(){\r
 336             this.isFocusable = true;\r
 337         }, this);\r
 338         this.on('hide', function(){\r
 339             this.isFocusable = false;\r
 340         }, this);\r
 341     },\r
 342     \r
 343     focus: function(){\r
 344         this.fi.focus();\r
 345     },\r
 346     \r
 347     blur: function(){\r
 348         this.fi.blur();\r
 349     },\r
 350     \r
 351     enter: function(){\r
 352         var eitem = this.getEnterItem();\r
 353         if (eitem) {\r
 354             eitem.focus();\r
 355         }\r
 356     },\r
 357     \r
 358     onFocus: Ext.emptyFn,\r
 359     onBlur: Ext.emptyFn,\r
 360     \r
 361     onTab: function(e, t, tf){\r
 362         var rf = tf.relayTo || tf;\r
 363         if (rf.component && rf.component !== this) {\r
 364             e.stopEvent();\r
 365             var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);\r
 366             item.focus();\r
 367         }\r
 368     },\r
 369     \r
 370     onEnter: function(e, t, tf){\r
 371         // check to see if enter is pressed while "on" the panel\r
 372         if (tf.component && tf.component === this) {\r
 373             e.stopEvent();\r
 374             this.enter();\r
 375         }\r
 376         e.stopPropagation();\r
 377     },\r
 378     \r
 379     onEsc: function(e, t){\r
 380         e.preventDefault();\r
 381         \r
 382         // check to see if esc is pressed while "inside" the panel\r
 383         // or while "on" the panel\r
 384         if (t === this.el.dom) {\r
 385             // "on" the panel, check if this panel has an owner panel and focus that\r
 386             // we dont stop the event in this case so that this same check will be\r
 387             // done for this ownerCt\r
 388             if (this.ownerCt) {\r
 389                 this.ownerCt.focus();\r
 390             }\r
 391         }\r
 392         else {\r
 393             // we were inside the panel when esc was pressed,\r
 394             // so go back "on" the panel\r
 395             if (this.ownerCt && this.ownerCt.isFocusable) {\r
 396                 var si = this.ownerCt.getFocusItems();\r
 397                 \r
 398                 if (si && si.getCount() > 1) {\r
 399                     e.stopEvent();\r
 400                 }\r
 401             }\r
 402             this.focus();\r
 403         }\r
 404     },\r
 405     \r
 406     getFocusItems: function(){\r
 407         return this.items &&\r
 408         this.items.filterBy(function(o){\r
 409             return o.isFocusable;\r
 410         }) ||\r
 411         null;\r
 412     },\r
 413     \r
 414     getEnterItem: function(){\r
 415         var ci = this.getFocusItems(), length = ci ? ci.getCount() : 0;\r
 416         \r
 417         if (length === 1) {\r
 418             return ci.first().getEnterItem && ci.first().getEnterItem() || ci.first();\r
 419         }\r
 420         else \r
 421             if (length > 1) {\r
 422                 return ci.first();\r
 423             }\r
 424     },\r
 425     \r
 426     getNextFocus: function(current){\r
 427         var items = this.getFocusItems(), next = current, i = items.indexOf(current), length = items.getCount();\r
 428         \r
 429         if (i === length - 1) {\r
 430             next = items.first();\r
 431         }\r
 432         else {\r
 433             next = items.get(i + 1);\r
 434         }\r
 435         return next;\r
 436     },\r
 437     \r
 438     getPreviousFocus: function(current){\r
 439         var items = this.getFocusItems(), prev = current, i = items.indexOf(current), length = items.getCount();\r
 440         \r
 441         if (i === 0) {\r
 442             prev = items.last();\r
 443         }\r
 444         else {\r
 445             prev = items.get(i - 1);\r
 446         }\r
 447         return prev;\r
 448     },\r
 449     \r
 450     getFocusable : function() {\r
 451         return this.fi;\r
 452     }\r
 453 });\r
 454 \r
 455 Ext.override(Ext.Panel, {\r
 456     <div id="cfg-Ext.ux.layout.RowLayout-enableTabbing"></div>/**\r
 457      * @cfg {Boolean} enableTabbing <tt>true</tt> to enable tabbing. Default is <tt>false</tt>.\r
 458      */        \r
 459     getFocusItems: function(){\r
 460         // items gets all the items inside the body\r
 461         var items = Ext.Panel.superclass.getFocusItems.call(this), bodyFocus = null;\r
 462         \r
 463         if (!items) {\r
 464             items = new Ext.util.MixedCollection();\r
 465             this.bodyFocus = this.bodyFocus || new Ext.a11y.FocusItem(this.body, this.enableTabbing);\r
 466             items.add('body', this.bodyFocus);\r
 467         }\r
 468         // but panels can also have tbar, bbar, fbar\r
 469         if (this.tbar && this.topToolbar) {\r
 470             items.insert(0, this.topToolbar);\r
 471         }\r
 472         if (this.bbar && this.bottomToolbar) {\r
 473             items.add(this.bottomToolbar);\r
 474         }\r
 475         if (this.fbar) {\r
 476             items.add(this.fbar);\r
 477         }\r
 478         \r
 479         return items;\r
 480     }\r
 481 });\r
 482 \r
 483 Ext.override(Ext.TabPanel, {\r
 484     // private\r
 485     initFocus: function(){\r
 486         Ext.TabPanel.superclass.initFocus.call(this);\r
 487         this.mon(this.fi, {\r
 488             left: this.onLeft,\r
 489             right: this.onRight,\r
 490             scope: this\r
 491         });\r
 492     },\r
 493     \r
 494     onLeft: function(e){\r
 495         if (!this.activeTab) {\r
 496             return;\r
 497         }\r
 498         e.stopEvent();\r
 499         var prev = this.items.itemAt(this.items.indexOf(this.activeTab) - 1);\r
 500         if (prev) {\r
 501             this.setActiveTab(prev);\r
 502         }\r
 503         return false;\r
 504     },\r
 505     \r
 506     onRight: function(e){\r
 507         if (!this.activeTab) {\r
 508             return;\r
 509         }\r
 510         e.stopEvent();\r
 511         var next = this.items.itemAt(this.items.indexOf(this.activeTab) + 1);\r
 512         if (next) {\r
 513             this.setActiveTab(next);\r
 514         }\r
 515         return false;\r
 516     }\r
 517 });\r
 518 \r
 519 Ext.override(Ext.tree.TreeNodeUI, {\r
 520     // private\r
 521     focus: function(){\r
 522         this.node.getOwnerTree().bodyFocus.focus();\r
 523     }\r
 524 });\r
 525 \r
 526 Ext.override(Ext.tree.TreePanel, {\r
 527     // private\r
 528     afterRender : function(){\r
 529         Ext.tree.TreePanel.superclass.afterRender.call(this);\r
 530         this.root.render();\r
 531         if(!this.rootVisible){\r
 532             this.root.renderChildren();\r
 533         }\r
 534         this.bodyFocus = new Ext.a11y.FocusItem(this.body.down('.x-tree-root-ct'));\r
 535         this.bodyFocus.fi.setFrameEl(this.body);\r
 536     } \r
 537 });\r
 538 \r
 539 Ext.override(Ext.grid.GridPanel, {\r
 540     initFocus: function(){\r
 541         Ext.grid.GridPanel.superclass.initFocus.call(this);\r
 542         this.bodyFocus = new Ext.a11y.FocusItem(this.view.focusEl);\r
 543         this.bodyFocus.fi.setFrameEl(this.body);\r
 544     }\r
 545 });\r
 546 \r
 547 Ext.override(Ext.Button, {\r
 548     isFocusable: true,\r
 549     noFocus: false,\r
 550     \r
 551     initFocus: function(){\r
 552         Ext.Button.superclass.initFocus.call(this);\r
 553         this.fi = this.fi || new Ext.a11y.Focusable(this.btnEl, null, null, this.el);\r
 554         this.fi.setComponent(this);\r
 555         \r
 556         this.mon(this.fi, {\r
 557             focus: this.onFocus,\r
 558             blur: this.onBlur,\r
 559             scope: this\r
 560         });\r
 561         \r
 562         if (this.menu) {\r
 563             this.mon(this.fi, 'down', this.showMenu, this);\r
 564             this.on('menuhide', this.focus, this);\r
 565         }\r
 566         \r
 567         if (this.hidden) {\r
 568             this.isFocusable = false;\r
 569         }\r
 570         \r
 571         this.on('show', function(){\r
 572             this.isFocusable = true;\r
 573         }, this);\r
 574         this.on('hide', function(){\r
 575             this.isFocusable = false;\r
 576         }, this);\r
 577     },\r
 578     \r
 579     focus: function(){\r
 580         this.fi.focus();\r
 581     },\r
 582     \r
 583     blur: function(){\r
 584         this.fi.blur();\r
 585     },\r
 586     \r
 587     onFocus: function(){\r
 588         if (!this.disabled) {\r
 589             this.el.addClass("x-btn-focus");\r
 590         }\r
 591     },\r
 592     \r
 593     onBlur: function(){\r
 594         this.el.removeClass("x-btn-focus");\r
 595     }\r
 596 });\r
 597 \r
 598 Ext.override(Ext.Toolbar, {\r
 599     initFocus: function(){\r
 600         Ext.Toolbar.superclass.initFocus.call(this);\r
 601         this.mon(this.fi, {\r
 602             left: this.onLeft,\r
 603             right: this.onRight,\r
 604             scope: this\r
 605         });\r
 606         \r
 607         this.on('focus', this.onButtonFocus, this, {\r
 608             stopEvent: true\r
 609         });\r
 610     },\r
 611     \r
 612     addItem: function(item){\r
 613         Ext.Toolbar.superclass.add.apply(this, arguments);\r
 614         if (item.rendered && item.fi !== undefined) {\r
 615             item.fi.setRelayTo(this.el);\r
 616             this.relayEvents(item.fi, ['focus']);\r
 617         }\r
 618         else {\r
 619             item.on('render', function(){\r
 620                 if (item.fi !== undefined) {\r
 621                     item.fi.setRelayTo(this.el);\r
 622                     this.relayEvents(item.fi, ['focus']);\r
 623                 }\r
 624             }, this, {\r
 625                 single: true\r
 626             });\r
 627         }\r
 628         return item;\r
 629     },\r
 630     \r
 631     onFocus: function(){\r
 632         var items = this.getFocusItems();\r
 633         if (items && items.getCount() > 0) {\r
 634             if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {\r
 635                 this.lastFocus.focus();\r
 636             }\r
 637             else {\r
 638                 items.first().focus();\r
 639             }\r
 640         }\r
 641     },\r
 642     \r
 643     onButtonFocus: function(e, t, tf){\r
 644         this.lastFocus = tf.component || null;\r
 645     },\r
 646     \r
 647     onLeft: function(e, t, tf){\r
 648         e.stopEvent();\r
 649         this.getPreviousFocus(tf.component).focus();\r
 650     },\r
 651     \r
 652     onRight: function(e, t, tf){\r
 653         e.stopEvent();\r
 654         this.getNextFocus(tf.component).focus();\r
 655     },\r
 656     \r
 657     getEnterItem: Ext.emptyFn,\r
 658     onTab: Ext.emptyFn,\r
 659     onEsc: Ext.emptyFn\r
 660 });\r
 661 \r
 662 Ext.override(Ext.menu.BaseItem, {\r
 663     initFocus: function(){\r
 664         this.fi = new Ext.a11y.Focusable(this, this.parentMenu && this.parentMenu.el || null, true);\r
 665     }\r
 666 });\r
 667 \r
 668 Ext.override(Ext.menu.Menu, {\r
 669     initFocus: function(){\r
 670         this.fi = new Ext.a11y.Focusable(this);\r
 671         this.focusEl = this.fi;\r
 672     }\r
 673 });\r
 674 \r
 675 Ext.a11y.WindowMgr = new Ext.WindowGroup();\r
 676 \r
 677 Ext.apply(Ext.WindowMgr, {\r
 678     bringToFront: function(win){\r
 679         Ext.a11y.WindowMgr.bringToFront.call(this, win);\r
 680         if (win.modal) {\r
 681             win.enter();\r
 682         }\r
 683         else {\r
 684             win.focus();\r
 685         }\r
 686     }\r
 687 });\r
 688 \r
 689 Ext.override(Ext.Window, {\r
 690     initFocus: function(){\r
 691         Ext.Window.superclass.initFocus.call(this);\r
 692         this.on('beforehide', function(){\r
 693             Ext.a11y.RelayFrame.unframe();\r
 694             Ext.a11y.FocusFrame.unframe();\r
 695         });\r
 696     }\r
 697 });\r
 698 \r
 699 Ext.override(Ext.form.Field, {\r
 700     isFocusable: true,\r
 701     noFocus: false,\r
 702     \r
 703     initFocus: function(){\r
 704         this.fi = this.fi || new Ext.a11y.Focusable(this, null, true);\r
 705         \r
 706         Ext.form.Field.superclass.initFocus.call(this);\r
 707         \r
 708         if (this.hidden) {\r
 709             this.isFocusable = false;\r
 710         }\r
 711         \r
 712         this.on('show', function(){\r
 713             this.isFocusable = true;\r
 714         }, this);\r
 715         this.on('hide', function(){\r
 716             this.isFocusable = false;\r
 717         }, this);\r
 718     }\r
 719 });\r
 720 \r
 721 Ext.override(Ext.FormPanel, {\r
 722     initFocus: function(){\r
 723         Ext.FormPanel.superclass.initFocus.call(this);\r
 724         this.on('focus', this.onFieldFocus, this, {\r
 725             stopEvent: true\r
 726         });\r
 727     },\r
 728     \r
 729     // private\r
 730     createForm: function(){\r
 731         delete this.initialConfig.listeners;\r
 732         var form = new Ext.form.BasicForm(null, this.initialConfig);\r
 733         form.afterMethod('add', this.formItemAdd, this);\r
 734         return form;\r
 735     },\r
 736     \r
 737     formItemAdd: function(item){\r
 738         item.on('render', function(field){\r
 739             field.fi.setRelayTo(this.el);\r
 740             this.relayEvents(field.fi, ['focus']);\r
 741         }, this, {\r
 742             single: true\r
 743         });\r
 744     },\r
 745     \r
 746     onFocus: function(){\r
 747         var items = this.getFocusItems();\r
 748         if (items && items.getCount() > 0) {\r
 749             if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {\r
 750                 this.lastFocus.focus();\r
 751             }\r
 752             else {\r
 753                 items.first().focus();\r
 754             }\r
 755         }\r
 756     },\r
 757     \r
 758     onFieldFocus: function(e, t, tf){\r
 759         this.lastFocus = tf.component || null;\r
 760     },\r
 761     \r
 762     onTab: function(e, t, tf){\r
 763         if (tf.relayTo.component === this) {\r
 764             var item = e.shiftKey ? this.getPreviousFocus(tf.component) : this.getNextFocus(tf.component);\r
 765             \r
 766             if (item) {\r
 767                 ev.stopEvent();\r
 768                 item.focus();\r
 769                 return;\r
 770             }\r
 771         }\r
 772         Ext.FormPanel.superclass.onTab.apply(this, arguments);\r
 773     },\r
 774     \r
 775     getNextFocus: function(current){\r
 776         var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();\r
 777         \r
 778         return (i < length - 1) ? items.get(i + 1) : false;\r
 779     },\r
 780     \r
 781     getPreviousFocus: function(current){\r
 782         var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();\r
 783         \r
 784         return (i > 0) ? items.get(i - 1) : false;\r
 785     }\r
 786 });\r
 787 \r
 788 Ext.override(Ext.Viewport, {\r
 789     initFocus: function(){\r
 790         Ext.Viewport.superclass.initFocus.apply(this);\r
 791         this.mon(Ext.get(document), 'focus', this.focus, this);\r
 792         this.mon(Ext.get(document), 'blur', this.blur, this);\r
 793         this.fi.setNoFrame(true);\r
 794     },\r
 795     \r
 796     onTab: function(e, t, tf, f){\r
 797         e.stopEvent();\r
 798         \r
 799         if (tf === f) {\r
 800             items = this.getFocusItems();\r
 801             if (items && items.getCount() > 0) {\r
 802                 items.first().focus();\r
 803             }\r
 804         }\r
 805         else {\r
 806             var rf = tf.relayTo || tf;\r
 807             var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);\r
 808             item.focus();\r
 809         }\r
 810     }\r
 811 });\r
 812     \r
 813 })();</pre>    \r
 814 </body>\r
 815 </html>