Feb 11, 2013, 4:05 PM
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">
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>