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