[CLOSED] GridPanel Cell Tooltip - javascript error on this.hide()

  1. #1

    [CLOSED] GridPanel Cell Tooltip - javascript error on this.hide()

    I am trying to display a tooltip when the mouse is over the first cell in the gridpanel, and then hide the tooltip when the mouse is over a different cell. However, I am constantly getting a javascript error when the mouse is over a hidden tooltip cell: "Uncaught Element.alignToXY with an element that doesn't exist"

    The tooltip is hidden, however the javascript error pops up each time I mouse over one of the cells where is it hidden.


    
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Product.WebForm1" %>
    
    
    
    
    <%@ 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>Sales Runsheet</title>
        
        <script runat="server">
        
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
                Store1.DataSource = New Object() {New Object() {1, "Jan", 2010, 1, "1/1/2010"}, _
                                                      New Object() {2, "Feb", 2010, 1, "2/1/2010"}, _
                                                      New Object() {3, "Mar", 2010, 1, "3/1/2010"}, _
                                                      New Object() {4, "Apr", 2010, 1, "4/1/2010"}, _
                                                      New Object() {5, "May", 2010, 1, "5/1/2010"}, _
                                                      New Object() {6, "Jun", 2010, 1, "6/1/2010"}, _
                                                      New Object() {7, "Jul", 2010, 1, "7/1/2010"}, _
                                                      New Object() {8, "Aug", 2010, 1, "8/1/2010"}, _
                                                      New Object() {9, "Sep", 2010, 1, "9/1/2010"}, _
                                                      New Object() {10, "Oct", 2010, 1, "10/1/2010"}, _
                                                      New Object() {11, "Nov", 2010, 1, "11/1/2010"}, _
                                                      New Object() {12, "Dec", 2010, 1, "12/1/2010"}, _
                                                      New Object() {13, "Q1", 2010, 3, "1/1/2010"}, _
                                                      New Object() {14, "Q2", 2010, 3, "4/1/2010"}, _
                                                      New Object() {15, "Q3", 2010, 3, "7/1/2010"}, _
                                                      New Object() {16, "Q4", 2010, 3, "10/1/2010"}, _
                                                      New Object() {17, "Annual", 2010, 5, "1/1/2010"}}
                Store1.DataBind()
               
            End Sub
            
          
         </script>
    
    
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
    
    
    
    
              var showTip = function () {            
                    var cellIndex = #{grdContracts}.view.findCellIndex(this.triggerElement);            
                    var rowIndex = #{grdContracts}.view.findRowIndex(this.triggerElement);
                    var record = #{Store1}.getAt(rowIndex);
                    if(record != null && cellIndex == 0)
                    {    
                        var strHtml = ''
    
    
                        strHtml += '<a href="#"><b>Mirabel\'s Digital Studio</b></a>';
                        strHtml += '<br /><b>Ad Image ID:</b> ' + Store1.getAt(rowIndex).get('id');                                                         
    
    
                        this.body.dom.innerHTML = strHtml;
    
    
                    }
                    else{
                        this.hide();
                        //this.body.dom.innerHTML = '';                
                    }
                };
    
    
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="form1" runat="server">
    
    
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
       
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="issuename" />
                        <ext:RecordField Name="issueyear"  />
                        <ext:RecordField Name="issueset"  />
                        <ext:RecordField Name="issuedate" Type="Date" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
                
                  
                    <ext:GridPanel
                            ID="grdContracts"
                            runat="server" 
                            StoreID="Store1" 
                            Title="" AutoHeight="true">   
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>                                                                                      
                                    <ext:Column Header="id" DataIndex="id" ColumnID="id">  
                                    </ext:Column>
                                    <ext:Column Header="issuename" DataIndex="issuename" ColumnID="issuename">  
                                    </ext:Column>                              
                                    <ext:Column Header="issueyear" DataIndex="issueyear" ColumnID="issueyear">  
                                    </ext:Column>                              
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                            </SelectionModel>  
                        </ext:GridPanel> 
    
    
    
    
    
    
                   
    
    
    
    
                      
            
            <ext:ToolTip ID="RowTip" runat="server" 
                Target="={grdContracts.getView().mainBody}"
                Delegate=".x-grid3-cell" 
                TrackMouse="false" 
                ShowDelay="500" 
                Anchor="left" 
                AutoDoLayout="true"
                AutoHeight="true" 
                AutoWidth="true" 
                Closable="false" 
                Header="false"
                AutoHide="true"
                HideDelay="2000">
            <Listeners>
                <Show Fn="showTip" />
            </Listeners>
        </ext:ToolTip>
    
    
    
    
    
    
            
        </form>
      </body>
    </html>
    Last edited by Daniil; Nov 16, 2011 at 12:42 PM. Reason: [CLOSED]
  2. #2
    Hi,

    A correct way to don't show a ToolTip is returning false from its BeforeShow event.

    Though there is an ExtJS bug at the first ToolTip showing. To resolve it please set up the following listener.
    <ext:ResourceManager runat="server">
    
        <Listeners>
    
            <DocumentReady Handler="ToolTip1.render(Ext.getBody());" />
    
        </Listeners>
    </ext:ResourceManager>
    Please see the full example.
    http://forums.ext.net/showthread.php...ll=1#post44680
  3. #3

    That works perfectly, thanks...

    Please mark as [SOLVED].

Similar Threads

  1. [CLOSED] GridPanel Cell Tooltip is not working
    By supera in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 27, 2017, 11:47 AM
  2. [CLOSED] Hide tooltip
    By gets_gui in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 19, 2012, 1:45 PM
  3. [CLOSED] Remove red flag from gridpanel cell in javascript
    By OSYS_FMS in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 06, 2012, 12:13 PM
  4. [CLOSED] Cell tooltip
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 01, 2011, 4:34 PM
  5. Replies: 6
    Last Post: May 25, 2010, 9:53 AM

Tags for this Thread

Posting Permissions