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.
<%@ 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>
<%@ 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"...
...
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 });
}
.....