PDA

View Full Version : [CLOSED] DrawComponent in UserControl



HansWapenaar
Apr 12, 2013, 12:10 PM
Hi,

I worked on a usercontrol containing a drawcomponent. Sprites are added to the drawcomponent after clicking a button. All works fine, including the click and mouseevents.

It goes wrong when I add a second usercontrol of the same type. Then the sprites of one usercontrol are added the other. It is always the last drawcomponent that gets the sprites.

On the forum I found info on multiple use of a usercontrol that includes javascript. http://forums.ext.net/showthread.php?21422-Ext-getCmp%28%29-not-working-in-UserControl

I applied this on the usercontrol that I made. But the sprites are still added to the wrong drawcomponent.
I thought it could have someting to do with the IDmode. I set that on explicit where possible. (panel containing the drawcomponent, the objectholder, the drawcomponent etc).
But it is not possible to set an idmode on a sprite. Could it have something to do with that?

The method that adds the sprites called from the parent: Call Me.mapExtTest.addSprites() where mapExtTest is the usercontrol that contains the drawcomponent.

Hans

Daniil
Apr 12, 2013, 12:25 PM
Hi Hans,

If you can provide a sample, we will be happy to investigate.

HansWapenaar
Apr 12, 2013, 2:17 PM
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

Daniil
Apr 12, 2013, 4:58 PM
It turns out that it is an id conflict:)

A Sprite's ID must be unique as well.

You can prefix it with the DrawComponents' ClientID.

sprite.SpriteID = drawMap.ClientID + "_999"

It regards to the both methods: initDraw and addSprites.

It should help remedy the problem.

HansWapenaar
Apr 12, 2013, 5:28 PM
Hi Daniil,

That does the trick!
It works fine now.
Thanks a lot.
You can close the thread.

Hans