Nov 15, 2011, 5:16 PM
[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.
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]