[CLOSED] Problem updating a form with a RadioGroup

  1. #1

    [CLOSED] Problem updating a form with a RadioGroup

    Hi,

    My question is related to http://forums.ext.net/showthread.php...g-a-form/page2. What's the right way of committing changes to a form with no record attached containing a RadioGroup control?
    I've tried the following test case but it doesn't seem to be working. The values aren't updated for the RadioGroup control and its behavior overall doesn't look consistent with other form fields. For example, the call to display the form's values doesn't even include the RadioGroup fields if they aren't set. Am I missing some configuration settings?

    <%@ Page 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)
            {
    
            }
        }
    </script>
    <!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 id="Head1" runat="server">
        <title>FormPanel - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Width="800" Height="600">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <Center>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="Form Panel" Padding="5" ButtonAlign="Right"
                            TrackResetOnLoad="true">
                            <Items>
                                <ext:TextField ID="CompanyField" DataIndex="company" runat="server" FieldLabel="Company"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="PriceField" DataIndex="price" runat="server" FieldLabel="Price"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="ChangeField" DataIndex="change" runat="server" FieldLabel="Change"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="PctChangeField" DataIndex="pctChange" runat="server" FieldLabel="Change (%)"
                                    AnchorHorizontal="95%" />
                                <ext:DateField ID="lastChange" runat="server" FieldLabel="Last Updated" AnchorHorizontal="95%" />
                                <ext:RadioGroup ID="RadioGroup1" runat="server" FieldLabel="My Options" AnchorHorizontal="95%">
                                    <Items>
                                        <ext:Radio ID="Radio1" runat="server" BoxLabel="Option 1"
                                            InputValue="Option1">
                                        </ext:Radio>
                                        <ext:Radio ID="Radio2" runat="server" BoxLabel="Option 2" InputValue="Option2">
                                        </ext:Radio>
                                    </Items>
                                </ext:RadioGroup>
                            </Items>
                            <Buttons>
                                <ext:Button runat="server" Text="Save Form">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getFieldValues());" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Text="Reset Fields">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="Button2" runat="server" Text="Get Values...">
                                    <Menu>
                                        <ext:Menu ID="Menu1" runat="server">
                                            <Items>
                                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Object">
                                                    <Listeners>
                                                        <Click Handler="alert(Ext.encode(#{FormPanel1}.getForm().getValues()));" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                <ext:MenuItem ID="MenuItem2" runat="server" Text="String">
                                                    <Listeners>
                                                        <Click Handler="alert(#{FormPanel1}.getForm().getValues(true));" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Apr 24, 2013 at 1:02 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    Yes, I agree it is inconsistency than the following resets a RadioGroup.
    RadioGroup1.setValue(RadioGroup1.getValue())
    For example, the call to display the form's values doesn't even include the RadioGroup fields if they aren't set.
    It is the behavior of a Radio. If a Radio is not checked, it is not submitted at all. A RadioGroup behaves the same here.

    Generally, yes, a RadioGroup is a specific control.
  3. #3
    Hi Daniil,

    Would you mind clarifying a bit? How can I make sure that RadioGroup assumes the value selected so it doesn't get reset? The sample below doesn't work.

    <%@ Page 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)
            {
    
            }
        }
    </script>
    <!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 id="Head1" runat="server">
        <title>FormPanel - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Width="800" Height="600">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <Center>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="Form Panel" Padding="5" ButtonAlign="Right"
                            TrackResetOnLoad="true">
                            <Items>
                                <ext:TextField ID="CompanyField" DataIndex="company" runat="server" FieldLabel="Company"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="PriceField" DataIndex="price" runat="server" FieldLabel="Price"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="ChangeField" DataIndex="change" runat="server" FieldLabel="Change"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="PctChangeField" DataIndex="pctChange" runat="server" FieldLabel="Change (%)"
                                    AnchorHorizontal="95%" />
                                <ext:DateField ID="lastChange" runat="server" FieldLabel="Last Updated" AnchorHorizontal="95%" />
                                <ext:RadioGroup ID="RadioGroup1" runat="server" FieldLabel="My Options" AnchorHorizontal="95%">
                                    <Items>
                                        <ext:Radio ID="Radio1" runat="server" BoxLabel="Option 1"
                                            InputValue="Option1">
                                        </ext:Radio>
                                        <ext:Radio ID="Radio2" runat="server" BoxLabel="Option 2" InputValue="Option2">
                                        </ext:Radio>
                                    </Items>
                                </ext:RadioGroup>
                            </Items>
                            <Buttons>
                                <ext:Button runat="server" Text="Save Form">
                                    <Listeners>
                                        <Click Handler="RadioGroup1.setValue(RadioGroup1.getValue());#{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getFieldValues());" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Text="Reset Fields">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="Button2" runat="server" Text="Get Values...">
                                    <Menu>
                                        <ext:Menu ID="Menu1" runat="server">
                                            <Items>
                                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Object">
                                                    <Listeners>
                                                        <Click Handler="alert(Ext.encode(#{FormPanel1}.getForm().getValues()));" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                <ext:MenuItem ID="MenuItem2" runat="server" Text="String">
                                                    <Listeners>
                                                        <Click Handler="alert(#{FormPanel1}.getForm().getValues(true));" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  4. #4
    Well, I mean that yes, a RadioGroup behaves inconsistency in Ext.NET v1.

    The following clears a field, but I would expect it doesn't.
    RadioGroup1.setValue(RadioGroup1.getValue())
    I didn't suggest that line above as a workaround.

    As a workaround please try the following.
    var value = RadioGroup1.getValue();
    
    FormPanel1.getForm().setValues(FormPanel1.getForm().getFieldValues());
    RadioGroup1.setValue(value, true)
  5. #5
    Thanks Daniil!

    With this workaround, the RadioGroup value at least appears to stay after saving. However, it's not exactly persisted and resetting the form wipes it out completely. Could you suggest anything to make it behave like a normal form control?
  6. #6
    Quote Originally Posted by vadym.f View Post
    However, it's not exactly persisted and resetting the form wipes it out completely.
    Could you, please, clarify?
  7. #7
    Quote Originally Posted by Daniil View Post
    Could you, please, clarify?
    Steps to reproduce:

    1. Type in something in the "Company" text field
    2. Select one of the Radio options
    3. Press the "Save Form" buttton
    4. Press "Reset Fields" button
    5. Observe that the "Company" field text stays but the Radio selected value has not been persisted


    <%@ Page 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)
            {
    
            }
        }
    </script>
    <!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 id="Head1" runat="server">
        <title>FormPanel - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Width="800" Height="600">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <Center>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="Form Panel" Padding="5" ButtonAlign="Right"
                            TrackResetOnLoad="true">
                            <Items>
                                <ext:TextField ID="CompanyField" DataIndex="company" runat="server" FieldLabel="Company"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="PriceField" DataIndex="price" runat="server" FieldLabel="Price"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="ChangeField" DataIndex="change" runat="server" FieldLabel="Change"
                                    AnchorHorizontal="95%" />
                                <ext:TextField ID="PctChangeField" DataIndex="pctChange" runat="server" FieldLabel="Change (%)"
                                    AnchorHorizontal="95%" />
                                <ext:DateField ID="lastChange" runat="server" FieldLabel="Last Updated" AnchorHorizontal="95%" />
                                <ext:RadioGroup ID="RadioGroup1" runat="server" FieldLabel="My Options" AnchorHorizontal="95%">
                                    <Items>
                                        <ext:Radio ID="Radio1" runat="server" BoxLabel="Option 1"
                                            InputValue="Option1">
                                        </ext:Radio>
                                        <ext:Radio ID="Radio2" runat="server" BoxLabel="Option 2" InputValue="Option2">
                                        </ext:Radio>
                                    </Items>
                                </ext:RadioGroup>
                            </Items>
                            <Buttons>
                                <ext:Button runat="server" Text="Save Form">
                                    <Listeners>
                                        <Click Handler="var value = RadioGroup1.getValue();
                                        #{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getFieldValues());
                                        RadioGroup1.setValue(value, true);" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Text="Reset Fields">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="Button2" runat="server" Text="Get Values...">
                                    <Menu>
                                        <ext:Menu ID="Menu1" runat="server">
                                            <Items>
                                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Object">
                                                    <Listeners>
                                                        <Click Handler="alert(Ext.encode(#{FormPanel1}.getForm().getValues()));" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                <ext:MenuItem ID="MenuItem2" runat="server" Text="String">
                                                    <Listeners>
                                                        <Click Handler="alert(#{FormPanel1}.getForm().getValues(true));" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  8. #8
    Thank you for the example and steps.

    Well, yes, a RadioGroup behaves totally inconsistency.

    I found this old bug.
    http://www.sencha.com/forum/showthread.php?114565

    I think there is no chance to get it fixed in ExtJS 3. I have looked into the RadioGroup's sources and there is a bit of the hell. I can't see any good without revamping everything. Unfortunately, it is not an option for Ext.NET v1.

    I can suggest the following workaround.

    Workaround
    <ext:Button runat="server" Text="Save Form">
        <Listeners>
            <Click Handler="var value = RadioGroup1.getValue();
                            #{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getFieldValues());
                            RadioGroup1.setValue(value, true);
                            RadioGroup1.originalValue = value;" />
        </Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="Reset Fields">
        <Listeners>
            <Click Handler="#{FormPanel1}.getForm().reset();
                            if (RadioGroup1.originalValue) {
                                RadioGroup1.setValue(RadioGroup1.originalValue, true);
                            }" />
        </Listeners>
    </ext:Button>
    It is ugly, but should work. Sorry for the inconvenience.
  9. #9
    Thank you very much Daniil for the working solution! As long as it does the trick, I'm not very picky about its beauty :) Please close this thread down.

Similar Threads

  1. Replies: 4
    Last Post: Oct 25, 2012, 2:02 PM
  2. [CLOSED] Get value RadioGroup Request Form
    By romeu in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 25, 2012, 11:20 AM
  3. Replies: 2
    Last Post: Aug 29, 2011, 3:53 PM
  4. Replies: 1
    Last Post: Jul 19, 2010, 6:36 PM
  5. Replies: 0
    Last Post: Jun 08, 2009, 12:04 PM

Tags for this Thread

Posting Permissions