Hi Daniil,
I have verified it is working as I need, but in my case I am creating controls at runtime and also loading form in tooltip. Can you please let me know where I am wrong in my code
<%@ 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">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//LoadTooltipControls();
}
}
public void ShowToolTipControls(object sender, DirectEventArgs e)
{
LoadTooltipControls();
}
public void LoadTooltipControls()
{
Ext.Net.Panel pnlApp;
Ext.Net.ToolTip pnlTooltip;
for (int i = 0; i < 4; i++)
{
if (Ext.Net.X.GetCmp("App" + i.ToString()) == null)
{
pnlApp = new Ext.Net.Panel();
pnlApp.ID = "App" + i.ToString();
pnlApp.Title = "Tab " + i.ToString();
pnlApp.Closable = true;
pnlApp.AddTo(TabPanel1);
pnlTooltip = new Ext.Net.ToolTip();
pnlTooltip.ID = "TTApp" + i.ToString();
pnlTooltip.Target = "App" + i.ToString() + ".tabEl";
pnlTooltip.TrackMouse = true;
pnlTooltip.Anchor = "top";
pnlTooltip.AutoLoad.Url = "ExtTooltipForm.aspx?APPID=" + i.ToString();
pnlTooltip.AutoLoad.Mode = LoadMode.IFrame;
pnlTooltip.Width = Unit.Pixel(500);
pnlTooltip.Height = Unit.Pixel(200);
pnlTooltip.AutoHide = false;
pnlTooltip.Closable = true;
pnlTooltip.AutoRender = false;
pnlTooltip.HideDelay = 2000;
pnlTooltip.Listeners.Render.Handler = "onRender";
pnlTooltip.AddTo(Form1);
}
}
}
</script>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
<script language="javascript" type="text/javascript">
var onRender = function (tooltip) {
tooltip.mon(tooltip.el, {
mouseenter: function () {
this.clearTimer("hide");
},
mouseleave: function () {
this.delayHide();
},
scope: tooltip
});
tooltip.mon(tooltip.target, {
mouseenter: function () {
this.clearTimer("hide");
},
mouseleave: function () {
this.delayHide();
},
scope: tooltip
});
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="vpTabToolTips" runat="server">
<Items>
<ext:Button ID="btnLoadTabs" runat="server" Text="Load Tooltip Tabs">
<DirectEvents>
<Click OnEvent="ShowToolTipControls"></Click>
</DirectEvents>
</ext:Button>
<ext:TabPanel ID="TabPanel1" runat="server" Height="215" Width="350">
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Originally Posted by
Daniil
Please look at the example.
Example
<%@ 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 runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var onRender = function (tooltip) {
tooltip.mon(tooltip.el, {
mouseenter : function () {
this.clearTimer("hide");
},
mouseleave : function () {
this.delayHide();
},
scope : tooltip
});
tooltip.mon(tooltip.target, {
mouseenter : function () {
this.clearTimer("hide");
},
mouseleave : function () {
this.delayHide();
},
scope : tooltip
});
};
</script>
<style type="text/css">
#tooltip-div {
width: 200px;
height: 200px;
}
#myDiv {
border: 1px solid;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<div id="myDiv" class="tip-target" style="width: 185px;">Give me a mouse</div>
<ext:ToolTip
runat="server"
Target="myDiv"
Anchor="top"
HideDelay="2000"
AutoHide="false">
<Content>
<div id="tooltip-div">
I'm a ToolTip
</div>
</Content>
<Listeners>
<Render Fn="onRender" />
</Listeners>
</ext:ToolTip>
</form>
</body>
</html>