extjs 登陆php,教程:基本登录 | 全球最大的Sencha中文资料,ExtJS中文教程,Ext中文教程...

这是我(作者David Fitch)的第一篇教程,希望能给大家带来帮助。感谢crafter在这篇帖子中的示例代码：

http://extjs.com/forum/showthread.php?t=26320

主页

假设您的主页是 index.asp, 它的结构如下:

显然，如果你想把它建立在自己的网站上，需要把上面的链接地址改成自己服务器上Ext的位置. 以下是 Login.js 的源代码。

Login.js

下面是 login.js. 这个东东搞定了所有的重活，对我来说，它涵盖了所有传统的用户验证元素。它建立了一个表单，将它渲染到一个弹出窗口，将它展示给用户，用ajax发送提交结果，然后根据用户输入是否正确来处理登录成功或失败的响应。Ext.onReady(function(){

Ext.QuickTips.init();

// Create a variable to hold our EXT Form Panel.

// Assign various config options as seen.

var login = new Ext.FormPanel({

labelWidth:80,

url:'login.asp',

frame:true,

title:'Please Login',

defaultType:'textfield',

monitorValid:true,

// Specific attributes for the text fields for username / password.

// The "name" attribute defines the name of variables sent to the server.

items:[{

fieldLabel:'Username',

name:'loginUsername',

allowBlank:false

},{

fieldLabel:'Password',

name:'loginPassword',

inputType:'password',

allowBlank:false

}],

// All the magic happens after the user clicks the button

buttons:[{

text:'Login',

formBind: true,

// Function that fires when user clicks the button

handler:function(){

login.getForm().submit({

method:'POST',

waitTitle:'Connecting',

waitMsg:'Sending data...',

// Functions that fire (success or failure) when the server responds.

// The one that executes is determined by the

// response that comes from login.asp as seen below. The server would

// actually respond with valid JSON,

// something like: response.write "{ success: true}" or

// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"

// depending on the logic contained within your server script.

// If a success occurs, the user is notified with an alert messagebox,

// and when they click "OK", they are redirected to whatever page

// you define as redirect.

success:function(){

Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){

if (btn == 'ok'){

var redirect = 'test.asp';

window.location = redirect;

}

});

},

// Failure function, see comment above re: success and failure.

// 如果登录失败，弹出对话框。

failure:function(form, action){

if(action.failureType == 'server'){

obj = Ext.util.JSON.decode(action.response.responseText);

Ext.Msg.alert('Login Failed!', obj.errors.reason);

}else{

Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);

}

login.getForm().reset();

}

});

}

}]

});

// This just creates a window to wrap the login form.

// The login object is passed to the items collection.

var win = new Ext.Window({

layout:'fit',

width:300,

height:150,

closable: false,

resizable: false,

plain: true,

border: false,

items: [login]

});

win.show();

});

Login.asp

这是处理登录的服务器脚本。这个非常简单的脚本展示了服务器的响应如何决定login.js执行哪个函数。这正是你访问数据库用户名/密码字段，进行验证，根据用户提供信息是否正确进行响应。

if request.form("loginUsername") = "f" then

response.write "{ success: true}"

else

response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"

end if

%>

Login.php<?php

$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";

if($loginUsername == "f"){

echo "{success: true}";

} else {

echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";

}

?>

Login.cfm

#result# Login.jsp

String result;

String loginUsername = request.getParameter("loginUsername");

if (null != loginUsername && loginUsername.length() > 0) {

if (loginUsername.equals("f"))

result = "{success:true}";

else

result = "{success:false,errors:{reason:'Login failed.Try again'}}";

} else {

result = "{success:false,errors:{reason:'Login failed.Try again'}}";

}

%>

Test.asp

.

Login.pl#!/usr/bin/perl -w

use strict;

use CGI qw/:standard/;

my $login = param() ? param('loginUsername') : '';

print "Content-type: text/plain\n\n";

print $login eq "f" ? "{success: false, errors: { reason: 'Login failed. Try again.' }}" : "{success: true}";

exit;

如果登录成功可以看到login.js会定位到Test.asp。

Recived from "http://extjs.com/learn/Tutorial:Basic_Login%28Chinese%29"