What's New?

Ext.getCmp() not working in UserControl

Page 1 of 2 12 LastLast
  1. #1
    Oct 09, 2012, 3:12 PM

    Ext.getCmp() not working in UserControl

    Hello,

    i load a UserControl from my page (aspx) with <ext:UserControlLoader like this :

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {        
    }  
    
</script>
<head id="Head1" runat="server">
    <title>Test</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="p_center" Header="true" Title="Center" runat="server" Region="Center">
                <Items>
                    <ext:Label Text="Ich bin die Page" runat="server">
                    </ext:Label>
                    <ext:Panel ID="p_contributionlist" runat="server" Border="false" Layout="FormLayout"
                        AutoScroll="true" Anchor="98% 90%">
                        <Items>
                            <ext:UserControlLoader ID="uc_test" runat="server" RegisterAllResources="true" Path="/Views/Contribution/uc_ContText.ascx">
                            </ext:UserControlLoader>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
            <ext:Panel ID="p_east" runat="server" Header="true" Title="East" Region="East" Width="200">
                <Items>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Now i have a javascript function in the "UserControl". But the "Ext.getCmp()" is
    not working because the object "panel" is undefined !!

    UserControl :

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="~/Views/Contribution/uc_ContText.ascx.cs"  %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {      
    }

</script>
<script type="text/javascript">
    function Test() {
        var panel = Ext.getCmp('p_parent');        
    }
    
</script>
<ext:Panel runat="server" Height="200" ID="p_parent">
    <Items>
        <ext:Button ID="Button1" runat="server">
            <Listeners>
                <Click Fn="Test" />
            </Listeners>
        </ext:Button>
    </Items>
</ext:Panel>

    Can everyone help me ? Thanks !!
  2. #2
    Oct 10, 2012, 12:24 PM
    If you have single instance of that user control then you can set IDMode="Static" for 'p_parent' Panel
    On the client side, ClientID is used instead ID but ClientID doesn't equal ID if a widget inside INamingContainer (user control implements INamingContainer)
  3. #3
    Oct 10, 2012, 1:33 PM
    Thanks ! for the single instance it works fine :)

    but what is the solution for many instances ??

    Page Example :
    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 3; i++)
        {
            var ucl1 = new UserControlLoader();

            ucl1.Path = "/Views/Contribution/uc_ContText.ascx";                
            p_contributionlist.Items.Add(ucl1);
        }        
    }
    Last edited by ontiv; Oct 11, 2012 at 12:26 PM.
  4. #4
    Oct 15, 2012, 9:09 AM
    No idea anyone ?
  5. #5
    Oct 15, 2012, 10:30 AM
    First, you cannot use named js function is user control which has several instances on the page because js function from last instance will overwrite functions from other instances

    Solution: use XScript with #{} syntax to resolve ID
    See http://forums.ext.net/showthread.php...ll=1#post55918
  6. #6
    Oct 15, 2012, 2:58 PM
    Attached Thumbnails Click image for larger version.  Name: ext.net bug.png  Views: 203  Size: 38.5 KB  ID: 4916  
  7. #7
    Oct 15, 2012, 3:14 PM
    Because #{Button1}_SetTest is not defined yet when Button is created on the client side
    You need to move XScript out the container or use Handler instead Fn
    <Click Handler="#{Button1}_SetTest();" />
  8. #8
    Oct 15, 2012, 4:02 PM
    ok, I understand... Thanks !

    but if I move XScript out the container I get the error :

    Control with type 'Ext.Net.XScript' cannot be handled by layout

    and if I use the handler like your example my function was not found...
  9. #9
    Oct 15, 2012, 10:12 PM
    I would recommend not using this technique of creating uniquely named Javascript functions within a UserControl. Please see the following post:

    http://forums.ext.net/showthread.php...ll=1#post93027
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  10. #10
    Oct 15, 2012, 10:25 PM
    To get your sample working above, just remove the "var ". Here's a full .ascx sample:

    Example

    <%@ Control Language="C#" %> 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<ext:Panel runat="server" Title="Child" Layout="FitLayout">
    <Items>
        <ext:Button ID="Button1" Text="Submit" runat="server">
            <Listeners>
                <Click Fn="#{Button1}_SetTest" />
            </Listeners>
        </ext:Button>
    </Items>
    <HtmlBin>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                #{Button1}_SetTest = function () {
                    alert("OK"); 
                };  
            </script>
        </ext:XScript>
    </HtmlBin>
</ext:Panel>
    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] UserControl Overview Example not Working
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 12, 2012, 6:13 PM
  2. [CLOSED] DirectMethod: UserControl in a Layer not working
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 20, 2012, 3:12 AM
  3. [CLOSED] Ext.Net.X.GetCmp - how to call in parent?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 25, 2011, 5:55 AM
  4. [CLOSED] Custom Search with X.GetCmp
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Feb 15, 2011, 5:46 PM
  5. [CLOSED] Finding a menu with Ext.getCmp()
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jun 22, 2009, 4:40 AM

Posting Permissions