Ext.getCmp() not working in UserControl

Page 1 of 2 12 LastLast
  1. #1

    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
    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
    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 11:26 AM.
  4. #4
    No idea anyone ?
  5. #5
    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
    Attached Thumbnails Click image for larger version. 

Name:	ext.net bug.png 
Views:	208 
Size:	38.5 KB 
ID:	4916  
  7. #7
    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
    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
    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
  10. #10
    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
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, 5: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, 2: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, 4: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, 4: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, 3:40 AM

Posting Permissions