Nov 22, 2010, 11:51 AM
[CLOSED] Problems with Tooltip autoLoad (AJAX) and height
Hi,
today we tried to load data into a tooltip dynamically on mouse over effect within a grid only on first cell.
So far so good, but there are three issues:
- JS Error
- Height doesn't apply
- Loads only the first URL, then i shows only the cached AJAX Page.
We are not sure if we did something wrong, but at least its almost working.
Here are screens and the code.
ASPX
today we tried to load data into a tooltip dynamically on mouse over effect within a grid only on first cell.
So far so good, but there are three issues:
- JS Error
- Height doesn't apply
- Loads only the first URL, then i shows only the cached AJAX Page.
We are not sure if we did something wrong, but at least its almost working.
Here are screens and the code.
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);
if(cellIndex != 0)
{
#{RowTip}.hide();
}
else
{
var rowIndex = #{GridPanel1}.view.findRowIndex(this.triggerElement);
var record = #{Store1}.getAt(rowIndex);
#{RowTip}.autoLoad.url = "http://www.google.de/#q=" + record.data.ID;
}
};
</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" Align="Right"
Width="90px">
</ext:Column>
<ext:Column ColumnID="NAME" Header="NAME" Sortable="true" DataIndex="NAME" Align="Right"
Width="90px">
</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" Width="500"
Height="800">
<Listeners>
<Show Fn="showTip" />
</Listeners>
<AutoLoad ShowMask="true" NoCache="true">
</AutoLoad>
</ext:ToolTip>
</form>
</body>
</html>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 (!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();
}
}
}
Last edited by Daniil; Nov 22, 2010 at 1:36 PM.
Reason: [CLOSED]
