[CLOSED] Referencing Controls in a UserControls

[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:

Code:

<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):

Code:

<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>

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

Code:

<%@ 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

Code:

<%@ 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"

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.

Code:

<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" />

Thanks, that helped. Now it works as expected. Good trick to know =)

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.

Another thread related to this subject

http://forums.ext.net/showthread.php...in-UserControl

One more thread related to the topic.
http://forums.ext.net/showthread.php?25307