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

[wagger]

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>