[CLOSED] Undefined control after migration from 3.X to 4.2

  1. #1

    [CLOSED] Undefined control after migration from 3.X to 4.2

    Hello, following example is working fine in Ext Net 3.X and not in 4.2 (App.df2.hide() is undefined).

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelectEvent.aspx.cs" Inherits="Samples.Web.ExtNet4.Forum.SelectEvent" %>
    
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager runat="server" />
                <script runat="server">
                    protected void Page_Load(object sender, EventArgs e)
                    {
                        var masterData = new List<ModelBase>()
                        {
                            new ModelBase() { Code="1", Description="Show DF1" },
                            new ModelBase() { Code="2", Description="Show DF2" },
                        };
    
    
                        masterStore.DataSource = masterData;
                        masterStore.DataBind();
                        masterSelectBox.Select(masterData.First().Code);
                        masterSelectBox.SelectedItem.Value = masterData.First().Code.ToString();
                        masterSelectBox.FireSelectOnLoad = true;
                    }
    
    
                    public class ModelBase
                    {
                        public string Code { get; set; }
                        public string Description { get; set; }
                    }
                </script>
    
    
                <script>
                    var masterSelectBox_Select = function () {
                        App.df1.hide();
                        App.df2.hide();
                        if (App.masterSelectBox.getValue() == 1)
                            App.df1.show();
                        else
                            App.df2.show();
                    }
                </script>
    
    
                <ext:Panel runat="server">
                    <Items>
                        <ext:DateField runat="server" ID="df1" FieldLabel="DF1" />
                        <ext:SelectBox runat="server" ID="masterSelectBox" IDMode="Static"
                            DisplayField="Description" ValueField="Code"
                            ForceSelection="true" FireChangeOnLoad="true">
                            <Listeners>
                                <Select Handler="masterSelectBox_Select();" />
                            </Listeners>
                            <Store>
                                <ext:Store runat="server" ID="masterStore" ModelName="CommonComboModel" />
                            </Store>
                        </ext:SelectBox>
                        <ext:DateField runat="server" ID="df2" FieldLabel="DF2" />
                    </Items>
                    <Bin>
                        <ext:Model runat="server" IDProperty="Id" ID="CommonComboModel" Name="CommonComboModel">
                            <Fields>
                                <ext:ModelField Name="Code" />
                                <ext:ModelField Name="Description" SortType="AsUCString" />
                            </Fields>
                        </ext:Model>
                    </Bin>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    Thank you,
    Riccardo.
    Last edited by fabricio.murta; Feb 14, 2017 at 10:16 AM.
  2. #2
    Hello Riccardo!

    You are triggering a race condition the way you are running the event. The selection event first happens on the masterSelectBox field before df2 is rendered, thus not available in the App. namespace.

    A minimal required change on your script logic would be to comment line 29 of your code (do not fire select on load) or, check for the field availability on select before trying to fiddle with it:

    <script>
        var masterSelectBox_Select = function () {
            App.df1.hide();
            if (App.df2) {
                App.df2.hide();
            }
            if (App.masterSelectBox.getValue() == 1)
                App.df1.show();
            else if (App.df2)
                App.df2.show();
        }
    </script>
    Alternatives would be:
    - call the event once the page is ready with Ext.onReady(masterSelectBox_Select)
    - load the select box last during the page load (ashx, build from code-behind)

    So, pick the choice that best works for you.

    The reason it didn't happen on v3 was just because the specific race condition didn't happen to fire the event before the component was rendered and instantiated to the client, but it was expected to have such problems, and that's one of the reasons the FireSelectOnLoad setting exists.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you Fabricio for the explanation. I'll chose the 'Ext.OnReady' option.
  4. #4
    Glad it was of help! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Migration from 1.x to 2.5.3
    By srikanthn27 in forum 2.x Help
    Replies: 1
    Last Post: Mar 13, 2015, 8:28 AM
  2. Migration from ext 1.0 to 2.0
    By speedstepmem4 in forum 1.x Help
    Replies: 1
    Last Post: Jun 11, 2013, 9:14 AM
  3. Replies: 1
    Last Post: May 15, 2013, 11:03 PM
  4. Replies: 2
    Last Post: May 10, 2011, 6:32 PM
  5. [CLOSED] Problem: getting control undefined
    By BGeorge in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 08, 2009, 6:41 PM

Tags for this Thread

Posting Permissions