ども、小堤です。
やっと起きることができた・・・なんだか・・なぁ(笑)
さて、先日書いたExt.ux.plugins.FocusActiveです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<span style="color: #990000">/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */</span> <span style="color: #990000">// {{{ Namespace</span> Ext.ns(<span style="color: #009900">'Ext.ux'</span>, <span style="color: #009900">'Ext.ux.plugins'</span>); <span style="color: #990000">// }}}</span> <span style="color: #990000">// {{{ Ext.ux.plugins.FocusActive</span> <span style="color: #990000">/** * Ext.ux.plugins.FocusActive * * @author Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com> * @version 1.0 */</span> Ext.ux.plugins.FocusActive = <span style="color: #000099">function</span>() { <span style="color: #000099">var</span> me = <span style="color: #000099">this</span>; <span style="color: #000099">var</span> overCls = <span style="color: #009900">'x-btn-over'</span>; <span style="color: #000099">var</span> active = <span style="color: #000099">false</span>; <span style="color: #990000">// {{{ init</span> me.init = <span style="color: #000099">function</span>(btn) { btn.<span style="color: #000099">on</span>(<span style="color: #009900">'afterrender'</span>, <span style="color: #000099">function</span>() { me.targetEl = btn.el; btn.btnEl.<span style="color: #000099">on</span>(<span style="color: #009900">'focus'</span>, me.onFocus, me); btn.btnEl.<span style="color: #000099">on</span>(<span style="color: #009900">'blur'</span>, me.onBlur, me); }, me); btn.<span style="color: #000099">on</span>(<span style="color: #009900">'mouseout'</span>, <span style="color: #000099">function</span>() { <span style="color: #000099">if</span> (active) { me.targetEl.addClass(overCls); } }, me); }, <span style="color: #990000">// }}}</span> <span style="color: #990000">// {{{ onFocus</span> me.onFocus = <span style="color: #000099">function</span>(e, t) { active = <span style="color: #000099">true</span>; me.targetEl.addClass(overCls); } <span style="color: #990000">// }}}</span> <span style="color: #990000">// {{{ onBlur</span> me.onBlur = <span style="color: #000099">function</span>(e, t) { me.targetEl.removeClass(overCls); active = <span style="color: #000099">false</span>; } <span style="color: #990000">// }}}</span> }; <span style="color: #990000">// {{{ Register ptype</span> Ext.preg(<span style="color: #009900">'focusactive'</span>, Ext.ux.plugins.FocusActive); <span style="color: #990000">// }}}</span> <span style="color: #990000">/* * Local variables: * tab-width: 4 * c-basic-offset: 4 * c-hanging-comment-ender-p: nil * End: */</span> |
で
http://extjs.xenophy.info/2010020201.html
2つボタンがありますが、2つめがこのプラグインを設置したときの動作です。TABキーで、フォーカス移動してみると違いがわかります。
プラグインなんで、必要なところにぶっこめばOKです。ボタンのコンフィグオプションに、plugins: [‘focusactive’]を追加すれば設置完了。もちろん、 Ext.ux.plugins.FocusActiveは読み込んでね。
ってことで、忘れないうちに書いたなり！
Ext.ux.plugins.FocusActive
