<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <!-- 下面是三个必须引入的文件 --> <link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script src="../../build/ext-all.js"></script> <script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var form = Ext.create('Ext.form.Panel',{ renderTo: 'form',frame: true,title: 'Login',width: 300,height: 250,layout: 'form',bodyPadding: 20,fieldDefaults: { labelSeparator: '：',labelWidth: 50,labelAlign: 'left' },items: [{ fieldLabel: '姓名',xtype: 'textfield',name: 'username' },{ fieldLabel: '密码',inputType: 'password',//加上该属性后，输入框变为密码框 name: 'password' }],buttons: [{ text: '登录',handler: login }] }); function login(){ var formValues = form.getForm().getValues();//获取表单中的所有字段的值 //分别获取username和password的值 var username = formValues['username']; var password = formValues['password']; var config = { url: 'login.PHP',//请求的URL params: {//请求参数 username: username,password: password },method: 'post',//指定post请求 callback: function(options,success,response){//请求完成的回调函数 Ext.Msg.alert('message',response.responseText); } }; Ext.Ajax.request(config);//发送请求 } }); </script> </head> <body> <div id="form"></div> </body> </html>在浏览器中的效果如下图：
点击登录按钮后，会发送请求给login.PHP页面，该页面的代码如下：
<?PHP $username = $_POST["username"]; $password = $_POST["password"]; if($username == 'zhangsan' && $password == '123456'){ echo '登录成功'; }else{ echo '登录失败'; } ?>在这个页面中，只是简单的判读了用户名和密码如果是zhangsan和123456，就返回登录成功的消息，否则返回登录失败的消息
