PDA

View Full Version : [CLOSED] Complex HTML ToolTip on Single object in GridPanel cell



Mario
Apr 27, 2015, 5:36 PM
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>

Daniil
Apr 27, 2015, 9:18 PM
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))

Mario
May 03, 2015, 8:30 AM
It's Work !
Tnx Danill