PDA

View Full Version : [CLOSED] Loader double-click error



softmachine2011
Jun 07, 2012, 3:35 PM
Hi,

Regarding this other thread: Dynamic ButtonGroup (http://forums.ext.net/showthread.php?19393-CLOSED-Dynamic-ButtonGroup)

When we click over a div, we load and unload ButtonGroup controls into a Toolbar calling a hidden button listener. But when a double-click is done, then we have this error:

Cannot read property 'scope' of undefined
Ext.define.onComplete ext.axd:34883
dmCfg.complete ext.axd:1692
obj.userSuccess ext.axd:1123
(anonymous function) ext.axd:944
call

when calling Ext.util.DelayedTask function.


Any suggestion about how to avoid this problem?

Thanks in advance.

Daniil
Jun 07, 2012, 4:23 PM
Hi,

Please provide a sample to reproduce.

softmachine2011
Jun 08, 2012, 8:50 AM
Hi,

When clicking multiple times over Item1 div, there is the refered error.

Here is a sample code for the ASPX page:


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET 2.0 Loader Sample</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
<script runat="server">
[DirectMethod]
public static string UserControl(string parameters)
{
var prms = JSON.Deserialize<Dictionary<string, string>>(parameters);
return ComponentLoader.ToConfig(prms["url"]);
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="Fit" AutoScroll="true">
<Items>
<ext:Panel
runat="server"
Layout="Border">
<TopBar>
<ext:Toolbar runat="server">
<Loader
runat="server"
AutoLoad="false"
DirectMethod="#{DirectMethods}.UserControl"
Mode="Component">
<Params>
<ext:Parameter Name="url" Value="~/Sample.ascx" Mode="Value" />
</Params>
</Loader>
<Items>
<ext:Button ID="btnLoadProperties" runat="server" Text="Load ButtonGroup" Hidden="true">
<Listeners>
<Click Handler="this.up('toolbar').load();" />
</Listeners>
</ext:Button>
<ext:ButtonGroup
runat="server"
Title="Clipboard"
HeaderPosition="Bottom"
Columns="2">
<Items>
<ext:SplitButton runat="server" Text="Menu Button" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Menu Button 1" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:SplitButton runat="server" Text="Cut" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Cut Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Text="Copy" IconCls="add16" />
<ext:Button runat="server" Text="Paste" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Paste Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Format" IconCls="add16" />
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup
runat="server"
Title="Other Actions"
HeaderPosition="Bottom"
Columns="2">
<Items>
<ext:SplitButton runat="server" Text="Menu Button" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Menu Button 1" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:SplitButton runat="server" Text="Cut" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Cut Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Text="Copy" IconCls="add16" />
<ext:Button runat="server" Text="Paste" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Paste Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Format" IconCls="add16" />
</Items>
</ext:ButtonGroup>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel
runat="server"
Title="Test"
Icon="Application"
Region="Center"
Margins="0">
<Content>
<div id="header" style="border:1px silver solid;margin:20px;padding:8px;height:140px">
<div class="myDiv" id="item1" onclick="App.btnLoadProperties.fireEvent('click');" style="border: 1px solid black; width: 120px">Item 1</div>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

And here for the Sample.ascx User Control:


<%@ Control Language="C#" %>

<ext:ButtonGroup
runat="server"
Title="Clipboard"
HeaderPosition="Bottom"
Columns="2">
<Items>
<ext:SplitButton runat="server" Text="Menu Button" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Menu Button 1" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:SplitButton runat="server" Text="Cut" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Cut Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Text="Copy" IconCls="add16" />
<ext:Button runat="server" Text="Paste" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Paste Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Format" IconCls="add16" />
</Items>
</ext:ButtonGroup>


Regards.

Daniil
Jun 08, 2012, 9:17 AM
When clicking multiple times over Item1 div

You should limit it.

I can suggest the following solution.

1. Set up

<Listeners>
<AfterRender Handler="window.onDivClick = Ext.Function.createBuffered(this.load, 100, this);" />
</Listeners>
for the Toolbar.

2. Set up

onclick="onDivClick();"
for the div.

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Function-method-createBuffered

softmachine2011
Jun 08, 2012, 10:24 AM
Hi again,

Must we then remove the hidden button?

softmachine2011
Jun 08, 2012, 11:07 AM
Ok,

As we create divs dynamically, we call createBuffered function with their corresponding parameters and then we assign this delegate to the onclick event.

More or less in this way:


var divClick = Ext.Function.createBuffered(loadProperties, 200, this, [arg1, arg2]);
divTag.onclick = divClick;

Thanks.

Daniil
Jun 08, 2012, 11:14 AM
Must we then remove the hidden button?

Yes, if you don't use it in some other way.



As we create divs dynamically, we call createBuffered function with their corresponding parameters and then we assign this delegate to the onclick event.

More or less in this way:


var divClick = Ext.Function.createBuffered(loadProperties, 200, this, [arg1, arg2]);
divTag.onclick = divClick;


Please clarify is that the issue or you have just shared a solution for your case?

softmachine2011
Jun 08, 2012, 11:48 AM
Hi,

This was just our solution.

We set 200 as buffer delay, because 100 was not enough to aviod the error. Finally we don't remove the hidden button because we call it inside loadProperties function, and this method is also called from some other sides.

Thanks again.