Ext 使用指南-用户基本登录

最新推荐文章于 2021-05-21 11:02:06 发布
最新推荐文章于 2021-05-21 11:02:06 发布
阅读量772 收藏
点赞数
文章标签： ext login function 服务器 redirect stylesheet

翻译自http://extjs.com/learn/Tutorial:Basic_Login；作者：David Fitch

1.引ext相关源文件：
假设首页是index.asp：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="/igs/includes/ext/resources/css/ext-all.css">	
	<script type="text/javascript" src="/igs/includes/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="/igs/includes/ext/ext-all.js"></script>
	<script type="text/javascript" src="login.js"></script>	
	</head>
	<body></body>
</html>

注：根据ext路径相应修改上面src路径。

2.看login.js
login.js 是用户登录的核心部分，它在弹出窗口内建了一个form面板，显示在客户端，form使用ajax提交数据，控制提交成功和失败

代码：
Ext.onReady(function(){
    Ext.QuickTips.init();
 
 // 创建一个 FormPanel变量，配置选项如下
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'login.asp', 
        frame:true, 
        title:'Please Login', 
        width:230, 
        padding:200, 
        defaultType:'textfield',
	monitorValid:true,
 
	//配置用户名，密码两个文本框 
	// "name"属性定义要传到服务器端的变量名.
        items:[{ 
                fieldLabel:'用户名', 
                name:'loginUsername', 
                allowBlank:false 
            },{ 
                fieldLabel:'密码', 
                name:'loginPassword', 
                inputType:'password', 
                allowBlank:false 
            }],
 
	// 定义botton按钮     
        buttons:[{ 
                text:'Login',
                formBind: true,	 
                // 当用户点击按钮触发函数 
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Connecting', 
                        waitMsg:'Sending data...',
 
`			// 传loginUsername,loginPasseord 到服务器端的url
                        url:'login.asp',
 
			// 根据服务器端返回值触发success或failure函数.
			//由login.asp 的response 决定执行sucess或failure函数
			//服务器端返回有效的json值：例如：response.write "{ success: true}"
 			//或者response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
			//如果验证成功，弹出对话框，点击“OK”，将转到登陆成功后定义的页面：test.asp

 
                        success:function(){ 
                        	Ext.Msg.alert('Status', 'Login Successful!.', function(btn, text){
				   if (btn == 'ok'){
		                        var redirect = 'test.asp'; 
		                        window.location = redirect;
                                   }
			        });
                        },
		     //失败函数，如果登陆失败，弹出错误

                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
			    //Ext.util.JSON.decode 把服务器端的json数据转换成javascript对象
                                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 + "abcd"); 
                            } 
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            }] 
    });
 
 
	// 创建一个窗口，把 formPanel放在这个窗口里     
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        items: [login]
	});
	win.show();
});
 
Login.asp:
//服务器端代码，如果用户名是"f",用户登陆成功，否则，用户登陆失败
<%
 
if request.form("loginUsername") = "f" then
	response.write "{ success: true}"
else
	response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
end if
 
%>
ht8206
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ext使用ext使用ext使用ext使用
06-05
ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ex
ext-4.0.7-gpl
02-29
这个版本是4.0.7，而且它带有GPL（GNU General Public License）许可，这意味着该软件是开源的，允许用户自由地使用、修改和分发代码。 描述中的“ext-4.0.7”，“ext-4”，以及“ext4”可能是因为“ext4”被误用，...
Ext用户登录
hongguanzh的专栏
05-14 200
Ext.onReady(login); //登录页面 function login(){ //初始化quick实例 Ext.QuickTips.init(); var loginname=new Ext.form.TextField({ allowBlank:false, fieldLabel:'用户名', maxLength:12, ...
Ext中注册新用户
hongguanzh的专栏
05-14 123
function addStu(){ //初始化QuickTips实例。 Ext.QuickTips.init(); var stuname=new Ext.form.TextField({ msgTarget:'qtip', fieldLabel:'用户名', allo...
ext使用
qq_44537625的博客
05-21 1991
1.https://www.sencha.com下载Ext JS库文件(或者使用cdn调用) 2.使用Ext.onReady（）方法进行调用，用Ext.create（）创建对象，Ext.Panel是Ext JS中用于创建面板的预定义类，renderTo是此面板必须呈现的元素，高度和宽度属性用于给定面板的自定义尺寸，标题属性是向面板提供标题，html属性是要在面板中显示的html内容 3.主要就是用ext封装的js进行元素创造、添加，创建的东西可以当作组件，组件也可以在其他组件（元素）里面使用。 常见
Ext使用总结（一）
wxg6203的专栏
06-09 1130
  一、获取元素（Getting Elements） 1.Ext.get var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注：享元模式（Flyweight De...
Ext开发指南
03-08
Ext开发指南是一本专注于介绍如何使用ExtJS框架进行Web应用程序开发的专业资料。ExtJS是一个流行的JavaScript库，用于构建用户界面，特别是企业级的富互联网应用（RIA）。它提供了丰富的组件库，包括表格、树形视图...
JavaScript的Ext JS框架中的GridPanel组件使用指南
11-22
本指南将深入介绍如何使用GridPanel，包括基本配置、数据模型(Model)、数据存储(Store)、以及高级特性如数据分组和分页。 1. 最简单的Grid Panel Grid Panel是展现数据的关键组件，可以实现数据的显示、排序、分组...
WINDOWS程序员使用指南(二)----MICROSOFT基本类库
02-29
本指南将深入探讨MFC的核心概念和关键组件，帮助你更好地理解和使用这个强大的工具。 1. MFC的结构与设计原则： MFC基于C++的面向对象特性，遵循设计模式如单例、工厂、观察者等。它将Windows API中的窗口、消息、...
Ext Js权威指南全套（1-3）
06-12
《Ext Js权威指南》系列书籍全面地涵盖了EXTJS的核心概念和技术，帮助读者深入理解并掌握EXTJS的开发。 该套书分为三部分，从基础到高级，逐步深入EXTJS的世界： 1. **EXTJS基础**：这部分主要介绍EXTJS的基本架构...
Ext入门(初次使用步骤)
fly_to_sky的专栏
03-30 1875
Ext入门      Ext是基于javscript脚本语言的一种编程框架，主要用于创建（B/S）客户端用户界面，借助与本身自带的Ajax框架的优势，撇开了对后台编程语言的依赖性。同时，客户端程序与服务器程序达到一种完全的分离，彼此之间可以相互独立的进行开发及维护。       本次要做的工作有：1.Ext库的部署Ext库下载地址：http://download.csdn.
ext6使用的一些笔记（转）
强哥的博客
11-08 3137
记性不好的人啊，还是写下来吧。 安装 安装senchacmd 安装ruby 下载ext.js,这里是ExtJS 6.0.0 GPL开源版。吐个槽，文档里总是会提到sdk，然后后面我猜发现sdk指的就是下载下来的压缩包，我那心情啊。 sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app 示例：sencha
extjs的简单使用
九门宁生
01-22 2526
ext下载地址：http://extjs.org.cn/node/515 当前下载的最新版本为ext-4.0.7-gpl.zip，解压之后文件目录结构如下图所示： 　　文件目录主要资源说明： 　　1、builds目录是ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。 　　2、docs目录是ExtJS的文档，其中最重要的是ExtJS的API。 　　3、
谈谈Ext JS的组件——布局的使用方法
weixin_34033624的博客
06-24 190
概述 在Ext JS中，包含两类布局：组件类布局和容器类布局。由于有些组件是有不同的组件组合而成的，如字段就由标题和输入框构成，他们之间也是存在布局关系的，而这就需要组件类布局来处理组件内自己特有的布局关系。如果我们不定义自己的组件，基本不需要使用到组件布局，知道就行了。本文主要介绍的是容器类布局，因为这个在开发中是必定会使用到的。 注意：在Ext JS中，字段有两层意思...
ExtJS4 Ext用法汇总
祥子的博客
08-30 867
Ext单例工具类用法汇总： Methods: 1、Ext.widget( [String name], [Object config]) : Object     参数：name:xtype名称；config:配置对象     返回：对象     功能：根据xtype或config配置对象，创建widget 2、Ext.require( String/Array
Ext JS 6开发实例（三） ：主界面设计
weixin_33825683的博客
05-26 426
在上文中，已经将CMD创建的应用程序导入到项目里了，而且也看到默认的主界面了，今天的主要工作就是修改这个主界面，以符合项目的需要。除了设计主界面，还有一些其他的东西需要配置一下。 添加本地化包 打开app.json文件，找到requires，代码如下： "requires": [ "font-awesome" ], 以上代码说明项目默认已经...
ExtJS教程（3）--- Ext中类的使用
jaune162的专栏，最新动态请关注：https://jaune162.blog
07-06 7350
本章仅仅介绍Ext中类的基础知识，一些高级知识会在以后的章节中穿插介绍
ext 简单使用
zs博客
04-17 589
ext  是什么呢？ s ext能干什么？ ext  的优点？
extjs的Ext.define()函数的用法以及注意点。
看不过的黑工坊
10-14 5971
译自：http://docs.sencha.com/extjs/4.2.3/#!/api/Ext define( className, data, [createdFn] ) : Ext.Base Defines a class or override. A basic class is defined like this: Ext.define('My.aweso
阿里云服务器使用手册for linux.pdf
11-29
阿里云服务器使用手册for linux.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值