一個漂亮的ExtJs登入視窗（實現登入跳轉）
阿新 • • 發佈：2019-01-28
這幾天有程式碼任務，自己做了個登入介面，感覺不錯，拿來共享一下~~
<link rel="stylesheet" href="/ext-3.2.1/resources/css/ext-all.css" type="text/css"></link> <script type="text/javascript" src="/ext-3.2.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/ext-3.2.1/ext-all.js"></script> </head> <body> <script language="javascript"> var uname = new Ext.form.TextField( { id :'uname', fieldLabel : '使用者名稱', name : 'name',//元素名稱 //anchor:'95%',//也可用此定義自適應寬度 allowBlank : false,//不允許為空 value : "admin", blankText : '使用者名稱不能為空'//錯誤提示內容 }); var pwd = new Ext.form.TextField( { id : 'pwd', //xtype: 'textfield', inputType : 'password', fieldLabel : '密 碼', //anchor:'95%', maxLength : 10, name : 'password', allowBlank : false, value : "12345", blankText : '密碼不能為空' }); Ext.onReady(function() { //使用表單提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; //定義表單 var simple = new Ext.FormPanel( { labelWidth : 75, defaults : { width : 150 }, defaultType : 'textfield',//預設欄位型別 bodyStyle : 'background: #cdcdcd;padding:30 0 0 20;', border : false, buttonAlign : 'center', border : false, id : "form", //定義表單元素 items : [ uname, pwd ], buttons : [ { text : '登入', type : 'submit', id : 'sb', //定義表單提交事件 handler : save }, { text : '重置', handler : function() { simple.form.reset(); } } ], keys : [ { key : Ext.EventObject.ENTER, fn : save, scope : this } ] }); function save() { var userName = uname.getValue(); var userPass = pwd.getValue(); //驗證合法後使用載入進度條 if (simple.form.isValid()) { //提交到伺服器操作 simple.form.submit({ waitMsg : '正在進行登陸驗證,請稍後...', url : 'login!checkUser.action', method : 'post', params : { userName : userName, userPass : userPass }, //提交成功的回撥函式 success : function(form, action) { if (action.result.msg == 'OK') { window.location.href="login!index.action?userName="+userName; }else if(action.result.msg == 'ERROR') { window.location.href="index.jsp"; } }, //提交失敗的回撥函式 failure : function(form, action) { switch (action.failureType) { case Ext.form.Action.CLIENT_INVALID: Ext.Msg.alert('錯誤提示', '表單資料非法請核實後重新輸入！'); break; case Ext.form.Action.CONNECT_FAILURE: Ext.Msg.alert('錯誤提示', '網路連線異常！'); break; case Ext.form.Action.SERVER_INVALID: Ext.Msg.alert('錯誤提示', "您的輸入使用者資訊有誤，請核實後重新輸入！"); simple.form.reset(); } } }); } }; //定義窗體 var win = new Ext.Window({ id : 'win', layout : 'fit', //自適應佈局 align : 'center', width : 330, height : 182, resizable : false, draggable : false, border : false, bodyStyle : 'padding:5px;background:gray', maximizable : false,//禁止最大化 closeAction : 'close', closable : false,//禁止關閉, items : simple //將表單作為窗體元素巢狀佈局 }); win.show();//顯示窗體 pwd.focus(false, 100); }); </script> </body>
效果：
這裡是在SSH框架上做的。而且實現了struts2登入跳轉。
關於登入跳轉，很多人都說難做，也確實有點難做。因為submit提交後success裡得到的是個字串，並不會完成頁面跳轉的動作！要想跳轉，得自己在success裡寫跳轉的程式碼。上面我用的方式是一種，有一點不好的是：通過window.location.href方式跳轉到主頁面，瀏覽器的URL裡顯示傳遞的引數！
我知道，還有一種瞞天過海之術，可以不會把引數顯示在url裡。就是在做一個div，設定這個div為不可見。這個div裡放置一個form，給這個form配置method=post。然後將window.location.href="login!index.action?userName="+userName;替換成:那個form.action=login!index.action;form.submit會實現成功跳轉。但這種辦法最好不要用！