Hi Daniil,
I created a simplified example. It works but when 2 usercontrols are implemented the sprites are not shown in the correct panels or the events are not shown or in the wrong panels.
I used the data from the Australia example on the Ext.net site.
Idea is to load a panel with a background sprite (here green rectangle, but in the application an image). The australia sprites are added over this background when the buttons between the panels are clicked. Removing the sprites is also possible with some buttons.
You can experiment by taking out the init methods (DrawUserControl1.initDraw() and DrawUserControl2.initDraw()) Then no background is drawn. Sprites are drawn on correct panels, but the mouseover shows hightlights in the wrong panel.
Or by taking out the complete second panel. (and its references in the parent). Than it works as it should work, but only with one usercontrol.
Very interested what you can make of it!
Hans
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default5.aspx.vb" Inherits="ExtNetExamples.Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register src="DrawUserControl.ascx" tagname="DrawUserControl" tagprefix="ucDrawUserControl" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
</LayoutConfig>
<Items>
<ext:Panel ID="pnlBaseDraw1" runat="server" IDMode="Explicit"
Title="Draw1"
Border="true" Header="true"
Collapsed="false"
Collapsible="false"
MinWidth="500"
Width="500"
MinHeight="500"
Height="500"
MarginsSummary="0 0 0 0"
CMarginsSummary="0 0 0 0"
AutoScroll="false"
Padding="0" >
<Content>
<ucDrawUserControl:DrawUserControl ID="DrawUserControl1" runat="server" />
</Content>
</ext:Panel>
<ext:Panel ID= "knoppen" runat="server" >
<Items>
<ext:Button ID="btnAddSprites1" runat="server" Text="Sprites 1">
<DirectEvents>
<Click OnEvent="btnAddSprites1_onClick">
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnRemoveSprites1" runat="server" Text="Remove 1">
<DirectEvents>
<Click OnEvent="btnRemoveprites1_onClick">
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnAddSprites2" runat="server" Text="Sprites 2">
<DirectEvents>
<Click OnEvent="btnAddSprites2_onClick">
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnRemoveSprites2" runat="server" Text="Remove 2">
<DirectEvents>
<Click OnEvent="btnRemoveprites2_onClick">
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="pnlBaseDraw2" runat="server" IDMode="Explicit"
Title="Draw2"
Border="true" Header="true"
Collapsed="false"
Collapsible="false"
MinWidth="500"
Width="500"
MinHeight="500"
Height="500"
MarginsSummary="0 0 0 0"
CMarginsSummary="0 0 0 0"
AutoScroll="false"
Padding="0" >
<Content>
<ucDrawUserControl:DrawUserControl ID="DrawUserControl2" runat="server" />
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Imports Ext.Net
Imports Ext.Net.Utilities
Imports ExtX = Ext.Net.X
Namespace ExtNetExamples
Partial Class Default5
Inherits System.Web.UI.Page
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
If (Not Page.IsPostBack) Then
If (Not ExtX.IsAjaxRequest) Then
Call Me.DrawUserControl1.initDraw()
Call Me.DrawUserControl2.initDraw()
End If
End If
End Sub
Sub btnAddSprites1_onClick(sender As Object, e As DirectEventArgs)
Call Me.DrawUserControl1.addSprites()
End Sub
Sub btnRemoveprites1_onClick(sender As Object, e As DirectEventArgs)
Call Me.DrawUserControl1.removeSprites()
End Sub
Sub btnAddSprites2_onClick(sender As Object, e As DirectEventArgs)
Call Me.DrawUserControl2.addSprites()
End Sub
Sub btnRemoveprites2_onClick(sender As Object, e As DirectEventArgs)
Call Me.DrawUserControl2.removeSprites()
End Sub
End Class
End Namespace
And the usercontrol:
<%@ Control Language="VB" AutoEventWireup="true" CodeFile="DrawUserControl.ascx.vb" Inherits="ExtNetExamples.DrawUserControl" %>
<ext:ToolTip
ID="DotTooltip"
runat="server" Width="65"
Anchor="left"
Title="">
</ext:ToolTip>
<ext:Panel ID="pnlMap" IDMode="Explicit"
runat="server"
Header="false"
FrameHeader="false"
Title="?"
AutoHeight="true"
AutoScroll="false"
PaddingSpec="0 0 0 0" Layout="FitLayout"
BodyStyle="background-color:transparent; border:none;">
<Bin>
<ext:ObjectHolder ID="InfoHolder" IDMode="Explicit" runat="server" />
</Bin>
<HtmlBin>
<ext:XScript ID="XScript1" runat="server" >
<script type="text/javascript" >
var leave_timer;
#{InfoHolder}_onMouseOver = function(sprite, idx) {
//alert("name " + sprite.surface.id + " sprites: "+idx+" out of "+sprite.surface.items.length);
//alert("InfoHolder " +#{InfoHolder}.mapinfo.length);
if (#{InfoHolder} !== undefined) {
//alert("name " + sprite.surface.id + " sprites: "+sprite.id);
sprite.stopAnimation();
var dot = sprite.surface.items.get(sprite.id)
var cState = #{InfoHolder}.mapinfo[idx].state
clearTimeout(leave_timer);
var tip = #{DotTooltip};
var xy = dot.el.getXY();
xy[0] = xy[0] + 40;
xy[1] = xy[1] - 25;
tip.setTitle('info');
tip.update(cState);
tip.showAt(xy);
sprite.animate({
to: {
fill: "#000000",
opacity: 1.0
},
duration: 500
});
}
}
#{InfoHolder}_onMouseOut = function(sprite, idx) {
if (#{InfoHolder} !== undefined) {
sprite.stopAnimation();
leave_timer = setTimeout(function () {
#{DotTooltip}.hide();
}, 700);
sprite.animate({
to: {
fill: "FF0000",
opacity: 1.0
},
duration: 500
});
}
}
#{InfoHolder}_onClick = function(sprite, idx, test) {
if (#{InfoHolder} !== undefined) {
alert("click: " +sprite.id + " "+#{InfoHolder}.mapinfo[idx].state);
}
}
</script>
</ext:XScript>
</HtmlBin>
<Items>
<ext:DrawComponent ID="drawMap" IDMode="Explicit" runat="server" ViewBox="false" >
</ext:DrawComponent>
</Items>
</ext:Panel>
Imports System.Data
Imports System.Xml
Imports Ext.Net
Imports Ext.Net.Utilities
Imports ExtX = Ext.Net.X
Namespace ExtNetExamples
Partial Class DrawUserControl
Inherits System.Web.UI.UserControl
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
If (Not Page.IsPostBack) Then
Dim iMapHeight As Integer = 500
Dim iMapWidth As Integer = 925
pnlMap.MinHeight = iMapHeight
pnlMap.MinWidth = iMapWidth
drawMap.MinHeight = iMapHeight
drawMap.MinWidth = iMapWidth
drawMap.MaxHeight = iMapHeight
drawMap.MaxWidth = iMapWidth
If (Not ExtX.IsAjaxRequest) Then
End If
End If
End Sub
Sub initDraw()
Dim sprite As Sprite = New Sprite
sprite.SpriteID = "Sprite999"
sprite.Type = SpriteType.Rect
sprite.Width = 100
sprite.Height = 100
sprite.X = 200
sprite.Y = 150
sprite.Fill = "green"
sprite.ZIndex = 205
' drawMap.Items.Add(sprite)
drawMap.Add(sprite)
sprite.Show(True)
End Sub
Sub addSprites()
Call removeSprites()
Dim doc As System.Xml.XmlDocument = New System.Xml.XmlDocument()
doc.Load(Server.MapPath("Australia.xml"))
Dim info As List(Of stateInfo) = New List(Of stateInfo)
Dim i As Integer = 0
For Each state As System.Xml.XmlNode In doc.SelectNodes("states/state")
Dim sprite As Sprite = New Sprite
Dim cNewId As String = "sprite" + CStr(i)
sprite.SpriteID = cNewId
sprite.Type = SpriteType.Path
sprite.Path = state.SelectSingleNode("path").InnerText
sprite.Stroke = "#FF0000"
sprite.StrokeWidth = 1
sprite.StrokeLinejoin = StrokeLinejoin.Round
sprite.Cursor = "pointer"
sprite.ZIndex = 210
Dim dOpacity As Double = 0.6
sprite.FillOpacity = dOpacity
sprite.Fill = "#FF0000"
sprite.Opacity = 1.0
'sprite.FillOpacity = 0.1
sprite.Listeners.MouseOver.Handler = "#{InfoHolder}_onMouseOver(this, " + i.ToString + ");"
sprite.Listeners.MouseOut.Handler = "#{InfoHolder}_onMouseOut(this, " + i.ToString + ");"
sprite.Listeners.Click.Handler = "#{InfoHolder}_onClick(this, " + i.ToString + ");"
drawMap.Add(sprite)
sprite.Show(True)
i += 1
info.Add(New stateInfo With {.state = state.SelectSingleNode("name").InnerText, .desc = state.SelectSingleNode("description").InnerText})
Next
InfoHolder.Items.Remove("mapinfo")
InfoHolder.Items.Add("mapinfo", info)
InfoHolder.UpdateData()
End Sub
Sub removeSprites()
Dim doc As System.Xml.XmlDocument = New System.Xml.XmlDocument()
doc.Load(Server.MapPath("Australia.xml"))
Dim i As Integer = 0
For Each state As System.Xml.XmlNode In doc.SelectNodes("states/state")
Dim sprite As Sprite = New Sprite
Dim cNewId As String = "sprite" + CStr(i)
Dim spriteold As Sprite = drawMap.GetSprite(cNewId)
Dim spritetoberemoved As Sprite = New Sprite
spritetoberemoved.SpriteID = cNewId
drawMap.Remove(spritetoberemoved, True)
i += 1
Next
InfoHolder.Items.Remove("mapinfo")
InfoHolder.UpdateData()
End Sub
Public Class stateInfo
Property state As String
Property desc As String
End Class
End Class
End Namespace
