Problem resetting a form

Page 2 of 2 FirstFirst 12
  1. #11
    I was wrong about suggesting the getValues method.

    Please use the getFieldValues one within the Success handler, i.e.
    form.setValues(form.getFieldValues());
    instead of
    form.setValues(form.getValues());
    The problem is the fact that the getValues method gets values from input HTML elements, for example, "Colorado", then the setValues method assigns that value to the ComboBox and it doesn't became its selected item, it's just a text.
  2. #12
    Quote Originally Posted by Daniil View Post
    I was wrong about suggesting the getValues method.

    Please use the getFieldValues one within the Success handler, i.e.
    form.setValues(form.getFieldValues());
    instead of
    form.setValues(form.getValues());
    The problem is the fact that the getValues method gets values from input HTML elements, for example, "Colorado", then the setValues method assigns that value to the ComboBox and it doesn't became its selected item, it's just a text.
    Thank you very much Daniil!

    It works, which is great because now I can forget about my workaround for the setValues() method. I have another question related to loading / resetting a form. I thought about opening a new thread but then figured it could be better to ask it here.

    In the example at https://examples1.ext.net/#/GridPanel/Update/AutoSave/,
    selecting a row in the grid panel doesn't update ComboBox or DateField controls if you put them in the UserForm.

                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true">
                        <Listeners>
                            <RowSelect Handler="#{UserForm}.getForm().loadRecord(record);#{UserForm}.record = record;" />
                        </Listeners>
                    </ext:RowSelectionModel>
                </SelectionModel>
    Also, hitting the "Reset" button simply wipes out all the fields. The correct behavior would be to reset the values to the currently selected grid panel row's values. I've created a stripped-down example demonstrating the problem. I'd greatly appreciate your feedback if there's any workaround possible.

    Thanks,

    Vadym

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic"%>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            bool useConfirmation;
        
            if (bool.TryParse(UseConfirmation.Text, out useConfirmation))
            {
                this.Store1.SuspendScripting();
                this.Store1.UseIdConfirmation = useConfirmation;
                this.Store1.ResumeScripting();
            }
        
            this.BindData();
        }
        
        public class TestPerson
        {
            public int Id
            {
                get; set;
            }
    
            public string Email
            {
                get; set;
            }
    
            public string First
            {
                get;
                set;
            }
    
            public string Last
            {
                get;
                set;
            }
    
            public DateTime DOB
            {
                get;
                set;
            }
    
            public string Gender
            {
                get;
                set;
            }
        }
        
        //----------------Page------------------------
        private List<TestPerson> TestPersons
        {
            get
            {
                return new List<TestPerson>
                   {
                       new TestPerson{Id=1, Email="fred@flintstone.com", First="Fred", Last="Flintstone", DOB=Convert.ToDateTime("10/10/1980"), Gender="M"},
                       new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone",DOB=Convert.ToDateTime("11/11/1975"), Gender="F"},
                       new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone",DOB=Convert.ToDateTime("12/12/1968"), Gender="F"},
                       new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble",DOB=Convert.ToDateTime("1/5/1987"), Gender="F"},
                       new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble",DOB=Convert.ToDateTime("1/9/1976"), Gender="M"},
                       new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble",DOB=Convert.ToDateTime("10/11/1981"), Gender="M"}
                   };
            }
        }
    
        private static int curId = 7;
        private static object lockObj = new object();
        
        private int NewId
        {
            get
            {
                return System.Threading.Interlocked.Increment(ref curId);
            }
        }
        
        private List<TestPerson> CurrentData
        {
            get
            {
                var persons = this.Session["TestPersons"];
                
                if (persons == null)
                {
                    persons = this.TestPersons;
                    this.Session["TestPersons"] = persons;
                }
    
                return (List<TestPerson>)persons;
            }
        }
        
        
        private void BindData()
        {
            if (X.IsAjaxRequest)
            {
                return;
            }
    
            this.Store1.DataSource = this.CurrentData;
            this.Store1.DataBind();
        }
        
    
    </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>Grid with AutoSave - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
        <script type="text/javascript">
            var updateRecord = function (form) {
                if (form.record == null) {
                    return;
                }
    
                if (!form.getForm().isValid()) {
                    Ext.net.Notification.show({
                        iconCls: "icon-exclamation",
                        html: "Form is invalid",
                        title: "Error"
                    });
                    return false;
                }
    
                form.getForm().updateRecord(form.record);
            };
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
                  
            <ext:Store 
                ID="Store1" 
                runat="server" 
                AutoSave="true" 
                ShowWarningOnFailure="false"
                SkipIdForNewRecords="false"
                RefreshAfterSaving="None">
                <Reader>
                    <ext:JsonReader IDProperty="Id">
                        <Fields>
                            <ext:RecordField Name="Id" />
                            <ext:RecordField Name="Email" AllowBlank="false" />
                            <ext:RecordField Name="First" AllowBlank="false" />
                            <ext:RecordField Name="Last" AllowBlank="false" />
                            <ext:RecordField Name="DOB" AllowBlank="false" />
                            <ext:RecordField Name="Gender" AllowBlank="false" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
                
            </ext:Store>
            
            <ext:Hidden ID="UseConfirmation" runat="server" Text="false" />
            
            <ext:FormPanel 
                ID="UserForm" 
                runat="server"
                Icon="User"
                Frame="true"
                LabelAlign="Right"
                Title="User -- All fields are required"
                Width="500">
                <Items>
                    <ext:TextField ID="TextField1" runat="server"
                        FieldLabel="Email"
                        DataIndex="Email"
                        AllowBlank="false"
                        Vtype="email"
                        AnchorHorizontal="100%"
                        />
                    
                    <ext:TextField ID="TextField2" runat="server"
                        FieldLabel="First"
                        DataIndex="First"
                        AllowBlank="false"
                        AnchorHorizontal="100%"
                        />
                    
                    <ext:TextField ID="TextField3" runat="server"
                        FieldLabel="Last"
                        DataIndex="Last"
                        AllowBlank="false"
                        AnchorHorizontal="100%"
                        />
                    <ext:DateField ID="DOB" runat="server"
                        FieldLabel="DOB"
                        DataIndex="DOB"
                        AllowBlank="false"
                        AnchorHorizontal="100%"
                        />
    
                    <ext:ComboBox ID="Combo1" runat="server"
                        FieldLabel="Gender" Editable="false" TypeAhead="true" SelectOnFocus="true"
                        AllowBlank="false" AnchorHorizontal="100%">
                        <Items>
                            <ext:ListItem Text="Male" Value="M" />
                            <ext:ListItem Text="Female" Value="F" />
                        </Items>
                    </ext:ComboBox>
                </Items>
                
                <Buttons>
                    <ext:Button ID="Button3" 
                        runat="server"
                        Text="Reset">
                        <Listeners>
                            <Click Handler="#{UserForm}.getForm().reset();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server"
                Icon="Table"
                Frame="true"
                Title="Users"
                Height="400"
                Width="500"
                StoreID="Store1"
                StyleSpec="margin-top: 10px">
                <ColumnModel>
                    <Columns>
                        <ext:Column Header="ID" Width="40" DataIndex="Id" />
                        
                        <ext:Column Header="Email" Width="100" DataIndex="Email">
                            <Editor>
                                <ext:TextField ID="TextField4" runat="server" />    
                            </Editor>
                        </ext:Column>
                        
                        <ext:Column Header="First" Width="50" DataIndex="First">
                            <Editor>
                                <ext:TextField ID="TextField5" runat="server" />    
                            </Editor>
                        </ext:Column>
                        
                        <ext:Column Header="Last" Width="50" DataIndex="Last">
                            <Editor>
                                <ext:TextField ID="TextField6" runat="server" />    
                            </Editor>
                        </ext:Column>
    
                        <ext:DateColumn Header="DOB" Width="50" DataIndex="DOB"></ext:DateColumn>
                        
                        <ext:Column Header="Gender" Width="50" DataIndex="Gender"></ext:Column>
                    </Columns>
                </ColumnModel>
                
                <View>
                    <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
                </View>
                
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                        <Listeners>
                            <RowSelect Handler="#{UserForm}.getForm().loadRecord(record);#{UserForm}.record = record;" />
                        </Listeners>
                    </ext:RowSelectionModel>
                </SelectionModel>
                
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #13
    1. DateField.

    A RecordField's Type is String by default. So, the loadRecord method tries to apply a string to a DateField, it fails.

    Please set up Type="Date" for the DOB RecordField.

    2. ComboBox.

    You didn't set up DataIndex for the ComboBox.

    3. Reset functionality.

    Generally, our examples don't pretend to be fully functional :) They commonly just demonstrate some basics.

    To achieve the requirement you can use the following Click listener for the Reset button:
    <Click Handler="#{UserForm}.getForm().loadRecord(#{UserForm}.record);" />
  4. #14
    Great help and suggestions as usual!

    Thanks Daniil,

    Vadym
  5. #15
    Glad to help!

    I see you became a premium member :) Please welcome to the Premium Help forum :)
  6. #16
    sorry, wrong post. Edited
    Last edited by RCN; Nov 26, 2014 at 1:53 PM.
Page 2 of 2 FirstFirst 12

Similar Threads

  1. problem after resetting form controls populated
    By Ewerton93 in forum 1.x Help
    Replies: 1
    Last Post: Apr 25, 2012, 3:48 PM
  2. form validation problem
    By ozayExt in forum 1.x Help
    Replies: 1
    Last Post: Oct 27, 2011, 7:05 AM
  3. Resetting TaskManager tast
    By wdk in forum 1.x Help
    Replies: 8
    Last Post: Mar 29, 2011, 2:42 AM
  4. Replies: 20
    Last Post: Nov 24, 2010, 12:39 PM
  5. [CLOSED] Image complete event always fire when resetting src
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 28, 2010, 8:02 AM

Posting Permissions