In this example a 1000ms delayed tooltip with a IFrame is loaded on mouse over event within the ID column. The IFrame href is built with store data which is loaded with current row/cell index. If you don't like IFrames, just replace it by a panel or load content async into the .innerHTML
Screenshot:
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tests._Default" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ 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></title>
<ext:XScript runat="server">
<script type="text/javascript">
var showTip = function () {
var cellIndex = #{GridPanel1}.view.findCellIndex(this.triggerElement);
var rowIndex = #{GridPanel1}.view.findRowIndex(this.triggerElement);
var record = #{Store1}.getAt(rowIndex);
if(record != null && cellIndex == 0)
{
this.body.dom.innerHTML = "<iframe style='height:250px;width:250px;' src='Default.aspx?q=" + record.data.ID + "' />";
}
else{
this.hide();
}
};
</script>
</ext:XScript>
</head>
<body>
<form id="form1" runat="server" onsubmit="return false">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store runat="server" ID="Store1" RemoteSort="true" OnRefreshData="Store_RefreshData">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="NAME" />
</Fields>
</ext:JsonReader>
</Reader>
<Proxy>
<ext:PageProxy>
</ext:PageProxy>
</Proxy>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
Header="false" Height="600px" Border="false" Layout="Fit">
<LoadMask ShowMask="true" />
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="ID" Header="ID" Sortable="true" DataIndex="ID">
</ext:Column>
<ext:Column ColumnID="NAME" Header="NAME" Sortable="true" DataIndex="NAME" Width="290px">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
<ext:ToolTip ID="RowTip" runat="server" Target="={GridPanel1.getView().mainBody}"
Delegate=".x-grid3-cell" TrackMouse="true" ShowDelay="1000" Anchor="left" AutoDoLayout="true"
AutoHeight="true" AutoWidth="true">
<Listeners>
<Show Fn="showTip" />
</Listeners>
</ext:ToolTip>
</form>
</body>
</html>
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace Tests
{
// DATA OBJECT
public class TheObjects
{
public string ID { get; set; }
public string NAME { get; set; }
}
// THE PAGE
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["q"]))
{
Response.Write(DateTime.Now.ToString() + ": " + Request["q"]);
Response.End();
}
if (!X.IsAjaxRequest)
{
// INIT DATA
List<TheObjects> oList = new List<TheObjects>();
for (int i = 0; i <= 150; i++)
{
oList.Add(new TheObjects { ID = "ID" + i, NAME = "Name " + i });
}
Session["objs"] = oList;
}
}
// BIND DATA WITH PROXY
protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
Store1.DataSource = Session["objs"];
Store1.DataBind();
}
}
}
Keine Kommentare:
Kommentar veröffentlichen