Focus.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:23k
源码类别:

中间件编程

开发平台:

JavaScript

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