1. #1
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    79
    Vote Rating
    1
    Kazuhiro Kotsutsumi is on a distinguished road

      0  

    Default 右クリック不可能なメニュー

    右クリック不可能なメニュー


    コンテキストメニューやツールバーのメニューで、Ext.menu.Menukクラスを使う機会があると思います。

    このExt.menu.Menuクラスは、内部的に右クリックのイベントを制御していません。
    そのため、contextmenuなどのイベントも起きません。

    従って、コンテキストメニューの上で、さらに右クリックするとブラウザのコンテキストメニューが表示されてしまいます。なにげに右クリックをダブルクリックしてしまう人もいるようで、マウスの調子とか。

    それを修正するパッチを作りました。
    取り急ぎ、2.2.1用です。
    ちなみに、Right Click Cancel Menuの略です。
    パッチを当てたあとのメニューオブジェクトはcontextmenuイベントを発行するようになっています。
    何か処理をしたいときは、リスナーを設定してください。


    RCCMenu.js

    Code:
    /* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
    
    // {{{ Ext.ux.override.RCCMenu
    
    /**
     * Ext.ux.override.RCCMenu
     *
     * 右クリックキャンセルメニュー
     *
     * @author  Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
     */
    if( Ext.version === '2.2.1' ) {
    
        Ext.override( Ext.menu.Menu, {
    
            // private
            render : function(){
    
                if(this.el){
                    return;
                }
                var el = this.el = this.createEl();
    
                if(!this.keyNav){
                    this.keyNav = new Ext.menu.MenuNav(this);
                }
                if(this.plain){
                    el.addClass("x-menu-plain");
                }
                if(this.cls){
                    el.addClass(this.cls);
                }
                // generic focus element
                this.focusEl = el.createChild({
                    tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
                });
                var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
                ul.on("click", this.onClick, this);
                ul.on("mouseover", this.onMouseOver, this);
                ul.on("mouseout", this.onMouseOut, this);
    
                // 右クリックキャンセル処理
                ul.on("contextmenu", function( e, t ) {
    
                    if( this.fireEvent("contextmenu", this, e, t) ) {
                        e.stopEvent();
                    }
    
                }, this);
    
                this.items.each(function(item){
                    var li = document.createElement("li");
                    li.className = "x-menu-list-item";
                    ul.dom.appendChild(li);
                    item.render(li, this);
                }, this);
                this.ul = ul;
                this.autoWidth();
            }
    
            // }}}
    
        });
    
    }
    
    /*
     * Local variables:
     * tab-width: 4
     * c-basic-offset: 4
     * c-hanging-comment-ender-p: nil
     * End:
     */

  2. #2
    Sencha - Support Team yuki's Avatar
    Join Date
    Jun 2007
    Location
    Chigasaki, Japan
    Posts
    273
    Vote Rating
    0
    yuki is on a distinguished road

      0  

    Default いいですねえ

    いいですねえ


    ちなみに、this.ulのイベントハンドラーって解除処理が必要じゃないですか?
    Ext Japan, LLC [Twitter: @extjapan]
    [Ext JS / Ext GWTのライセンス販売][日本語テクニカルサポート][Ext JSトレーニング・コンサルティング]

  3. #3
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    79
    Vote Rating
    1
    Kazuhiro Kotsutsumi is on a distinguished road

      0  

    Default だと思うけど

    だと思うけど


    Quote Originally Posted by yuki View Post
    ちなみに、this.ulのイベントハンドラーって解除処理が必要じゃないですか?
    思いますが、サボってます。
    monにしてしまうのがいいのかな?

  4. #4
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    79
    Vote Rating
    1
    Kazuhiro Kotsutsumi is on a distinguished road

      0  

    Default Ext JS 3.0対応版

    Ext JS 3.0対応版


    renderからonRenderに変わったのと、monになっていたのであわせました。

    Code:
    /* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
    
    // {{{ Ext.ux.override.RCCMenu
    
    /**
     * Ext.ux.override.RCCMenu
     *
     * 右クリックキャンセルメニュー
     *
     * @author  Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
     */
    if( Ext.version === '2.2.1' ) {
    
        Ext.override( Ext.menu.Menu, {
    
            // private
            render : function(){
    
                if(this.el){
                    return;
                }
                var el = this.el = this.createEl();
    
                if(!this.keyNav){
                    this.keyNav = new Ext.menu.MenuNav(this);
                }
                if(this.plain){
                    el.addClass("x-menu-plain");
                }
                if(this.cls){
                    el.addClass(this.cls);
                }
                // generic focus element
                this.focusEl = el.createChild({
                    tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
                });
                var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
                ul.on("click", this.onClick, this);
                ul.on("mouseover", this.onMouseOver, this);
                ul.on("mouseout", this.onMouseOut, this);
    
                // 右クリックキャンセル処理
                ul.on("contextmenu", function( e, t ) {
    
                    if( this.fireEvent("contextmenu", this, e, t) ) {
                        e.stopEvent();
                    }
    
                }, this);
    
                this.items.each(function(item){
                    var li = document.createElement("li");
                    li.className = "x-menu-list-item";
                    ul.dom.appendChild(li);
                    item.render(li, this);
                }, this);
                this.ul = ul;
                this.autoWidth();
            }
    
            // }}}
    
        });
    
    } else if( Ext.version === '3.0' ) {
    
        Ext.override( Ext.menu.Menu, {
    
            // private
            onRender : function(ct, position){
                if(!ct){ 
                    ct = Ext.getBody();
                }
    
                var dh = {
                    id: this.getId(),
                    cls: 'x-menu ' + ((this.floating) ? 'x-layer ' : '') + (this.cls || '') + (this.plain ? ' x-menu-plain' : '') + (this.showSeparator ? '' : ' x-menu-nosep'),
                    style: this.style,
                    cn: [
                        {tag: 'a', cls: 'x-menu-focus', href: '#', onclick: 'return false;', tabIndex: '-1'},
                        {tag: 'ul', cls: 'x-menu-list'}
                    ]
                };
                if(this.floating){
                    this.el = new Ext.Layer({
                        shadow: this.shadow,
                        dh: dh,
                        constrain: false,
                        parentEl: ct,
                        zindex:15000
                    });
                }else{
                    this.el = ct.createChild(dh);
                }
                Ext.menu.Menu.superclass.onRender.call(this, ct, position);
    
                if(!this.keyNav){
                    this.keyNav = new Ext.menu.MenuNav(this);
                }
                // generic focus element
                this.focusEl = this.el.child('a.x-menu-focus');
                this.ul = this.el.child('ul.x-menu-list');
                this.mon(this.ul, 'click', this.onClick, this);
                this.mon(this.ul, 'mouseover', this.onMouseOver, this);
                this.mon(this.ul, 'mouseout', this.onMouseOut, this);
    
                // 右クリックキャンセル処理
                this.mon(this.ul, 'contextmenu', function( e, t ) {
    
                    if( this.fireEvent("contextmenu", this, e, t) ) {
                        e.stopEvent();
                    }
    
                }, this);
    
                if(this.enableScrolling){
                    this.mon(this.el, 'click', this.onScroll, this, {delegate: '.x-menu-scroller'});
                    this.mon(this.el, 'mouseover', this.deactivateActive, this, {delegate: '.x-menu-scroller'});
                }
            },
        });
    
    }
    
    /*
     * Local variables:
     * tab-width: 4
     * c-basic-offset: 4
     * c-hanging-comment-ender-p: nil
     * End:
     */

Thread Participants: 1