ext.net 开发学习——用户登录

 

用户登录简而言之就是验证其帐号和密码……

 

具体还要看需求如何，先大体完成一个简单的登录功能……

 

考虑到人性化些，用户输完帐号密码后可以直接按“回车”键盘后登录。去年有一篇是关于html的回车登录《一个页面多个input 按钮 如何回车控制》

 

二者虽有区别但本质其实是相通的 

 

思路：当用户输入完帐号、密码、记住密码后给二者TextField和Checkbox 添加事件 <SpecialKey Fn="KeyPressClick" />

 

另外 如果用户以打开浏览器，帐号、密码取值来之cookie 那么上面的KeyPressClick事件可能发挥不了作用，这时候定义一个页面事件KeyPress

function KeyPress() {
            if (event.keyCode == 13) {
                Ext.net.DirectMethods.UserLogin();
            } 
        } 

 

 

 

前端代码

 <ext:Window ID="Window1" runat="server" Closable="false" Resizable="false" Height="150"
        Icon="Lock" Title="登录" Draggable="false" Width="350" Modal="true" Padding="5"
        Layout="Form">
        <Items>
            <ext:TextField ID="txtUsername" runat="server" FieldLabel="帐号" AllowBlank="false"
                BlankText="请输入帐号." AnchorHorizontal="100%">
                <Listeners>
                    <SpecialKey Fn="KeyPressClick" />
                </Listeners>
            </ext:TextField>
            <ext:TextField ID="txtPassword" runat="server" InputType="Password" FieldLabel="密码"
                AllowBlank="false" BlankText="请输入密码." AnchorHorizontal="100%">
                <Listeners>
                    <SpecialKey Fn="KeyPressClick" />
                </Listeners>
            </ext:TextField>
            <ext:Checkbox runat="server" ID="saveCookie" FieldLabel="记住密码">
                <Listeners>
                    <SpecialKey Fn="KeyPressClick" />
                </Listeners>
            </ext:Checkbox>
        </Items>
        <Buttons>
            <ext:Button ID="btnLogin" runat="server" Text="登录" Icon="Accept">
                <Listeners>
                    <Click Handler="
                            if (!#{txtUsername}.validate() || !#{txtPassword}.validate()) {
                                Ext.Msg.alert('警告','帐号或密码不为空'); 
                                return false; 
                            }" />
                </Listeners>
                <DirectEvents>
                    <Click OnEvent="btnLogin_Click">
                        <EventMask ShowMask="true" Msg="正在登录..." MinDelay="500" />
                    </Click>
                </DirectEvents>
            </ext:Button>
            <ext:Button ID="btnCancel" runat="server" Text="取消" Icon="Decline">
                <Listeners>
                    <Click Handler="#{txtUsername}.clear();#{txtPassword}.clear();#{saveCookie}.clear();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>

 

js：

 <script type="text/javascript">
        //登录
        var KeyPressClick = function(field, e) {
            if (e.getKey() == Ext.EventObject.ENTER) {
                Ext.net.DirectMethods.UserLogin();
            }
        }



        function KeyPress() {
            if (event.keyCode == 13) {
                Ext.net.DirectMethods.UserLogin();
            }

        } 
    </script>

 

 

登录页面效果：

 

 

当用户成功登录到首页后，后退按钮会给你添加烦心事。可以试试 在首页中添加

<script type="text/javascript">

        history.go(1);
 </script>

 

作者：PEPE
出处：http://pepe.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。