Problem with reset button formpanel

  1. #1

    Problem with reset button formpanel

    Hi

    I got the following situation:

    I have a login window with a form panel, the formpanel validate the fields and disable the login button when the form is invalid. Also have a reset button that clear the fields. Everything its ok, but when I use KeyMap with a Binding of the Key ENTER. When I enter values on the field and hit enter appears that the reset have the focus and clears the fields. See the Code:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .icon-exclamation {
                padding-left: 25px !important;
                background: url(/icons/exclamation-png/ext.axd) no-repeat 3px 0px !important;
            }
            
            .icon-accept {
                padding-left: 25px !important;
                background: url(/icons/accept-png/ext.axd) no-repeat 3px 0px !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">   
            <ext:ResourceManager ID="rsMain" runat="server" DisableViewState="True" EnableViewState="False" />       
            <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}" >
                <Binding>
                    <ext:KeyBinding Handler="if(#{frmPanelLogin}.getForm().isValid()){#{btnLogin}.fireEvent('click');}">
                        <Keys>
                            <ext:Key Code="ENTER" />
                        </Keys>
                        
                    </ext:KeyBinding>
                </Binding>
            </ext:KeyMap>
         
            <ext:Window ID="wndLogin" runat="server" Collapsible="False" Height="135" Icon="Lock"
                    Title="Login" Width="355" Closable="False" Draggable="False" 
                    Hidden="True" Modal="True" Layout="FitLayout" AutoHeight="True">
                    <Items>
                        <ext:FormPanel ID="frmPanelLogin" runat="server" ButtonAlign="Right" Padding="5" Width="280" Header="False" AutoWidth="True" AutoHeight="True" Layout="FormLayout" LabelAlign="Right" BodyStyle="background-color: transparent;" LabelWidth="90" MonitorValid="True" Border="false">
                            <Defaults>
                                <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                <ext:Parameter Name="MsgTarget" Value="side" />
                            </Defaults>                    
                            <Items>
                                <ext:TextField ID="txtUserName" runat="server" AnchorHorizontal="95%" FieldLabel="User" BlankText="Enter your user name" IndicatorCls="red-text" />
                                <ext:TextField ID="txtPassword" runat="server" AnchorHorizontal="95%" FieldLabel="Password" InputType="Password" BlankText="Enter your password" IndicatorCls="red-text" />
                            </Items>
                            <Buttons>
                                <ext:Button ID="btnLogin" runat="server" Icon="Accept" Text="Login" Flat="True" Type="Button" FormBind="True" >
                                    <DirectEvents>
                                        <Click OnEvent="btnLogin_Click">
                                            <EventMask ShowMask="true" Msg="Please Wait..." MinDelay="10" />
                                        </Click>                          
                                    </DirectEvents>
    
                                </ext:Button>
                                <ext:Button ID="btnReset" runat="server" Icon="Decline" Type="Reset" Text="Reset" Flat="True">
                                    <Listeners>
                                        <Click Handler="this.up('form').getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                            <Listeners>
                                <ValidityChange Handler="#{btnLogin}.setDisabled(!valid); " />
                            </Listeners>
                        </ext:FormPanel>            
                    </Items>
                </ext:Window>
        </form>
    </body>
    </html>
  2. #2
    Hello!

    It's default browsers behavior to fix it you have to add another hidden button:

    <Buttons>
    	<ext:Button ID="btnLogin" runat="server" Icon="Accept" Text="Login" Flat="True" Type="Button" FormBind="True" >
    		<DirectEvents>
    			<Click OnEvent="btnLogin_Click">
    				<EventMask ShowMask="true" Msg="Please Wait..." MinDelay="10" />
    			</Click>                         
    		</DirectEvents>
    
    	</ext:Button>
    	<ext:Button ID="btnReset" runat="server" Icon="Decline" Type="Reset" Text="Reset" Flat="True" >
    		<Listeners>
    			<Click Handler="this.up('form').getForm().reset();" />
    		</Listeners>
    	</ext:Button>
    	<ext:Button runat="server" Hidden="True"></ext:Button>
    </Buttons>
  3. #3

    Solved

    Thanks!!! Its working
  4. #4

    keymap and button

    Quote Originally Posted by Baidaly View Post
    Hello!

    It's default browsers behavior to fix it you have to add another hidden button:

    <Buttons>
    	<ext:Button ID="btnLogin" runat="server" Icon="Accept" Text="Login" Flat="True" Type="Button" FormBind="True" >
    		<DirectEvents>
    			<Click OnEvent="btnLogin_Click">
    				<EventMask ShowMask="true" Msg="Please Wait..." MinDelay="10" />
    			</Click>                         
    		</DirectEvents>
    
    	</ext:Button>
    	<ext:Button ID="btnReset" runat="server" Icon="Decline" Type="Reset" Text="Reset" Flat="True" >
    		<Listeners>
    			<Click Handler="this.up('form').getForm().reset();" />
    		</Listeners>
    	</ext:Button>
    	<ext:Button runat="server" Hidden="True"></ext:Button>
    </Buttons>
    I hava some problem with the keymap. can you help me?
    the enter key dosen't work.
    ......
        <Buttons>
            <ext:Button ID="btn_Save" runat="server" Text="保存">
                <DirectEvents>
                    <Click OnEvent="btnSave_Click" After="#{winRole}.hide();">
                    </Click>
                </DirectEvents>
            </ext:Button>
            <ext:Button ID="btnCancel" runat="server" Text="取消">
                <Listeners>
                    <Click Handler="#{winRole}.hide();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>
    <ext:KeyMap ID="KeyMap1" runat="server" Target="btn_Save">
        <Binding>
            <ext:KeyBinding Handler="#{btn_Save}.Click;">
                <Keys>
                    <ext:Key Code="ENTER" />
                </Keys>
            </ext:KeyBinding>
        </Binding>
    </ext:KeyMap>
  5. #5

    Hope this help

    See this the code I have, I saw a deference in the Target and the way I fire the click event is using buttonname.fireEvent('click');

            <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}" >
                <Binding>
                    <ext:KeyBinding Handler="if(#{frmPanelLogin}.getForm().isValid()){#{btnLogin}.fireEvent('click');}">
                        <Keys>
                            <ext:Key Code="ENTER" />
                        </Keys>
                         
                    </ext:KeyBinding>
                </Binding>
            </ext:KeyMap>
  6. #6

    without formpanel

    Quote Originally Posted by camazorro View Post
    See this the code I have, I saw a deference in the Target and the way I fire the click event is using buttonname.fireEvent('click');

            <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}" >
                <Binding>
                    <ext:KeyBinding Handler="if(#{frmPanelLogin}.getForm().isValid()){#{btnLogin}.fireEvent('click');}">
                        <Keys>
                            <ext:Key Code="ENTER" />
                        </Keys>
                         
                    </ext:KeyBinding>
                </Binding>
            </ext:KeyMap>
    thanks very much.
    this works when I add an formpanel,but what about the window without formpanel ?

Similar Threads

  1. [CLOSED] Issue with FormPanel reset
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 26, 2012, 2:53 PM
  2. Replies: 9
    Last Post: Mar 15, 2012, 2:27 PM
  3. Reset FormPanel in Code Server (v. 0.8.2)
    By walle in forum 1.x Help
    Replies: 1
    Last Post: May 20, 2010, 12:17 PM
  4. reset formPanel in code server
    By olimpia in forum 1.x Help
    Replies: 0
    Last Post: Jun 19, 2009, 6:30 PM
  5. [CLOSED] Reset Button
    By davidhoyt in forum 1.x Help
    Replies: 3
    Last Post: Dec 10, 2008, 1:53 AM

Tags for this Thread

Posting Permissions