[CLOSED] need to put a Tooltip on panel title

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] need to put a Tooltip on panel title

    Hello

    I try to apply following example in V2 :

    http://forums.ext.net/showthread.php...olTip-on-Panel

    But I can't make it to works?

    Any help please?
    Last edited by Daniil; Aug 26, 2012 at 10:47 AM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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>
  4. #4
    XTarget becomes a "target" custom config option.

    So, please add a "target" option into the CustomConfig collection.
  5. #5
    Quote Originally Posted by Daniil View Post
    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?
  6. #6
    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>
  7. #7
    I see, thanks I try
  8. #8
    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
  9. #9
    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.
    Geoffrey McGill
    Founder & CEO
  10. #10
    The Target property has been fixed in the 2.1 branch.
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] [#72] Title in Tab panel truncated in IE8 for ver2.1
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Sep 30, 2013, 4:19 PM
  2. [CLOSED] Dynamic Panel Title
    By pint in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 23, 2012, 6:25 AM
  3. Title of Panel with FormGroup=true
    By wdk in forum 1.x Help
    Replies: 6
    Last Post: Mar 23, 2012, 4:29 PM
  4. [CLOSED] Collapsed Panel Title
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 27, 2009, 1:03 PM
  5. Panel - Collapsed Title?
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Jan 21, 2009, 9:35 AM

Posting Permissions