PDA

View Full Version : [CLOSED] Calling UserControl Methods from parent form (Javascript)



cwolcott
Sep 27, 2012, 6:43 PM
I have added code to help test my forms (a lot of fields) by filling out default values. My form has fields on the main forms (aspx) and 2 user controls (ascx). Daniil originally helped by answering the question "How can I Call UserControl Methods from parent form (http://forums.ext.net/showthread.php?21174-CLOSED-Calling-UserControl-Methods-from-parent-form).

After following his suggestion and implementing everything, I realized I really wanted to do this from the client side (javascript) instead of the server side. Is there a way to call a javascript funtion on a user control from the main page?

Example Page


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script type="text/javascript">
var FilloutTesting = function () {
TextArea.setValue("Hello!");

//How to call other usercontrols to fillout their testing values.
}
</script>

<!DOCTYPE html>
<html>

<head runat="server">
<title>Ext.NET v2 Example</title>
</head>

<body>
<ext:ResourceManager runat="server" />
<ext:UserControlLoader ID="UserControlLoader1" runat="server" Path="TestUC.ascx" />
<ext:TextArea runat="server" ID="TextArea" EmptyText="Please Fill out ..." />
<ext:Button runat="server" Text="Apply defaults">
<Listener>
<Click Fn="FilloutTesting >
</Listener>
</body>
</html>



Example User Control


<%@ Control Language="C#" ClassName="TestUC" %>
<script type="text/javascript">
var FilloutTesting = function () {
Label1.text = "Hello!";
}
</script>

<ext:Label ID="Label1" runat="server" />

Daniil
Sep 28, 2012, 5:18 AM
Hi Chris,

UserControlLoader retrieves Ext.NET components from a user control. It doesn't render scripts. Please use HtmlBin.

To avoid overriding you can share a function in some namespace.

Example Page

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var applyDefaults = function () {
App.TextArea1.setValue("Hello from Page!");
TestUC1.applyDefaults();
TestUC2.applyDefaults();
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:UserControlLoader runat="server" Path="TestUC1.ascx" UserControlID="TestUC1" />
<ext:UserControlLoader runat="server" Path="TestUC2.ascx" UserControlID="TestUC2" />

<ext:TextArea ID="TextArea1" runat="server" EmptyText="Please Fill out ..." />

<ext:Button runat="server" Text="Apply defaults">
<Listeners>
<Click Fn="applyDefaults" />
</Listeners>
</ext:Button>
</body>
</html>


Example TestUC1

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

<ext:Container runat="server" Hidden="true">
<HtmlBin>
<ext:XScript runat="server">
<script type="text/javascript">
var TestUC1 = {
applyDefaults : function () {
#{Label1}.setText("Hello from TestUC1!");
}
};
</script>
</ext:XScript>
</HtmlBin>
</ext:Container>

<ext:Label ID="Label1" runat="server" />


Example TestUC2

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

<ext:Container runat="server" Hidden="true">
<HtmlBin>
<ext:XScript runat="server">
<script type="text/javascript">
var TestUC2 = {
applyDefaults : function () {
#{Label1}.setText("Hello from TestUC2!");
}
};
</script>
</ext:XScript>
</HtmlBin>
</ext:Container>

<ext:Label ID="Label1" runat="server" />


Please note if you will use the same user control twice, you should avoid JavaScript overriding. Here is the discussion.
http://forums.ext.net/showthread.php?13522

cwolcott
Sep 28, 2012, 3:31 PM
Works like a champ. Please close the thread.