[CLOSED] Referencing Controls in a UserControls - two UCs on same page

  1. #1

    [CLOSED] Referencing Controls in a UserControls - two UCs on same page

    I know I have touched on this subject several times, and I did have a look through my previous posts but I couldnt find a question specifically about this so here goes:

    I have one Page and on that page I place two UserControls of the same type/class, MyUserControl.

    In MyUserControl I have lets say three ComboBoxes, C1, C2 and C3.

    When I select a value in C1, I want to shift focus to C2 in the same UserControl (I know that in reality there is no such thing as a UserControl when the page is rendered). Setting that focus works fine when there is only one instance of the UserControl on the Page.

    However, when I have two (or more) UserControls on the same Page, the focus is not shifted to C2 in the same UserControl, but to C2 in the last UserControl. This is because the ClientId (or something like that) is "overwritten" by the last Control somehow.

    The question is: how do I make it focus C2 in the same UserControl?

    Here is the JS function that shifts the Focus:

    <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript">
          
            function checkValue() {
                var id = this.getValue();
                if (id > 1)
                     #{C2}.focus();
            }
       </script>
    </ext:XScript>
    And the ComboBoxes (in the UserControl):
    <ext:ComboBox runat="server" EmptyText="Test1" Icon="ShapeHandles" AutoWidth="true"
        ID="C1"
        DisplayField="Name"
        ValueField="Id" 
        TypeAhead = "false" HideTrigger = "false" EnableKeyEvents = "true" MinChars = "2" LoadingText="Searching..." ForceSelection="false">
        <Store>
            <ext:Store ID="MyStore" runat="server" AutoLoad="false" OnRefreshData="MyStore_Refresh">
                <Proxy>
                    <ext:PageProxy />
                </Proxy>
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Id" />
                            <ext:RecordField Name="Name" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <Listeners>
            <Select Fn="checkValue" />
        </Listeners>
    </ext:ComboBox>
    
    
    <ext:ComboBox runat="server" EmptyText="Test2" Icon="ShapeHandles" AutoWidth="true"
        ID="C2"
        DisplayField="Name"
        ValueField="Id" 
        TypeAhead = "false" HideTrigger = "false" EnableKeyEvents = "true" MinChars = "2" LoadingText="Searching..." ForceSelection="false">
        <Store>
            <ext:Store ID="MyStore2" runat="server" AutoLoad="false" OnRefreshData="MyStore2_Refresh">
                <Proxy>
                    <ext:PageProxy />
                </Proxy>
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Id2" />
                            <ext:RecordField Name="Name2" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
    </ext:ComboBox>
    Last edited by Daniil; May 03, 2011 at 9:52 AM. Reason: [CLOSED]
  2. #2
    Hi wagger,

    Yes, it's a problem. #{} feature can't suite your needs at this moment. We will consider how to get this feature smarter, but not sure it's possible.

    For now I can suggest the following solution.

    Example .aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/TestUserControl.ascx" TagPrefix="uc" TagName="TestUserControl" %>
    
    <!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">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <uc:TestUserControl runat="server" />
        <uc:TestUserControl runat="server" />
        </form>
    </body>
    </html>
    Example .ascx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "1", "item1" },
                    new object[] { "2", "item2" },
                    new object[] { "3", "item3" }
                };
                this.Store1.DataBind();
            }
        }
    </script>
    
    <ext:XScript runat="server">
        <script type="text/javascript">
            var checkValue = function () {
                var v = this.getValue();
                if (v) {
                    var userControlId = this.id.substr(0, this.id.indexOf("_")),
                        comboId = userControlId + "_" + "ComboBox2";
                    Ext.getCmp(comboId).focus(false, 100);
                }
            } 
        </script>
    </ext:XScript>
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="value" />
                    <ext:RecordField Name="text" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store1">
        <Listeners>
            <Select Fn="checkValue" />
        </Listeners>
    </ext:ComboBox>
    <ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store1" />
    Please note that defining a combo's id can be more difficult if, for example, one user control is wrapped in another one. In this case a combo's id will look something like "UserControlID1_UserControlID2_ComboBoxClientI D"
    Last edited by Daniil; May 03, 2011 at 9:21 AM.
  3. #3
    Oh, I was wrong, there is another problem, #{} works fine.

    The checkValue function of the first user control is overrode from the same function of the second user control, because these functions have the same names.

    The possible solution is here.
    <ext:XScript runat="server">
        <script type="text/javascript">
            var #{Combobox1}_checkValue = function () {
                var v = this.getValue();
                if (v) {
                    #{ComboBox2}.focus(false, 100);
                }
            }; 
        </script>
    </ext:XScript>
    <Select Fn="#{Combobox1}_checkValue" />
  4. #4
    Thanks, that helped. Now it works as expected. Good trick to know =)
  5. #5
    The code above will work, although I would suggest avoiding using this technique of creating uniquely names JavaScript functions within a UserControl. You're adding unnecessarily to the page weight and there are more efficient ways to handle this problem.

    If the function logic is minimal, I'd move the code directly into the Listener .Handler property.

    If the function logic is not minimal, then write a generic instance of the function and place in a global.js file or directly in the parent Page.

    Hope this helps.
    Last edited by geoffrey.mcgill; Oct 15, 2012 at 9:07 PM.
    Geoffrey McGill
    Founder
  6. #6
    Another thread related to this subject

    http://forums.ext.net/showthread.php...in-UserControl
    Geoffrey McGill
    Founder
  7. #7
    One more thread related to the topic.
    http://forums.ext.net/showthread.php?25307

Similar Threads

  1. [CLOSED] Referencing page controls in JavaScript objects
    By PLoch in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 16, 2011, 5:59 PM
  2. Replies: 14
    Last Post: Apr 12, 2011, 2:49 PM
  3. Replies: 4
    Last Post: Apr 04, 2011, 8:54 AM
  4. [CLOSED] [1.0] Referencing User Controls using #{}
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 15, 2010, 10:59 AM

Tags for this Thread

Posting Permissions