May 06, 2021, 11:54 AM
[CLOSED] RadioGroup - isDirty evaluation
Hello support team,
please use the following test case, open the windows and close them without any change. When only one window is open,
I found that the problem lies in the assigned of the
Please can you take a look and check what's wrong?
Thank you for your help.
Ext JS 7.1.0.46 / Ext.NET 5.1.0
Kind regards
Dan
please use the following test case, open the windows and close them without any change. When only one window is open,
isDirty
is evaluated as expected. However, if the second (and each subsequent) window is open, only the first open window evaluates isDirty
correctly, all other windows are always Dirty.@model TestCases.Models.PointerModel
@using Ext.Net;
@using Ext.Net.MVC;
@{
ViewBag.Title = "Radio Group";
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Test Case</title>
<style>
</style>
<script type="text/javascript">
var createWindow = function (title, x, y) {
return new Ext.window.Window({
renderTo: Ext.getBody(),
autoShow: true,
height: 250,
width: 500,
x,
y,
items: [{
border: false,
xtype: "form",
items: [{
xtype: "fieldset",
items: [{
xtype: "textfield",
fieldLabel: "Pointer",
hideLabel: true,
name: "Pointer",
validateOnFocusLeave: true
}, {
xtype: "radiogroup",
items: [{
xtype: "radiofield",
name: "PointerForm",
validateOnFocusLeave: true,
value: true,
boxLabel: "Default",
inputValue: "Default"
}, {
xtype: "radiofield",
name: "PointerForm",
validateOnFocusLeave: true,
value: false,
boxLabel: "Capitalized",
inputValue: "Capitalized"
}, {
xtype: "radiofield",
name: "PointerForm",
validateOnFocusLeave: true,
value: false,
boxLabel: "Abbreviated",
inputValue: "Abbreviated"
}, {
xtype: "radiofield",
name: "PointerForm",
validateOnFocusLeave: true,
value: false,
boxLabel: "Alternate",
inputValue: "Alternate"
}],
fieldLabel: "Return form"
}],
layout: {
type: "vbox",
align: "stretch"
},
title: "Pointer"
}],
bodyPadding: 10
}],
layout: "fit",
title,
listeners: {
close: {
fn: function (item) {
var formPanel = Ext.ComponentQuery.query('form', this)[0];
console.log(title.toUpperCase());
showValues(formPanel);
}
}
}
})
}
var showValues = function (formPanel) {
var isDirty = false;
formPanel.getForm().getFields().each(function (f) {
if (f.xtype === "radiogroup" || f.xtype === "radiofield") {
if (f.isDirty()) isDirty = true;
console.log("DETAIL_DIRTY", f.name + ", IsDirty: " + f.isDirty());
console.log("ORIG", f.originalValue);
console.log("VALUE", f.getValue());
}
});
if (isDirty) Ext.Msg.alert("Form Evaluation", "DIRTY");
}
</script>
</head>
<body>
@(X.ResourceManager())
@X.DisplayField().ID("version").ReadOnly(true).Margin(10).Width(200)
@X.Button().Text("Open Window 1").Margin(10).OnClientClick("createWindow('Window 1', 200, 100)")
@X.Button().Text("Open Window 2").Margin(10).OnClientClick("createWindow('Window 2', 400, 250)")
</body>
</html>
<script type="text/javascript">
Ext.onReady(function () {
Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
});
</script>
If you take a closer look at the isDirty()
function, you'll notice the weird getValue()
result:I found that the problem lies in the assigned of the
name
config parameter: PointerForm. The createWindow
function is an exact copy of the code generated from this snippet used in the real application: public enum PointerForm
{
Default = 760001,
Capitalized = 760002,
Abbreviated = 760003,
Alternate = 760004
}
public class PointerModel
{
public string Pointer { get; set; }
public PointerForm PointerForm { get; set; } = PointerForm.Default;
}
@(X.Window().Title("Window1").Width(500).Height(250).Layout(LayoutType.Fit)
.Listeners(l => l.Close.Handler = "var formPanel = Ext.ComponentQuery.query('form', this)[0]; console.log('WINDOW 1'); showValues(formPanel)")
.Items(
X.FormPanel().Border(false).BodyPadding(10)
.Items(
X.FieldSet().Title("Pointer")
.LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
.Items(
X.TextFieldFor(m => m.Pointer, false).HideLabel(true),
X.RadioGroupFor(m => m.PointerForm, new List<Radio.Config> {
new Radio.Config{ BoxLabel = "Default", InputValue = TestCases.Models.PointerForm.Default.ToString() },
new Radio.Config{ BoxLabel = "Capitalized", InputValue = TestCases.Models.PointerForm.Capitalized.ToString() },
new Radio.Config{ BoxLabel = "Abbreviated", InputValue = TestCases.Models.PointerForm.Abbreviated.ToString() },
new Radio.Config{ BoxLabel = "Alternate", InputValue = TestCases.Models.PointerForm.Alternate.ToString() }
})
.GroupName("PointerForm")
.FieldLabel("Return form")
)
)
)
)
If you remove the name
assignment or if you assign a unique name, it works as expected. Since this is an assignment made behind the scenes, I think this is an error.Please can you take a look and check what's wrong?
Thank you for your help.
Ext JS 7.1.0.46 / Ext.NET 5.1.0
Kind regards
Dan
Last edited by fabricio.murta; May 14, 2021 at 6:28 PM.