[CLOSED] Problem resetting a form

**vadym.f** · May 18, 2013, 2:57 AM

Hi,

I have a problem resetting a form hosted by a Window control. Most form fields have no issue being reset except for a Combobox under specific circumstances. In the setup having a Window with IFrame autoload mode, if a Combobox has focus, it doesn't get reset. The code sample is provided below. It features two nearly identical forms with the first one residing on a separate page and the second being inlined within a Window. The latter has no issue to my knowledge. The former does.

Steps to reproduce:

Click the "Window with iframe" button
Type in some text in the TextField and select an item in the Combo of the form
Click the "Close" button
Click the "Window with iframe" button again to observe that the form was reset properly
Repeat the previous steps but close the window with the "X" button
Observe that there's no issue yet
Repeat the steps to display the window but expand the combo and leave the cursor in it
Click the "X" button to hide the form
Display the window and observe that the combo didn't reset
Repeat the previous steps, leave the combo focused but hide the window using the "Close" button belonging to the form and, consequently, the iframe
Reopen the window and observe that the form was reset properly
Experiment with the second window (no iframe) to ensure that the form is always reset properly, including the combobox control

PageMain.aspx

<%@ Page Language="C#" %>

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>

<!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" />
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server">
            <Items>
                <ext:Button runat="server" Text="Window with iframe">
                    <Listeners>
                        <Click Handler="Window1.center();Window1.setVisible(true);" />
                    </Listeners>
                </ext:Button>
                <ext:Button runat="server" Text="Window no iframe">
                    <Listeners>
                        <Click Handler="Window2.center();Window2.setVisible(true);" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Viewport>
        <ext:Window ID="Window1" runat="server" Title="Window with iframe" InitCenter="false"
            Icon="Book" Height="300" Hidden="true" Width="600" Draggable="true"
            Resizable="false" Padding="0" Collapsible="false" Modal="true">
            <AutoLoad Mode="IFrame" Url="~/PageWindow.aspx"></AutoLoad>
            <Listeners>
                <Hide Handler="Window1.getBody().Ext.getCmp('FormPanel1').getForm().reset();" />
            </Listeners>
        </ext:Window>
        <ext:Window ID="Window2" runat="server" Title="Window no iframe" InitCenter="false"
            Icon="Book" Height="300" Hidden="true" Width="600" Draggable="true"
            Resizable="false" Padding="0" Collapsible="false" Modal="true" Layout="FitLayout">
            <Items>
                <ext:FormPanel runat="server" ID="FormPanel1">
                    <Items>
                        <ext:TextField runat="Server" FieldLabel="Text 1"></ext:TextField>
                        <ext:ComboBox runat="server" FieldLabel="Combo 1" EmptyText="Select..." AllowBlank="false" Editable="true" TypeAhead="true" MinChars="2">
                            <Items>
                                <ext:ListItem Text="Item1" Value="0" />
                                <ext:ListItem Text="Item2" Value="1" />
                                <ext:ListItem Text="Item3" Value="2" />
                            </Items>
                        </ext:ComboBox>
                    </Items>
                    <BottomBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Close">
                                    <Listeners>
                                        <Click Handler="Window2.setVisible(false);" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                </ext:FormPanel>
            </Items>
            <Listeners>
                <Hide Handler="FormPanel1.getForm().reset();" />
            </Listeners>
        </ext:Window>
    </form>
</body>
</html>

PageWindow.aspx

<%@ Page Language="C#" %>

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>

<!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" />
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:FormPanel runat="server" ID="FormPanel1">
                    <Items>
                        <ext:TextField ID="TextField1" runat="Server" FieldLabel="Text 1"></ext:TextField>
                        <ext:ComboBox ID="ComboBox1" runat="server" FieldLabel="Combo 1" EmptyText="Select..." AllowBlank="false" Editable="true" TypeAhead="true" MinChars="2">
                            <Items>
                                <ext:ListItem Text="Item1" Value="0" />
                                <ext:ListItem Text="Item2" Value="1" />
                                <ext:ListItem Text="Item3" Value="2" />
                            </Items>
                        </ext:ComboBox>
                    </Items>
                    <BottomBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Text="Close">
                                    <Listeners>
                                        <Click Handler="window.parent.Ext.getCmp('Window1').setVisible(false);" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**Baidaly** · May 20, 2013, 12:56 AM

Hello!

Thank you for your example. I was able to reproduce.

Please, try to add the following overriding in Child Frame:

<script>
	Ext.override(Ext.form.ComboBox, {
		reset : function(){
			if (this.isExpanded())
				this.collapse();
			
			if(this.clearFilterOnReset && this.mode == 'local'){
				this.store.clearFilter();
			}
			
			Ext.form.ComboBox.superclass.reset.call(this);
		}
	});
</script>

**vadym.f** · May 20, 2013, 1:22 AM

Hi Daulet, thanks for your response!

This override doesn't apply the EmptyText property to the combo after resetting. In fact, the combo isn't actually reset after all. Select any item and hide the form by clicking the "X" button. Next time the window is open, the combo appears empty, but if you click anywhere on the window's form, the previously selected item is back in the combo. Please advise.

**Daniil** · May 20, 2013, 12:45 PM

Hi everybody,

The problem is the fact that if close the Window by "X" click, the ComboBox doesn't lose focus, because an iframe doesn't catch click on its parent.

I am not sure it is a bug, but, maybe, a ComboBox's reset method should blur itself if it is focused. At least, this override should work well in your scenario.

Override

Ext.override(Ext.form.ComboBox, {
    reset : function(){
        if (this.hasFocus) {                    
            this.triggerBlur();
            this.blur();
        }               
             
        if(this.clearFilterOnReset && this.mode == 'local'){
            this.store.clearFilter();
        }
             
        Ext.form.ComboBox.superclass.reset.call(this);
    }
});

I am reluctant to change it in SVN v1, but it appears to be not reproducible with v2.

**vadym.f** · May 20, 2013, 4:39 PM

Thanks a lot Daniil!

This override seems to work well. I assume it would be safe to include it in the global override script as I don't expect any side effects here. But please advise otherwise.

**Daniil** · May 21, 2013, 3:30 AM

Everything is possible, but I can't foresee any problem with that override.

**vadym.f** · May 21, 2013, 3:36 AM

Thanks again, please mark this thread as closed.

Thread: [CLOSED] Problem resetting a form

Thread Tools

Search Thread

Display

[CLOSED] Problem resetting a form

Similar Threads

Problem resetting a form

problem after resetting form controls populated

Resetting TaskManager tast

[CLOSED] Store start value is not resetting with Paging Toolbar Refresh Event (Version 0.8.3)

[CLOSED] Image complete event always fire when resetting src

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Problem resetting a form

[CLOSED] Problem resetting a form

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us