PDA

View Full Version : [CLOSED] need to put a Tooltip on panel title



feanor91
Aug 17, 2012, 1:42 PM
Hello

I try to apply following example in V2 :

http://forums.ext.net/showthread.php?13714-CLOSED-ToolTip-on-Panel

But I can't make it to works?

Any help please?

Daniil
Aug 17, 2012, 2:37 PM
Hi,

Example

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

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Panel
ID="Panel1"
runat="server"
Title="Title"
Html="Content" />

<ext:ToolTip
runat="server"
XTarget="={#{Panel1}.header.getEl()}"
Html="I am the ToolTip!" />
</body>
</html>


Please note "XTarget". It should be "Target", but there is a bug which we should fix soon. I will notify.

feanor91
Aug 17, 2012, 2:54 PM
It works, thanks, but XTarget seems not defined in code behind, and as my panel are created in code behind, so I have to attach the target at run time like in this example:


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

<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="Panel=Ext.Net.Panel" %>
<%@ Import Namespace="Chart=Ext.Net.Chart" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender,EventArgs e)
{
// Load the data into the Store and DataBind.
this.stoCharts.DataSource = this.stoChartsValue;
this.stoCharts.DataBind();


}

private object[] stoChartsValue
{
get
{
return new object[]
{
new object[] {"2011/01/01",10},
new object[] {"2011/02/01",15},
new object[] {"2011/03/01",21},
new object[] {"2011/04/01",1},
new object[] {"2011/05/01",18},
new object[] {"2011/06/01",30},
new object[] {"2011/07/01",25},
new object[] {"2011/08/01",14},
new object[] {"2011/09/01",11},
new object[] {"2011/10/01",9},
new object[] {"2011/11/01",3},
new object[] {"2011/12/01",45}
};
}
}


protected void TestCharts(object sender, EventArgs e)
{
Window myWindow = MyDesktop.Modules["Dashboard"].Window[0] as Window;
BuildPanel().Render(myWindow);
}


private Chart BuildChart()
{
Chart MyChart = new Chart();
AxisCollection MyAxes=new AxisCollection();
CategoryAxis AxesX =new CategoryAxis();
NumericAxis AxesY= new NumericAxis();
LineSeries MySerie=new LineSeries();

AxesX.Title = "Month";
AxesX.Fields = new string[1];
AxesX.Fields[0] = "Date";

AxesY.Minimum = 0;
AxesY.Fields = new string[1];
AxesY.Fields[0] = "Value";

MyAxes.Add(AxesX);
MyAxes.Add(AxesY);

MySerie.SeriesID = "IdSerie";
MySerie.Axis = Position.Left;
MySerie.XField = new string[1];
MySerie.XField[0] = "Date";
MySerie.YField = new string[1];
MySerie.YField[0] = "Value";
MySerie.Title = "Test";


MySerie.MarkerConfig = new SpriteAttributes();
MySerie.MarkerConfig.Fill = "#00ff00";
MySerie.MarkerConfig.Stroke = "#00ff00";
MySerie.MarkerConfig.Type = SpriteType.Circle;
MySerie.MarkerConfig.Size = 3;
MySerie.MarkerConfig.Radius = 3;

MySerie.Style = new SpriteAttributes();
MySerie.Style.Fill = "#00ff00";
MySerie.Style.Stroke = "#00ff00";
MySerie.Style.StrokeWidth = 0;


MyChart.StoreID = "stoCharts";
MyChart.Animate = true;

MyChart.Legend = true;
MyChart.Axes.Add(AxesX);
MyChart.Axes.Add(AxesY);
MyChart.Series.Add(MySerie);
MyChart.LegendConfig=new Ext.Net.ChartLegend();
MyChart.LegendConfig.RefreshOnItemToggle = true;

return MyChart;
}

private Panel BuildPanel()
{
return this.X().Panel()
.ID("panChart")
.Title("Chart")
.Padding(5)
.Layout("Fit")
.Add(BuildChart());
}

</script>

<!DOCTYPE html protected "-//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>Test Chart into panel</title>

<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

</head>

<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" RethrowAjaxExceptions="True">

</ext:ResourceManager>
<%-- Data stores--%>
<ext:Store ID="stoCharts" runat="server" AutoLoad="True">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Date" />
<ext:ModelField Name="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>


<ext:Desktop
ID="MyDesktop"
runat="server">

<Modules>
<%-- Dashboard window--%>
<ext:DesktopModule ModuleID="Dashboard">
<Window>
<ext:Window ID="wndDashoard"
runat="server"
Icon="Help"
Width="1000"
Height="600"
Layout="Fit"
Hidden="True"
ExpandOnShow="True"
MinHeight="100"
MinWidth="100"
Maximizable="True"
Minimizable="True"
Resizable="True"
Title="Dashboard"
Modal="False" Draggable="True">
</ext:Window>
</Window>
</ext:DesktopModule>
</Modules>
<StartMenu Height="300" Title="Start Here" runat="server" HideTools="True">
<MenuItems>
<ext:MenuItem Text="Launch Window">
<Listeners>
<Click Handler="#{MyDesktop}.getModule('Dashboard').createWindow() ;"></Click>
</Listeners>
<DirectEvents>
<Click OnEvent="TestCharts"></Click>
</DirectEvents>
</ext:MenuItem>
</MenuItems>
</StartMenu>
</ext:Desktop>

<ext:ToolTip ID="ToolTip1"
runat="server"
XTarget="={#{panChart}.header.getEl()}"
Html="I am the ToolTip!" />
</form>
</body>

</html>

Daniil
Aug 17, 2012, 3:02 PM
XTarget becomes a "target" custom config option.

So, please add a "target" option into the CustomConfig collection.

feanor91
Aug 17, 2012, 3:14 PM
XTarget becomes a "target" custom config option.

So, please add a "target" option into the CustomConfig collection.

What?? CustomConfig collection of what? Could you clarify please?

You would say somthing like that:



<ext:ToolTip ID="ToolTip1"
runat="server"
XTarget="={#{Panel1}.header.getEl()}"
Html="I am the ToolTip!">
<CustomConfig>
<ext:ConfigItem Name="Target" Value="XTarget"></ext:ConfigItem>
</CustomConfig>
</ext:ToolTip>


But what if I want define my entire tooltip in code behind?

Daniil
Aug 17, 2012, 3:29 PM
The CustomConfig collection of the ToolTip.

Example

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

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
ToolTip t = new ToolTip();
t.CustomConfig.Add(new ConfigItem("target", this.Panel1.ClientID + ".header.getEl()", ParameterMode.Raw));
t.Html = "I am the ToolTip!";
this.Controls.Add(t);
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Panel
ID="Panel1"
runat="server"
Title="Title"
Html="Content" />
</body>
</html>

feanor91
Aug 17, 2012, 3:46 PM
I see, thanks I try

feanor91
Aug 17, 2012, 3:56 PM
Your example works well but adapt to my code, it didnt see:



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

<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="Panel=Ext.Net.Panel" %>
<%@ Import Namespace="Chart=Ext.Net.Chart" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender,EventArgs e)
{
// Load the data into the Store and DataBind.
this.stoCharts.DataSource = this.stoChartsValue;
this.stoCharts.DataBind();


}

private object[] stoChartsValue
{
get
{
return new object[]
{
new object[] {"2011/01/01",10},
new object[] {"2011/02/01",15},
new object[] {"2011/03/01",21},
new object[] {"2011/04/01",1},
new object[] {"2011/05/01",18},
new object[] {"2011/06/01",30},
new object[] {"2011/07/01",25},
new object[] {"2011/08/01",14},
new object[] {"2011/09/01",11},
new object[] {"2011/10/01",9},
new object[] {"2011/11/01",3},
new object[] {"2011/12/01",45}
};
}
}


protected void TestCharts(object sender, EventArgs e)
{
Window myWindow = MyDesktop.Modules["Dashboard"].Window[0] as Window;
BuildPanel().Render(myWindow);
}


private Chart BuildChart()
{
Chart MyChart = new Chart();
AxisCollection MyAxes=new AxisCollection();
CategoryAxis AxesX =new CategoryAxis();
NumericAxis AxesY= new NumericAxis();
LineSeries MySerie=new LineSeries();

AxesX.Title = "Month";
AxesX.Fields = new string[1];
AxesX.Fields[0] = "Date";

AxesY.Minimum = 0;
AxesY.Fields = new string[1];
AxesY.Fields[0] = "Value";

MyAxes.Add(AxesX);
MyAxes.Add(AxesY);

MySerie.SeriesID = "IdSerie";
MySerie.Axis = Position.Left;
MySerie.XField = new string[1];
MySerie.XField[0] = "Date";
MySerie.YField = new string[1];
MySerie.YField[0] = "Value";
MySerie.Title = "Test";


MySerie.MarkerConfig = new SpriteAttributes();
MySerie.MarkerConfig.Fill = "#00ff00";
MySerie.MarkerConfig.Stroke = "#00ff00";
MySerie.MarkerConfig.Type = SpriteType.Circle;
MySerie.MarkerConfig.Size = 3;
MySerie.MarkerConfig.Radius = 3;

MySerie.Style = new SpriteAttributes();
MySerie.Style.Fill = "#00ff00";
MySerie.Style.Stroke = "#00ff00";
MySerie.Style.StrokeWidth = 0;


MyChart.StoreID = "stoCharts";
MyChart.Animate = true;

MyChart.Legend = true;
MyChart.Axes.Add(AxesX);
MyChart.Axes.Add(AxesY);
MyChart.Series.Add(MySerie);
MyChart.LegendConfig=new Ext.Net.ChartLegend();
MyChart.LegendConfig.RefreshOnItemToggle = true;

return MyChart;
}

private Panel BuildPanel()
{

ToolTip t = new ToolTip();
t.CustomConfig.Add(new ConfigItem("target", "panChart.ClientID.header.getEl()", ParameterMode.Raw));
t.Html = "I am the ToolTip!";
this.Controls.Add(t);


return this.X().Panel()
.ID("panChart")
.Title("Chart")
.Padding(5)
.Layout("Fit")
.Add(BuildChart());
}



</script>

<!DOCTYPE html protected "-//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>Test Chart into panel</title>

<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

</head>

<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" RethrowAjaxExceptions="True">

</ext:ResourceManager>
<%-- Data stores--%>
<ext:Store ID="stoCharts" runat="server" AutoLoad="True">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Date" />
<ext:ModelField Name="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>


<ext:Desktop
ID="MyDesktop"
runat="server">

<Modules>
<%-- Dashboard window--%>
<ext:DesktopModule ModuleID="Dashboard">
<Window>
<ext:Window ID="wndDashoard"
runat="server"
Icon="Help"
Width="1000"
Height="600"
Layout="Fit"
Hidden="True"
ExpandOnShow="True"
MinHeight="100"
MinWidth="100"
Maximizable="True"
Minimizable="True"
Resizable="True"
Title="Dashboard"
Modal="False" Draggable="True">

</ext:Window>
</Window>
</ext:DesktopModule>
</Modules>
<StartMenu Height="300" Title="Start Here" runat="server" HideTools="True">
<MenuItems>
<ext:MenuItem Text="Launch Window">
<Listeners>
<Click Handler="#{MyDesktop}.getModule('Dashboard').createWindow() ;"></Click>
</Listeners>
<DirectEvents>
<Click OnEvent="TestCharts"></Click>
</DirectEvents>
</ext:MenuItem>
</MenuItems>
</StartMenu>
</ext:Desktop>

</form>
</body>

</html>


in the buildpanel function

geoffrey.mcgill
Aug 17, 2012, 4:00 PM
I believe the following string is not correct in your code sample:


"panChart.ClientID.header.getEl()"

panChart.ClientID should be C# concatenated to a string.

Please review the sample posted above by @daniil.

Daniil
Aug 17, 2012, 4:45 PM
The Target property has been fixed in the 2.1 branch.

feanor91
Aug 17, 2012, 5:07 PM
I believe the following string is not correct in your code sample:


"panChart.ClientID.header.getEl()"

panChart.ClientID should be C# concatenated to a string.

Please review the sample posted above by @daniil.

Yes, I see, but the point is that boh tooltip AND panel are code behind created, so I couldn't use an Ext object as in the example, because it simply didn't exist as a javascript object and coul't be accessed (I have a javascript error if I try)


The Target property has been fixed in the 2.1 branch.

I will try on monday. I hope that I will not be stop with same problem above.

Daniil
Aug 18, 2012, 7:58 AM
Yes, I see, but the point is that boh tooltip AND panel are code behind created, so I couldn't use an Ext object as in the example, because it simply didn't exist as a javascript object and coul't be accessed (I have a javascript error if I try)

Then you can attach a target for the ToolTip within a Panel AfterRender listener using the setTarget method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tip.ToolTip-method-setTarget (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.tip.ToolTip-method-setTarget)

feanor91
Aug 18, 2012, 8:06 AM
Yes, this is a very good idea. Thanks

feanor91
Aug 20, 2012, 9:10 AM
Hello

Basicaly it works but I still have a problem. I cannot create the tooltip associated to the panel. I work in vb and not in C# and all I try to create my tooltip conduct to an undefined object in JS. Here the code I use to create my tooltip (in the same time as the panel):



Dim ChartTip As New Ext.Net.ToolTip
ChartTip.ID = "tip" + ChartsToDraw
ChartTip.AutoHide = "false"
ChartTip.Closable = "true"
ChartTip.Draggable = "true"
ChartTip.Html = "Click the X to close tip on pan" + ChartsToDraw

MyPanel.Controls.Add(ChartTip)



I think problem is on the last line. I try, Me.Controls.Add(ChartTip), MyWindows.Controls.Add(ChartTip) (I have a window definition just above to add the panel to), but nothing works. In the same time, I will try to work on a simple example in VB to look for.

Edit:

It works. I render the tip to the window: here the code of the function:



<DirectMethod(ShowMask:=True, Msg:="Server is building charts, please wait")> Public Sub BuildPanelByDirectMethod(ByVal Title As String, ByVal Left As Double, ByVal Top As Double, ByVal ChartsToDraw As String, ByVal Width As Double, ByVal Height As Double)
Userparameters = GlobalFunction.ReadUserDataFromCookie(Request.Cook ies("User"))
Dim INT_idRmdEntity As Integer = Userparameters.idRmdEntities

Dim myWindow As Ext.Net.Window = MyDesktop.Modules("Dashboard").Window(0)
Dim MyPanel As New Ext.Net.Panel
Dim myChart As New Ext.Net.Chart

Dim ChartTip As New Ext.Net.ToolTip
ChartTip.ID = "tip" + ChartsToDraw
ChartTip.AutoHide = "false"
ChartTip.Closable = "true"
ChartTip.Draggable = "true"
ChartTip.Html = "Click the X to close tip on pan" + ChartsToDraw

ChartTip.Render(myWindow)

myChart = BuildChart(ChartsToDraw, False)

MyPanel.ID = "pan" + ChartsToDraw
MyPanel.Title = Title
MyPanel.Layout = "Fit"
MyPanel.Height = CType(Height, Integer)
MyPanel.Width = CType(Width, Integer)
MyPanel.X = CType(Left, Integer)
MyPanel.Y = CType(Top, Integer)

MyPanel.Listeners.AfterRender.Handler = "ShowPanelTip('" + MyPanel.ID + "', '" + ChartTip.ID + "');"

MyPanel.Items.Add(myChart)

MyPanel.Render(myWindow)

End Sub


and in the javasscript call after panel is rendered:


var ShowPanelTip = function (pan, tip)
{
Ext.getCmp(tip).setTarget(Ext.getCmp(pan).header.g etEl());
}

Vladimir
Aug 20, 2012, 1:16 PM
Use Tooltips collection instead Controls


MyPanel.Tooltips.Add(ChartTip)

feanor91
Aug 20, 2012, 1:28 PM
I tried last week, but fail, as I understand in Sencha forum about the tooltip collection, it seems related to the tools option, but I may be wrong.

Vladimir
Aug 20, 2012, 2:16 PM
No, not Tools collection, Tooltips is different collection

feanor91
Aug 20, 2012, 2:23 PM
OK, now I know it work in the way I find, I will retry, if I understand well, it will simply change the way the tooltip will be added to the dom right? And if so, what is the advantage in the front of my solution?

Daniil
Aug 21, 2012, 10:25 AM
Placing the ToolTip into the ToolTips collection will cause this ToolTip to be rendered automatically.

Generally, your solution is good as well. Just it looks more organized with the ToolTips collection.

feanor91
Aug 21, 2012, 10:57 AM
Hi,

It works for with the tooltips collection too. In fact, in my previous try, I rest on the problem I was not able to set tatget to the tooltip.

However I have a question: what is the purpose of the tooltip collection? can we have more than one tooltip on an object? And change the tolotip use depending of the context at run time? if yes, could be interesting....

Daniil
Aug 21, 2012, 11:14 AM
what is the purpose of the tooltip collection?

Generally, it is for ToolTips assigned to the control. The main benefits are:

You don't need to render the ToolTips manually as you did with .Render().
Auto assigning the Target, i.e. if no Target specified, when the control will be the Target.
The things looks better organized.




can we have more than one tooltip on an object?

Do you mean putting several control into the ToolTips collection? Or assigning several ToolTips to the control? Anyways, the two things are possible.


And change the tolotip use depending of the context at run time?

Well, anything that is commonly possible via client and server API is possible for ToolTips as well. If you will specify more concrete requirement, I could suggest something concrete as well.