Problem resetting a form

Page 1 of 2 12 LastLast
  1. #1

    Problem resetting a form

    Hi,

    I'm trying to get the Reset button to work for my form. If the form is updated (some fields values are reassigned) within Ajax Request context with IsAjaxRequest being true, the Reset functionality doesn't work. The Reset button, when clicked, restores the form to it's pre-update state. It does work properly after a true postback on Page_Load (IsAjaxRequest=false).

    In JS, the record property of the form evaluates to undefined:
    #{FormPanel1}.getForm().record                          // undefined
    #{FormPanel1}.record                                          // undefined
    #{FormPanel1}.getForm().updateRecord                // is defined OK
    The changes are committed to the database in the Save button DirectEvent as below:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
    	protected void ButtonSave_Click(object sender, DirectEventArgs e)
    	{
    		var values = JSON.Deserialize<Dictionary<string, string>>(e.ExtraParams["values"]);
    		foreach (var value in values)
    		{
    			// Parse the values of the form and persist them to the database here
    		}
    		
    		// Update the form with the new values here
    		this.TextField1.Text="Value1";
    		this.TextField2.Text="Value2";
    		// Rest of form assignments...
    	}
    </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 runat="server">
        <title></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
    	
        <script type="text/javascript">
            var isFormValid = function (form) {
    	    // form.record always evaluates to undefined!!
                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.record evaluates to undefined!!
                // form.getForm().updateRecord(form.record);
            };	
    </head>
    <body>
        <form id="form1" runat="server">
    	
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"
            IDMode="Explicit" />
    	
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Height="230" Width="900" AutoScroll="true"
                    Region="North" Border="false" Frame="true">
                    <Items>	
    					<ext:FormPanel ID="FormPanel1" runat="server" Title="" Border="false" Padding="15"
    						Height="210" Width="900" AutoScroll="true" ButtonAlign="Right" Frame="true">
    						<Items>
    							<ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Field 1">
    								<Items>
    									<ext:TextField ID="TextField1" runat="server" Width="160" />
    									<ext:DisplayField runat="server" Width="10"></ext:DisplayField>
    									<ext:DisplayField runat="server" Text="Field 2:" Width="120" />
    									<ext:TextField ID="TextField2" runat="server" Width="160" />
    								</Items>
    							</ext:CompositeField>
    						</Items>
    						<Buttons>
    							<ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
    								<DirectEvents>
    									<Click OnEvent="ButtonSave_Click" Before="return isFormValid(#{FormPanel1});">
    									<EventMask ShowMask="true" />
    									<ExtraParams>
    										<ext:Parameter Name="values" Value="#{FormPanel1}.getForm().getValues()" Mode="Raw"
    											Encode="true" />
    									</ExtraParams>
    									</Click>
    								</DirectEvents>
    							</ext:Button>
    							<ext:Button ID="ButtonReset" runat="server" Text="Reset">
    								<Listeners>
    									<Click Handler="#{FormPanel1}.getForm().reset();" />
    								</Listeners>
    							</ext:Button>
    						</Buttons>		
    					</ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    	
    	</form>
    </body>
    </html>
    I'd highly appreciate any advice or suggestions to resolve this.

    Thanks,

    Vadym
    Last edited by vadym.f; Jan 26, 2012 at 2:29 AM.
  2. #2
    Hi,

    There is no "record" property in BasicForm. These methods - loadRecord and updateRecord - are to interact with a Store.

    To get values you can use the getValues method.
    http://docs.sencha.com/ext-js/3-4/#!...thod-getValues

    P.S. Your sample throws errors.
  3. #3

    Reset button isn't working

    Hi Daniil,

    Thanks for your response! I'm not so concerned about the record property as about the behavior of the Reset button. It resets the fields on the form to their original values even AFTER the changes are saved on the server. This doesn't occur after a full postback though. I've fixed the sample as the closing js script tag was missing. Please refer to the working sample below. When you click the Reset button after saving the form, it resets the text fields to "Before".

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Ext.Net.CPSO.CATS.WebForm1" %>
    
    <script runat="server">
        protected void ButtonSave_Click(object sender, DirectEventArgs e)
        {
            var values = JSON.Deserialize<Dictionary<string, string>>(e.ExtraParams["values"]);
            foreach (var value in values)
            {
                // Parse the values of the form and persist them to the database here
            }
             
            // Update the form with the new values here
            this.TextField1.Text = "Value 1 After";
            this.TextField2.Text = "Value 2 After";
            // Rest of form assignments...
        }
    </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></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
    
            <script type="text/javascript">
            var isFormValid = function (form) {
            // form.record always evaluates to undefined!!
                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.record evaluates to undefined!!
                // form.getForm().updateRecord(form.record);
            };  
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
         
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"
            IDMode="Explicit" />
         
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Height="230" Width="900" AutoScroll="true"
                    Region="Center" Border="false" Frame="true">
                    <Items>  
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="" Border="false" Padding="15"
                            Height="210" Width="900" AutoScroll="true" ButtonAlign="Right" Frame="true">
                            <Items>
                                <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Field 1">
                                    <Items>
                                        <ext:TextField ID="TextField1" runat="server" Text="Value 1 Before" Width="160" />
                                        <ext:DisplayField ID="DisplayField1" runat="server" Width="10"></ext:DisplayField>
                                        <ext:DisplayField ID="DisplayField2" runat="server" Text="Field 2:" Width="120" />
                                        <ext:TextField ID="TextField2" runat="server" Text="Value 2 Before" Width="160" />
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
                                    <DirectEvents>
                                        <Click OnEvent="ButtonSave_Click" Before="return isFormValid(#{FormPanel1});">
                                        <EventMask ShowMask="true" />
                                        <ExtraParams>
                                            <ext:Parameter Name="values" Value="#{FormPanel1}.getForm().getValues()" Mode="Raw"
                                                Encode="true" />
                                        </ExtraParams>
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="ButtonReset" runat="server" Text="Reset">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>       
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
         
        </form>
    </body>
    </html>
  4. #4
    Well, a FormPanel knows nothing about you save it.

    I can suggest:

    1. Set up TrackResetOnLoad="true" for the FormPanel.
    http://docs.sencha.com/ext-js/3-4/#!...ackResetOnLoad

    2. And the following DirectEvent's Success handler.
    Success="#{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getValues());
  5. #5

    .getForm().setValues() mishandles ComboBox

    Quote Originally Posted by Daniil View Post
    Well, a FormPanel knows nothing about you save it.

    I can suggest:

    1. Set up TrackResetOnLoad="true" for the FormPanel.
    http://docs.sencha.com/ext-js/3-4/#!...ackResetOnLoad

    2. And the following DirectEvent's Success handler.
    Success="#{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getValues());
    Thanks again Daniil,

    The workaround seems to fix the Reset button behavior. However, the call to

    Success="#{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getValues());
    messes all the store databound ComboBoxes present on the FormPanel resetting the Values of their items to their respective Text property. I'm not sure though if it's a bug or just a usage issue. Please refer to the sample below. The first time you hit the Save button, the SelectedItem.Value correctly shows "AL". However, next time after resetting it to "CO", the selected item Value property is "Colorado" and not "CO" as you'd expect. Please advise kindly.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
    
    <script runat="server">
        protected void ButtonSave_Click(object sender, DirectEventArgs e)
        {
            var values = JSON.Deserialize<Dictionary<string, string>>(e.ExtraParams["values"]);
            foreach (var value in values)
            {
                // Parse the values of the form and persist them to the database here
            }
            // Please examine this in debug mode
            string selectedState = this.Combo1.SelectedItem.Value;
    
            // Update the form with the new values here
            this.TextField1.Text = "Value 1 After";
            this.TextField2.Text = "Value 2 After";
            this.Combo1.SelectedItem.Value = "CO";
            // Rest of form assignments...
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[]{"AL", "Alabama", "The Heart of Dixie", 5.99},
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun", 5.99},
                new object[] { "AZ", "Arizona", "The Grand Canyon State", 5.99},
                new object[] { "AR", "Arkansas", "The Natural State", 5.99},
                new object[] { "CA", "California", "The Golden State", 5.99},
                new object[] { "CO", "Colorado", "The Mountain State", 5.99},
            };
    
            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></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
        <script type="text/javascript">
            var isFormValid = function (form) {
                // form.record always evaluates to undefined!!
                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.record evaluates to undefined!!
                // form.getForm().updateRecord(form.record);
            };  
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"
            IDMode="Explicit" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Height="230" Width="900" AutoScroll="true"
                    Region="Center" Border="false" Frame="true">
                    <Items>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="" Border="false" Padding="15"
                            Height="210" Width="900" AutoScroll="true" ButtonAlign="Right" Frame="true" TrackResetOnLoad="true">
                            <Items>
                                <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Field 1">
                                    <Items>
                                        <ext:TextField ID="TextField1" runat="server" Text="Value 1 Before" Width="160" />
                                        <ext:DisplayField ID="DisplayField1" runat="server" Width="10">
                                        </ext:DisplayField>
                                        <ext:DisplayField ID="DisplayField2" runat="server" Text="Field 2:" Width="120" />
                                        <ext:TextField ID="TextField2" runat="server" Text="Value 2 Before" Width="160" />
                                        <ext:DisplayField ID="DisplayField3" runat="server" Width="10">
                                        </ext:DisplayField>
                                        <ext:DisplayField ID="DisplayField4" runat="server" Text="State:" Width="60" />
                                        <ext:ComboBox runat="server" ID="Combo1" Editable="false" SelectOnFocus="true" SelectedIndex="0"
                                            DisplayField="state" ValueField="abbr" Width="180">
                                            <Store>
                                                <ext:Store ID="Store1" runat="server">
                                                    <Reader>
                                                        <ext:ArrayReader>
                                                            <Fields>
                                                                <ext:RecordField Name="abbr" />
                                                                <ext:RecordField Name="state" />
                                                                <ext:RecordField Name="nick" />
                                                                <ext:RecordField Name="price" />
                                                            </Fields>
                                                        </ext:ArrayReader>
                                                    </Reader>
                                                </ext:Store>
                                            </Store>
                                        </ext:ComboBox>
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
                                    <DirectEvents>
                                        <Click OnEvent="ButtonSave_Click" Before="return isFormValid(#{FormPanel1});" Success="#{FormPanel1}.getForm().setValues(#{FormPanel1}.getForm().getValues());">
                                            <EventMask ShowMask="true" />
                                            <ExtraParams>
                                                <ext:Parameter Name="values" Value="#{FormPanel1}.getForm().getValues()" Mode="Raw"
                                                    Encode="true" />
                                            </ExtraParams>
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="ButtonReset" runat="server" Text="Reset">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by vadym.f; Jan 26, 2012 at 3:56 PM.
  6. #6

    Quick fix

    Hi Daniil,

    After doing some js debugging and analysis, I came up with a quick (and dirty) fix for the Form setValues problem. What ends up happening is that the JS array containing form values to reset has two elements for every ComboBox of the FormPanel. The name of one such element is its server id, e.g. Combo1 while the second element's name is the server id plus "_Value" token, e.g. Combo1_Value.

    I found out that in the setValues() function below (made readable by indentation) the call to g.setValue() made on the Combo element without _Value overwrites the Value property of the combo item with the Text:

    // EXISTING function
    setValues:function(c)
    {
    	if(Ext.isArray(c))
    	{
    		for(var d=0,a=c.length;d<a;d++)
    		{
    			var b=c[d];
    			var e=this.findField(b.id);
    			if(e)
    			{
    				e.setValue(b.value);
    				if(this.trackResetOnLoad)
    				{
    					e.originalValue=e.getValue()
    				}
    			}
    		}
    	}
    	else
    	{
    		var g,h;
    		for(h in c)
    		{
    			if(!Ext.isFunction(c[h])&&(g=this.findField(h)))
    			{
    				g.setValue(c[h]);
    				if(this.trackResetOnLoad)
    				{
    					g.originalValue=g.getValue()
    				}
    			}
    		}
    	}
    	return this
    }
    What I did, and again, it's very quick and dirty, was putting a check for the xtype of the g field and the presence of the "_Value" token in the element name to avoid the overwrite at fault:

    // NEW function
        mySetValues: function (c) {
            // This is new
    
            if (Ext.isArray(c)) {
                for (var d = 0, a = c.length; d < a; d++) {
                    var b = c[d];
                    var e = this.findField(b.id);
                    if (e) {
                        e.setValue(b.value);
                        if (this.trackResetOnLoad) {
                            e.originalValue = e.getValue();
                        }
                    }
                }
            }
            else {
                var g, h;
                for (h in c) {
                    if (!Ext.isFunction(c[h]) && (g = this.findField(h))) {
                        if (g.xtype == "combo" && h.indexOf("_Value") == -1) {
                            continue;
                        }
    
                        g.setValue(c[h]);
                        if (this.trackResetOnLoad) {
                            g.originalValue = g.getValue();
                        }
                    }
                }
            }
            return this;
        }
    Then I override the definition of the setValues() function for the form panel in the button Success handler. Please refer to the sample below. I truly appreciated your timely suggestions that put me on the right track!

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
    
    <script runat="server">
        protected void ButtonSave_Click(object sender, DirectEventArgs e)
        {
            var values = JSON.Deserialize<Dictionary<string, string>>(e.ExtraParams["values"]);
            foreach (var value in values)
            {
                // Parse the values of the form and persist them to the database here
            }
            string selectedState = this.ComboDynamic.SelectedItem.Value;
    
            string selectedStateStatic = this.ComboStatic.SelectedItem.Value;
    
            // Update the form with the new values from the Database here
            this.TextField1.Text = "Value 1 After";
            this.TextField2.Text = "Value 2 After";
            this.ComboDynamic.SelectedItem.Value = "CA";
            this.ComboStatic.SelectedItem.Value = "CO";
            // Rest of form assignments...
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[]{"AL", "Alabama", "The Heart of Dixie", 5.99},
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun", 5.99},
                new object[] { "AZ", "Arizona", "The Grand Canyon State", 5.99},
                new object[] { "AR", "Arkansas", "The Natural State", 5.99},
                new object[] { "CA", "California", "The Golden State", 5.99},
                new object[] { "CO", "Colorado", "The Mountain State", 5.99},
            };
    
            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></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
        <script type="text/javascript">
            var isFormValid = 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;
                }
            };
    
            var onSuccess = function (form) {
                form.setValues = mySetValues;
                form.setValues(form.getValues());
            }
    
            var mySetValues = function (c) {
                // This is new
    
                if (Ext.isArray(c)) {
                    for (var d = 0, a = c.length; d < a; d++) {
                        var b = c[d];
                        var e = this.findField(b.id);
                        if (e) {
                            e.setValue(b.value);
                            if (this.trackResetOnLoad) {
                                e.originalValue = e.getValue();
                            }
                        }
                    }
                }
                else {
                    var g, h;
                    for (h in c) {
                        if (!Ext.isFunction(c[h]) && (g = this.findField(h))) {
                            if (g.xtype == "combo" && h.indexOf("_Value") == -1) {
                                continue;
                            }
    
                            g.setValue(c[h]);
                            if (this.trackResetOnLoad) {
                                g.originalValue = g.getValue();
                            }
                        }
                    }
                }
                return this;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"
            IDMode="Explicit" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Height="230" Width="900" AutoScroll="true"
                    Region="Center" Border="false" Frame="true">
                    <Items>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="" Border="false" Padding="15"
                            Height="210" Width="900" AutoScroll="true" ButtonAlign="Right" Frame="true" TrackResetOnLoad="true">
                            <Items>
                                <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Field 1">
                                    <Items>
                                        <ext:TextField ID="TextField1" runat="server" Text="Value 1 Before" Width="160" />
                                        <ext:DisplayField ID="DisplayField1" runat="server" Width="10">
                                        </ext:DisplayField>
                                        <ext:DisplayField ID="DisplayField2" runat="server" Text="Field 2:" Width="80" />
                                        <ext:TextField ID="TextField2" runat="server" Text="Value 2 Before" Width="160" />
                                        <ext:DisplayField ID="DisplayField3" runat="server" Width="10">
                                        </ext:DisplayField>
                                        <ext:DisplayField ID="DisplayField4" runat="server" Text="Dynamic&nbsp;Combo:" Width="90" />
                                        <ext:ComboBox runat="server" ID="ComboDynamic" Editable="false" SelectOnFocus="true" SelectedIndex="0"
                                            DisplayField="state" ValueField="abbr" Width="180">
                                            <Store>
                                                <ext:Store ID="Store1" runat="server">
                                                    <Reader>
                                                        <ext:ArrayReader>
                                                            <Fields>
                                                                <ext:RecordField Name="abbr" />
                                                                <ext:RecordField Name="state" />
                                                                <ext:RecordField Name="nick" />
                                                                <ext:RecordField Name="price" />
                                                            </Fields>
                                                        </ext:ArrayReader>
                                                    </Reader>
                                                </ext:Store>
                                            </Store>
                                        </ext:ComboBox>
                                    </Items>
                                </ext:CompositeField>
                                <ext:CompositeField ID="CompositeField2" runat="server" FieldLabel="Static Combo">
                                    <Items>
                                        <ext:ComboBox runat="server" ID="ComboStatic" Editable="false" SelectOnFocus="true"
                                            SelectedIndex="0" Width="180">
                                            <Items>
                                                <ext:ListItem Text="Alabama" Value="AL" />
                                                <ext:ListItem Text="Alaska" Value="AK" />
                                                <ext:ListItem Text="Arizona" Value="AZ" />
                                                <ext:ListItem Text="Arkansas" Value="AR" />
                                                <ext:ListItem Text="California" Value="CA" />
                                                <ext:ListItem Text="Colorado" Value="CO" />
                                            </Items>
                                        </ext:ComboBox>
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
                                    <DirectEvents>
                                        <Click OnEvent="ButtonSave_Click" Before="return isFormValid(#{FormPanel1});" Success="onSuccess(#{FormPanel1}.getForm());">
                                            <EventMask ShowMask="true" />
                                            <ExtraParams>
                                                <ext:Parameter Name="values" Value="#{FormPanel1}.getForm().getValues()" Mode="Raw"
                                                    Encode="true" />
                                            </ExtraParams>
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="ButtonReset" runat="server" Text="Reset">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    I just found out that DisplayField controls values are NOT returned in the form.getValues() call. Being part of the FormPanel, they are reset by the Reset button after the form is saved no matter what.

    Thanks,

    Vadym
    Last edited by vadym.f; Jan 26, 2012 at 6:55 PM. Reason: DisplayField controls missing from form.getValues()
  7. #7
    Hi Daniil,

    Please advise if / when the patch will be available to address the form.getValues() and form.setValues() issues outlined in this thread. In the mean time, if you can suggest any approach to circumvent these problems other than how I did it, I'd appreciate that, too.

    Thanks,

    Vadym
  8. #8
    Hi Vadym,

    Please clarify the steps to reproduce the issue with ComboBox using the sample from the post #5.
  9. #9
    Quote Originally Posted by vadym.f View Post
    I just found out that DisplayField controls values are NOT returned in the form.getValues() call. Being part of the FormPanel, they are reset by the Reset button after the form is saved no matter what.
    The getValues method collects values from all enabled HTML input elements within the form, not from the Ext Field objects.
    http://docs.sencha.com/ext-js/3-4/#!...thod-getValues

    The getFieldValues method collects values from the Ext Field objects.
    http://docs.sencha.com/ext-js/3-4/#!...getFieldValues
  10. #10

    Steps to reproduce the Combo resetting issue

    Quote Originally Posted by Daniil View Post
    Hi Vadym,

    Please clarify the steps to reproduce the issue with ComboBox using the sample from the post #5.
    Hi Daniil,

    These are the steps to reproduce the JS combo resetting issue:
    • Create a webpage from the code below
    • Put a break point in ButtonSave_Click to observe the values of combos' selected items
    • Comment out the workaround call to form.setValues = mySetValues in the "Save" button Success handler;
    • Run the sample and hit the "Save" button
    • Observe the values of selected items - they are correctly set to the State codes
    • Hit the Save button again
    • Observe the values of the selected items - they are both INCORRECTLY set to the State description
    • Uncomment the workaround call to form.setValues = mySetValues in the "Save" button Success handler;
    • Run the sample again
    • Observe that the Combos' selected items display correct values every time


    Hope this gives you the right context.

    Thanks,

    Vadym

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <script runat="server">
        protected void ButtonSave_Click(object sender, DirectEventArgs e)
        {
            var values = JSON.Deserialize<Dictionary<string, string>>(e.ExtraParams["values"]);
            foreach (var value in values)
            {
                // Parse the values of the form and persist them to the database here
            }
            string selectedStateDynamic = this.ComboDynamic.SelectedItem.Value;
    
            string selectedStateStatic = this.ComboStatic.SelectedItem.Value;
    
            // Update the form with the new values from the Database here
            this.TextField1.Text = "Value 1 After";
            this.TextField2.Text = "Value 2 After";
            this.ComboDynamic.SelectedItem.Value = "CA";
            this.ComboStatic.SelectedItem.Value = "CO";
            // Rest of form assignments...
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[]{"AL", "Alabama", "The Heart of Dixie", 5.99},
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun", 5.99},
                new object[] { "AZ", "Arizona", "The Grand Canyon State", 5.99},
                new object[] { "AR", "Arkansas", "The Natural State", 5.99},
                new object[] { "CA", "California", "The Golden State", 5.99},
                new object[] { "CO", "Colorado", "The Mountain State", 5.99},
            };
    
            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></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
        <script type="text/javascript">
            var isFormValid = 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;
                }
            };
    
            var onSuccess = function (form) {
                form.setValues = mySetValues;
                form.setValues(form.getValues());
            }
    
            // A workaround function to override the Form's setValues()
            var mySetValues = function (c) {
                if (Ext.isArray(c)) {
                    for (var d = 0, a = c.length; d < a; d++) {
                        var b = c[d];
                        var e = this.findField(b.id);
                        if (e) {
                            e.setValue(b.value);
                            if (this.trackResetOnLoad) {
                                e.originalValue = e.getValue();
                            }
                        }
                    }
                }
                else {
                    var g, h;
                    for (h in c) {
                        if (!Ext.isFunction(c[h]) && (g = this.findField(h))) {
                            if (g.xtype == "combo" && h.indexOf("_Value") == -1) {
                                continue;
                            }
    
                            g.setValue(c[h]);
                            if (this.trackResetOnLoad) {
                                g.originalValue = g.getValue();
                            }
                        }
                    }
                }
                return this;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"
            IDMode="Explicit" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Height="230" Width="900" AutoScroll="true"
                    Region="Center" Border="false" Frame="true">
                    <Items>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="" Border="false" Padding="15"
                            Height="210" Width="900" AutoScroll="true" ButtonAlign="Right" Frame="true" TrackResetOnLoad="true">
                            <Items>
                                <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Field 1">
                                    <Items>
                                        <ext:TextField ID="TextField1" runat="server" Text="Value 1 Before" Width="160" />
                                        <ext:DisplayField ID="DisplayField1" runat="server" Width="10">
                                        </ext:DisplayField>
                                        <ext:DisplayField ID="DisplayField2" runat="server" Text="Field 2:" Width="80" />
                                        <ext:TextField ID="TextField2" runat="server" Text="Value 2 Before" Width="160" />
                                        <ext:DisplayField ID="DisplayField3" runat="server" Width="10">
                                        </ext:DisplayField>
                                        <ext:DisplayField ID="DisplayField4" runat="server" Text="Dynamic&nbsp;Combo:" Width="90" />
                                        <ext:ComboBox runat="server" ID="ComboDynamic" Editable="false" SelectOnFocus="true"
                                            SelectedIndex="0" DisplayField="state" ValueField="abbr" Width="180">
                                            <Store>
                                                <ext:Store ID="Store1" runat="server">
                                                    <Reader>
                                                        <ext:ArrayReader>
                                                            <Fields>
                                                                <ext:RecordField Name="abbr" />
                                                                <ext:RecordField Name="state" />
                                                                <ext:RecordField Name="nick" />
                                                                <ext:RecordField Name="price" />
                                                            </Fields>
                                                        </ext:ArrayReader>
                                                    </Reader>
                                                </ext:Store>
                                            </Store>
                                        </ext:ComboBox>
                                    </Items>
                                </ext:CompositeField>
                                <ext:CompositeField ID="CompositeField2" runat="server" FieldLabel="Static Combo">
                                    <Items>
                                        <ext:ComboBox runat="server" ID="ComboStatic" Editable="false" SelectOnFocus="true"
                                            SelectedIndex="0" Width="180">
                                            <Items>
                                                <ext:ListItem Text="Alabama" Value="AL" />
                                                <ext:ListItem Text="Alaska" Value="AK" />
                                                <ext:ListItem Text="Arizona" Value="AZ" />
                                                <ext:ListItem Text="Arkansas" Value="AR" />
                                                <ext:ListItem Text="California" Value="CA" />
                                                <ext:ListItem Text="Colorado" Value="CO" />
                                            </Items>
                                        </ext:ComboBox>
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
                                    <DirectEvents>
                                        <Click OnEvent="ButtonSave_Click" Before="return isFormValid(#{FormPanel1});" Success="onSuccess(#{FormPanel1}.getForm());">
                                            <EventMask ShowMask="true" />
                                            <ExtraParams>
                                                <ext:Parameter Name="values" Value="#{FormPanel1}.getForm().getValues()" Mode="Raw"
                                                    Encode="true" />
                                            </ExtraParams>
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="ButtonReset" runat="server" Text="Reset">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
Page 1 of 2 12 LastLast

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