[CLOSED] Complex HTML ToolTip on Single object in GridPanel cell

  1. #1

    [CLOSED] Complex HTML ToolTip on Single object in GridPanel cell

    Hi,

    in this example a ToolTip is showed in all cells.
    It's possible show the ToolTip ONLY on "mouse over" on ImageInfo object?

    I need show the row's details in a complex HTML ToolTip, but ONLY when I move the mouse on the ImageInfo Object.

    Can you help me?

    The Code:

    <%@ Page Language="vb" AutoEventWireup="true" Inherits="B2B.WEB.WebForm1" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As EventArgs)
            If Not (Ext.Net.X.IsAjaxRequest) Then
                Store1.DataSource = New Object() {New Object() {"aaa", 1}, New Object() {"bbb", 2}, New Object() {"ccc", 3}}
                Store1.DataBind()
            End If
        End Sub
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>GridPanel Row with ToolTip - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
        <script>
             var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    record = view.getRecord(toolTip.triggerElement),
                    data = Ext.encode(record.data);
    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Col1" Type="String" />
                                    <ext:ModelField Name="Col2" Type="Int" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:ComponentColumn runat="server" Text="X" Width="30" >
                            <Component>
                                <ext:Image runat="server" ID="ImageInfo" ImageUrl="~/Immagini/Info.png" />
                            </Component>
                        </ext:ComponentColumn>
                        <ext:Column runat="server" Text="Col 1" DataIndex="Col2" />
                        <ext:Column runat="server" Text="Col 2" DataIndex="Col2" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>     
            
            <ext:ToolTip 
                runat="server" 
                Target="={#{GridPanel1}.getView().el}"
                Delegate="={#{GridPanel1}.getView().itemSelector}"
                TrackMouse="true">
                <Listeners>
                    <Show Handler="onShow(this, #{GridPanel1});" />
                </Listeners>
            </ext:ToolTip>     
        </form>
    </body>
    </html>
    Last edited by Daniil; May 04, 2015 at 8:09 AM. Reason: [CLOSED]
  2. #2
    Hi Mario,

    Please change
    Delegate="={#{GridPanel1}.getView().itemSelector}"
    to
    Delegate="img"
    and
    record = view.getRecord(toolTip.triggerElement)
    to
    record = view.getRecord(Ext.get(toolTip.triggerElement).up(view.itemSelector))
  3. #3
    It's Work !
    Tnx Danill

Similar Threads

  1. [CLOSED] GridPanel, Focus whole row (not single cell)
    By matt in forum 3.x Premium Help
    Replies: 11
    Last Post: Jan 29, 2015, 6:41 PM
  2. How can Set tooltip on single cell on grid?
    By Sangeeta in forum 2.x Help
    Replies: 7
    Last Post: Nov 19, 2014, 11:35 AM
  3. Multiple information in single cell in GridPanel
    By jamalmellal in forum 2.x Help
    Replies: 1
    Last Post: Oct 29, 2013, 5:46 PM
  4. Replies: 1
    Last Post: Nov 20, 2012, 9:27 AM
  5. Replies: 4
    Last Post: Feb 02, 2010, 1:00 PM

Tags for this Thread

Posting Permissions