What's New?

How can I get the trigger element for an ext.menu when manually showing it?

  1. #1
    Nov 27, 2012, 7:04 PM

    How can I get the trigger element for an ext.menu when manually showing it?

    Last edited by Travis; Nov 27, 2012 at 7:12 PM.
  2. #2
    Nov 28, 2012, 3:49 PM
  3. #3
    Nov 28, 2012, 6:27 PM
    The problem is that example doesn't actually call the menu to be shown via menu.show(), so you won't see the issue I'm talking about. I've created an updated example to better illustrate my problem.

    Run this example, and first left click in the grey div. This will call menu1.show('myDiv'). When Show_ gets called, you'll see that source.trg will be undefined. Next right click somewhere else in the Panel. You'll notice that now source.trg.id points to Panel1 (as expected). Now left click on the div, you'll notice that source.trg is now defined, but it's still just pointing back to Panel1 or whatever the last source was, it's not being updated pointing to 'myDiv' as I'd expect. However if you right click inside the div, then the source.trg.id points to 'myDiv' as expected.

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    <script type="text/javascript">
        var Show_ = function (source)
        {
            if (source.trg)
            {
                Ext.Msg.notify('source.trg defined', source.trg.id);
                console.log(source.trg.id);
            }

            else
            {
                Ext.Msg.notify('Error', 'source.trg was undefined!');
                console.log('source.trg was undefined!');
            }
        };

    </script>
</head>
<body>
    <form id="Form2" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
        <ext:Menu ID="myMenu1" runat="server">
            <Listeners>
                <Show Fn="Show_" />
            </Listeners>
            <Items>
                <ext:MenuItem ID="menuitem1" Text="item1" />
                <ext:MenuItem ID="menuitem2" Text="item2" />
            </Items>
        </ext:Menu>
         
        <ext:Panel ID="Panel1" runat="server" Height="200" Title="Div Click Test" ContextMenuID="myMenu1" >
            <Content>
                <div id='myDiv' style="height:100px; width:100px; background-color: grey;" onclick="myMenu1.show('myDiv')">
                    Left click in here!
                </div>
            </Content>
        </ext:Panel>
    </form>
</body>
</html>
  4. #4
    Nov 28, 2012, 8:56 PM
    Quote Originally Posted by Travis View Post
    The problem is that example doesn't actually call the menu to be shown via menu.show(), so you won't see the issue I'm talking about. I've created an updated example to better illustrate my problem.

    Run this example, and first left click in the grey div. This will call menu1.show('myDiv'). When Show_ gets called, you'll see that source.trg will be undefined. Next right click somewhere else in the Panel. You'll notice that now source.trg.id points to Panel1 (as expected). Now left click on the div, you'll notice that source.trg is now defined, but it's still just pointing back to Panel1 or whatever the last source was, it's not being updated pointing to 'myDiv' as I'd expect. However if you right click inside the div, then the source.trg.id points to 'myDiv' as expected.
    Try this,
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <script type="text/javascript">
            var Show_ = function (source) {
                if (source.trg) {
                    Ext.Msg.notify('source.trg defined', source.trg.id);
                    console.log(source.trg.id);
                }

                else {
                    Ext.Msg.notify('Error', 'source.trg was undefined!');
                    console.log('source.trg was undefined!');
                }
            };
        var CustomShow = function (idMenu, t, e) {
            var menu = Ext.menu.MenuMgr.get(idMenu);
            menu.trg = t;
            ev = Ext.EventObject.setEvent(e);
            ev.stopEvent();
            ev.preventDefault();            
            menu.showAt(ev.getPoint());
        };
        </script>
</head>
<body>
        <form id="Form2" runat="server">
                <ext:ResourceManager ID="ResourceManager1" runat="server" />

                <ext:Menu ID="myMenu1" runat="server">
                        <Listeners>
                                <Show Fn="Show_" />
                        </Listeners>
                        <Items>
                                <ext:MenuItem ID="menuitem1" Text="item1" />
                                <ext:MenuItem ID="menuitem2" Text="item2" />
                        </Items>
                </ext:Menu>
                
                <ext:Panel ID="Panel1" runat="server" Height="200" Title="Div Click Test" ContextMenuID="myMenu1" >
                        <Content>
                                <div id='myDiv' style="height:100px; width:100px; background-color: grey;" onclick="CustomShow('myMenu1', this, event);">
                                        Left click in here!
                                </div>
                        </Content>
                </ext:Panel>
        </form>
</body>
</html>
    I took the logic of this code "@source core/Component.js"
    core/Component.js

    ...
...
Ext.Component.prototype.destroy = Ext.Component.prototype.destroy.createInterceptor(function () { ... });
Ext.Component.prototype.initComponent = Ext.Component.prototype.initComponent.createSequence(function () {
    if (!Ext.isEmpty(this.contextMenuId, false)) {
        this.on("render", function () {
            this.el.on("contextmenu", function (e, t) {
                var menu = Ext.menu.MenuMgr.get(this.contextMenuId);
                menu.trg = t;
                e.stopEvent();
                e.preventDefault();
                menu.showAt(e.getPoint());
            }, this);            
        }, this, { single : true });    
    }
    .....
    Last edited by erico; Nov 28, 2012 at 9:30 PM.
  5. #5
    Nov 28, 2012, 11:59 PM
    Looks like that seems to work!

    I've successfully implemented this solution into my app, thanks so much for the help Erico!

Similar Threads

  1. [CLOSED] Occasional error when I manually add a menu
    By PhilG in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 02, 2012, 7:26 PM
  2. [CLOSED] Panel did not refresh the content after manually trigger autoload
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 22
    Last Post: May 04, 2012, 11:49 AM
  3. [CLOSED] Windows autoload doesn't work as manually trigger load in client side
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Feb 29, 2012, 8:41 AM
  4. Desktop menu and trigger
    By Richardt in forum 1.x Help
    Replies: 1
    Last Post: Jun 03, 2010, 1:14 PM
  5. [INVALID] Viewport: Element 'Tab/Panel/TabPanel' is not a known element.
    By t0ny in forum Bugs
    Replies: 8
    Last Post: Jun 11, 2008, 9:58 AM

Tags for this Thread

Posting Permissions