Sep 06, 2012, 11:23 AM
[CLOSED] ToolTip not working with Viewport
Hi,
I have a tooltip on Gridpanel.
It doesn't work inside a viewport.
Elke
I have a tooltip on Gridpanel.
It doesn't work inside a viewport.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestToolTip.aspx.vb" Inherits="CUST.Roche.Import.View.TestToolTip" %>
<%@ 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 runat="server">
<script type="text/javascript">
function showAddress(contactId, value) {
if (value == 'Address') {
url = "../_ContactAndAddress/EventTexts.aspx";
window.open(url);
}
if (value == 'Copy') {
url = "../_ContactAndAddress/ContactControl.aspx?Usage=Internal&ContactId=" + contactId;
window.open(url);
}
}
var showToolTip = function (toolTip, grid) {
var cellIndex = grid.view.findCellIndex(toolTip.triggerElement);
var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
if (fieldName == "EventText") {
var rowIndex = grid.view.findRowIndex(toolTip.triggerElement);
var record = StoreEventList.getAt(rowIndex);
if (typeof (record) != 'undefined' && record.get('Error') != 'ERROR') {
// toolTip.update(data);
url = "../_ContactAndAddress/EventTexts.aspx?Usage=Internal";
toolTip.load({ url: url, mode: 'iframe' });
} else {
toolTip.hide();
}
}
else {
toolTip.hide();
}
return false;
};
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
<ext:Store ID="StoreEventList" runat="server" IgnoreExtraFields="false">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="EventCauserInt" Type="String" />
<ext:RecordField Name="EventCauserExt" Type="String" />
<ext:RecordField Name="EventOwner" Type="String" />
<ext:RecordField Name="EventState" Type="String" />
<ext:RecordField Name="EventType" Type="String" />
<ext:RecordField Name="EventText" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="fit">
<Items>
<ext:Panel ID="PanelMaster" runat="server" Layout="border" Border="true" Region="Center">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="StoreEventList" TrackMouseOver="true"
Title="Expander Rows with control" Collapsible="false" AnimCollapse="true" Width="600"
Height="450" Header="false" colu>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Id" Header="Id" Hidden="true" Width="40" DataIndex="Id" />
<ext:Column ColumnID="EventCauserExt" Header="EventCauserExt" Width="40" DataIndex="EventCauserExt" />
<ext:Column ColumnID="EventCauserInt" Header="EventCauserInt" Width="20" DataIndex="EventCauserInt">
</ext:Column>
<ext:Column ColumnID="EventOwner" Header="EventOwner" Width="20" DataIndex="EventOwner">
</ext:Column>
<ext:Column ColumnID="EventState" Header="EventState" Width="20" DataIndex="EventState">
</ext:Column>
<ext:Column ColumnID="EventType" Header="EventType" Width="20" DataIndex="EventType">
</ext:Column>
<ext:Column ColumnID="EventText" Header="EventTexts" Width="20" DataIndex="EventText">
</ext:Column>
<ext:CommandColumn Width="60" DataIndex="EventText">
<Commands>
<ext:GridCommand Icon="PageWhite" CommandName="Address">
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Listeners>
<Command Handler="showAddress(record.dataId, command);" />
</Listeners>
<View>
<ext:GridView ID="GridView1" runat="server" ForceFit="true" />
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<Plugins>
<ext:RowExpander ID="RowExpander" runat="server">
<Component>
<ext:FormPanel ID="RowEditor1" runat="server" Padding="6" Height="300" Border="false"
Layout="form" ForceLayout="true" ButtonAlign="Right" Cls="white-footer">
<Items>
<ext:CompositeField ID="CompositeField1" runat="server">
<Items>
<ext:TextField ID="txtExtEventCauserName" runat="server" DataIndex="EventCauserExt"
FieldLabel="ExtEventCauser" Width="150" />
<ext:Button runat="server" ID="ExtEventCauser" Icon="UserEarth" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSearchExternelContact %>">
<DirectEvents>
<Click OnEvent="cmdSearchExtUser">
<ext:EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:CompositeField>
<ext:CompositeField ID="CompositeField2" runat="server">
<Items>
<ext:TextField ID="txtIntEventCauserName" runat="server" DataIndex="EventCauserInt"
FieldLabel="IntEventCauser" Width="150" ReadOnly="false" />
<ext:Button runat="server" ID="IntEventCauser" Icon="User" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSearchInternalContact %>">
<DirectEvents>
<Click OnEvent="cmdSearchUser">
<ext:EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:CompositeField>
<ext:CompositeField ID="CompositeField3" runat="server">
<Items>
<ext:TextField ID="txtEventOwner" runat="server" DataIndex="EventOwner" FieldLabel="EventOwner"
Width="150" />
<ext:Button runat="server" ID="ButtonEventOwner" Icon="User" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSearchExternelContact %>">
<DirectEvents>
<Click OnEvent="cmdSearchUser">
<ext:EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:CompositeField>
<ext:ComboBox runat="server" ID="comEventType" DisplayField="Key" ValueField="Value"
DataIndex="EventType" FieldLabel="<%$ Resources:CUSTRocheImport, EventType %>"
ItemCls="rocheFieldLabelText" Cls="rocheTextField">
<Store>
<ext:Store ID="StoreEventType" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Value" />
<ext:RecordField Name="Key" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
<ext:ComboBox runat="server" ID="comEventState" DisplayField="Key" ValueField="Value"
DataIndex="EventState" FieldLabel="<%$ Resources:CUSTRocheImport, EventState %>"
ItemCls="rocheFieldLabelText" Cls="rocheTextField">
<Store>
<ext:Store ID="Store2" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Value" />
<ext:RecordField Name="Key" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
<ext:TabPanel ID="TabPanelEventTexts" runat="server" AutoWidth="true" Height="350"
EnableTabScroll="true">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Text1" Padding="5">
<Items>
<ext:TextArea runat="server" ID="textArea1" DataIndex="EventTexts" ItemCls="rocheFieldLabelText"
Cls="rocheTextField" Height="60" AutoWidth="true">
</ext:TextArea>
</Items>
</ext:Panel>
</Items>
<TopBar>
<ext:Toolbar ID="Toolbar2" Flat="false" runat="server">
<Items>
<ext:Button ID="Button5" runat="server" Text="Add Panel" Icon="Add" OnDirectClick="AddTextArea">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:TabPanel>
<ext:Hidden ID="Hidden1" runat="server" Text="1" />
<ext:Panel ID="PanelTexts" runat="server" Title="Accordion" Height="185" Width="350"
Layout="Accordion" AutoScroll="true">
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Panel 1" Html="Panel 1" Padding="5"
Border="false" />
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSaveOrderEvent %>">
<Listeners>
<Click Handler="#{RowEditor1}.getForm().updateRecord(#{RowEditor1}.record);
#{RowExpander}.collapseRow(#{StoreEventList}.indexOf(#{RowEditor1}.record));" />
</Listeners>
<DirectEvents>
<Click OnEvent="cmdSave">
<ext:EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Cancel" Icon="Decline" ToolTip="<%$ Resources:CUSTRocheImport, TooltipCancelEvent %>">
<Listeners>
<Click Handler="#{RowExpander}.collapseRow(#{Store1}.indexOf(#{RowEditor1}.record));" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</Component>
<Listeners>
<Expand Handler="#{RowEditor1}.record = record; #{RowEditor1}.getForm().loadRecord(record);" />
</Listeners>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
<ext:ToolTip ID="RowTip" runat="server" Target="={GridPanel1.getView().mainBody}"
MaxWidth="1000" MaxHeight="1000" Delegate=".x-grid3-cell" TrackMouse="true" ShowDelay="10"
Anchor="bottom" NoCache="true" Closable="true" Icon="PageWhite">
<Listeners>
<Show Handler="showToolTip(#{RowTip}, #{GridPanel1});" />
</Listeners>
</ext:ToolTip>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Thank you for your helpElke
Last edited by Daniil; Sep 12, 2012 at 5:56 AM.
Reason: [CLOSED]