[CLOSED] RadioGroup - isDirty evaluation

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [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, 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:
    Click image for larger version. 

Name:	img1.png 
Views:	78 
Size:	24.9 KB 
ID:	25527
    Click image for larger version. 

Name:	img2.png 
Views:	62 
Size:	13.7 KB 
ID:	25528

    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.

Similar Threads

  1. [CLOSED] Problem with isDirty
    By infonext in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 27, 2014, 7:16 PM
  2. [CLOSED] Regex evaluation freezes the browser
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 05, 2013, 12:26 PM
  3. Replies: 2
    Last Post: Oct 10, 2012, 6:27 PM
  4. isDirty and textField
    By houdatahbaz in forum 1.x Help
    Replies: 4
    Last Post: Sep 01, 2011, 10:23 PM
  5. form isDirty
    By [WP]joju in forum 1.x Help
    Replies: 5
    Last Post: Jun 22, 2010, 10:53 PM

Posting Permissions