PDA

View Full Version : [CLOSED] Undefined control after migration from 3.X to 4.2



xeo4.it
Feb 13, 2017, 4:43 PM
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.

fabricio.murta
Feb 14, 2017, 2:19 AM
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!

xeo4.it
Feb 14, 2017, 9:31 AM
Thank you Fabricio for the explanation. I'll chose the 'Ext.OnReady' option.

fabricio.murta
Feb 14, 2017, 11:16 AM
Glad it was of help! Thanks for the feedback!