[CLOSED] Image and AllowPan

[gidi]

Hi,

is it possible zu set .AllowPan dynamicly, for example with button?

For example.

Button.Listeners.Click.Handler = "#{Image1}.SetAllowPan(true);"

Thanks
Gidi

[fabricio.murta]

Hello Gidi!

I'm a bit lost here... What does #{Image1} points to, exactly, is that an Ext.NET component? Can you provide a little more context on the scanario you have at hand?

In general, component settings that are supported to be set after they are rendered will have their get-set methods, so if the component in question has the allowPan setting -and- there is support to unset or set it after the page has been rendered to the client, you should have the getter and setter, thus #{Image1}.setAllowPan(true) should exist.

Otherwise, odds are that the functionality is either not feasible to be implemented, or it is just not there.

At a first glance, I'd say that rendering a component with a "pan" feature enabled, and then disabling according to the website's data, should be feasible; maybe not the other way around (render disabled, then enable by user interaction, etc). But that's a hard call not being sure which component are we talking about.

Looking forward to your follow-up!

[gidi]

Hi fabricio,

i use this code to create a window

    Private Function CreateDialogImageWindow() As Window

                aktDialogImageWindow = New Window
                AddHandler aktDialogImageWindow.DirectEvents.Hide.Event, AddressOf OpenDialogWindow__Hide

                With aktDialogImageWindow

                    .ID = "DialogImageWindow"
                    .Title = ""
                    .Icon = Icon.New
                    .Maximizable = False
                    .Minimizable = False
                    .Scrollable = ScrollableOption.Both
                    .CloseAction = CloseAction.Hide
                    '.Layout = "Fit"
                    .Region = Region.Center


                    Dim _ButtonZoomOut As New Button
                    With _ButtonZoomOut
                        .Icon = Icon.MagifierZoomOut
                        .Listeners.Click.Handler = "newFactor(#{SizesCombo}, -1);"
                    End With

                    Dim _SizeCombo As New ComboBox
                    With _SizeCombo
                        .ID = "SizesCombo"
                        .TriggerIcon = TriggerIcon.SimpleMagnify
                        .Editable = False
                        .Items.Add(New ListItem(Me.Translate("tf-Automatisch"), -1))
                        .Items.Add(New ListItem("10%", 0.1))
                        .Items.Add(New ListItem("25%", 0.25))
                        .Items.Add(New ListItem("33%", 0.33))
                        .Items.Add(New ListItem("50%", 0.5))
                        .Items.Add(New ListItem("100%", 1))
                        .Items.Add(New ListItem("200%", 2))
                        .Items.Add(New ListItem("500%", 5))
                        .Items.Add(New ListItem("1000%", 10))
                        .Items.Add(New ListItem("2000%", 20))
                        .Listeners.Select.Handler = "resize(#{Image1}, records[0].get(this.valueField),#{DialogImageWindow});"
                        .SelectedItems.Add(.Items(0))
                    End With

                    Dim _ButtonZoomIn As New Button
                    With _ButtonZoomIn
                        .Icon = Icon.MagnifierZoomIn
                        .Listeners.Click.Handler = "newFactor(#{SizesCombo}, 1);"
                    End With

                    Dim _ToolBar As New Toolbar
                    _ToolBar.Items.Add(_ButtonZoomOut)
                    _ToolBar.Items.Add(_SizeCombo)
                    _ToolBar.Items.Add(_ButtonZoomIn)
                    .TopBar.Add(_ToolBar)

                    aktDialogImageWindow__Image = New Image
                    With aktDialogImageWindow__Image
                        .ID = "Image1"
                        .ResizableConfig = New Resizer
                        .ResizableConfig.PreserveRatio = True
                        .ResizableConfig.HandlesSummary = "s e se"
                        .Listeners.Complete.Handler = "newFactor(#{SizesCombo}, 0);"
                        .Listeners.ResizerResize.Handler = "newFactor(#{SizesCombo}, 0);"
                        .Listeners.Click.Handler = "#{Image1}.SetAllowPan(true);"
                        .Border = False
                    End With

                    .Items.Add(aktDialogImageWindow__Image)

                    .Hidden = True

                End With

                aktHTTFSiteWindows.Add("DialogImageWindow", aktDialogImageWindow)

                Return aktDialogImageWindow

            End Function

and this code to Show this Window

            Public Sub OpenDialogImageWindow(ByVal ID As String, ByVal Title As String, ByVal Icon As Icon, ByVal ImageURL As String, Optional Height As Integer = 500, Optional Width As Integer = 600)

                With aktDialogImageWindow

                    .Tag = ""
                    .Title = Me.Translate(Title)
                    .Icon = Icon

                    If Height = 0 Then
                        .Maximize()
                    Else
                        .Height = Height
                        .Width = Width
                    End If



                    aktDialogImageWindow__Image.ImageUrl = ImageURL

                    .Modal = False
                    .Show()

                End With

            End Sub

All works fine, but this line of code dosen't work.

.Listeners.Click.Handler = "#{Image1}.SetAllowPan(true);"

Thanks to you
Gidi

[fabricio.murta]

Hello Gidi!

All works fine, but this line of code dosen't work.

How exactly does that not work? Any error message, red squiggles in VS?

[gidi]

No, the code is correct, but the javascript "#{Image 1}.SetAllowPan(true);" would not executed.

I must also search for an alternate.

Thanks
Gidi

[fabricio.murta]

Hello Gidi!

If you are not getting any error messages and the click event on the image compoent is not triggering at all, you are probably using a different version of Ext.NET or already have overrides that change the behavior of the Image component.

In the first place, the ext:Image component does have a click listener that gets triggered whenever the image is clicked.

Second, Ext.NET's implementation of the ext:Image component does not implement a setAllowPan() function (especially not SetAllowPan() which goes against our JavaScript function naming pattern).

I believe that, if you can run that code and it somehow works, there was an attempt to implement an extension to the component in your Ext.NET project and, for some reason, it does not work for scenario you have at hand.

If you were using Ext.NET with no modifications of the ext:Image component, that listener should have been throwing something like App.Image1.SetAllowPan is not a function, as it would be rather undefined.

So should you have a simple test case reproducing the scenario you have at hand (something we can run at our side, the one you provided has several external and unknown -- to me -- references), we could perhaps understand your needs and advise how you could attain your objective.

At first it seems something possible... maybe drawing the image with allowPan enabled, but disabling the drag listener; enabling it then only once it is first clicked... but we'd need to get into the same page before we can suggest anything for real here.

Looking forward to your follow-up!

[gidi]

Hi Fabricio,

thank for your reply. But i must move the Problem. No Time.

Thanks
Gidi

[fabricio.murta]

Hello, Gidi!

Fine, feel free to let us know (and provide more info) if or once you need to handle this issue and we'll be here to help! :)

For now, we'll be marking this a closed, but you can post a follow-up here if you want it reopened.