ExtJs入门测试用例

最新推荐文章于 2016-10-24 19:08:48 发布

xjh2011xjh

最新推荐文章于 2016-10-24 19:08:48 发布

阅读量1.4k

点赞数

分类专栏： Java ExtJS 文章标签： Java ExtJS

本文链接：https://blog.youkuaiyun.com/xjh2011xjh/article/details/26527947

版权

Java 同时被 2 个专栏收录

42 篇文章

订阅专栏

ExtJS

1 篇文章

订阅专栏

本文介绍了ExtJS作为前端AJAX框架的基本特性，包括其丰富的功能、强大的表格控件，如单选、多选、排序、编辑等功能，并展示了测试用例，如编写jsp页面进行用户登录交互，验证其在实际应用中的操作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。

二、特点

1）功能丰富，无人能出其右。
2）无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
3）单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。
4）自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。
5）再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。
6）其实从ext3开始就支持各种方式的统计，且有控件支持excel导出。

三、测试用例

1. 编写渲染ExtJs控件的jsp页面extjsTest.jsp

<%@ page language="java" contentType="text/html;charset=gbk" pageEncoding="gbk"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
    <head>
	<title> ExtJs测试用例 </title>
        <link rel="stylesheet" type="text/css" href="<%=basePath%>/js/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="<%=basePath%>/js/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="<%=basePath%>/js/ext/ext-all.js"></script>
        <script type="text/javascript">
		  Ext.onReady(function(){
			   //创建表单面板对象
			   var form1 = new Ext.form.FormPanel({
					   renderTo:"loginForm", //要渲染的div
					   labelWidth: 75, // label settings here cascade unless overridden 
					   method:'POST',
					   title: '登录窗口',
					   bodyStyle:'padding:5px 5px 0',
					   width: 300,
					   defaults: {width: 200},
					   defaultType: 'textfield',
					   //实现非AJAX提交表单一定要加下面的两行！
					   onSubmit: Ext.emptyFn,
					   submit: function() 
					   {
						   this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址
						   this.getEl().dom.submit();
					   },
					   
					   items: [{
						   fieldLabel: '用户名',
						   id: 'username',       
						   name: 'name',     //提交到服务端的参数名
						   allowBlank:false,
						   blankText : "用户名不能为空",
						   width:150
						   },{
						   fieldLabel: '密码',
						   blankText : "密码不能为空",
						   id: 'password',       
						   name: 'pwd',     //提交到服务端的参数名
						   allowBlank:false,
						   minLength : 6,
						   width:150,
						   inputType:'password' //类型为password
					   }
					   ],
					   buttons: [
								{
								   text: '登录',
								   type:'button',
								   id:'login',
								   handler: function()
								   {
										   //表单验证通过
										   if (form1.form.isValid())
										   {    
											   //提交form
											   form1.form.submit();
										   }    
								   }
								},
								{
								   text: '重置',
								   type:'reset',
								   id:'clear',
								   handler: function()
								   {
										form1.form.reset();
								   }
							   }
					   ]
			   
			    }); 
				
				//form1.show();    
	
				//将form添加window中
				var window = new Ext.Window({
					title: '用户登录',
					width: 300,
					height:180,
					layout: 'fit',
					plain:true,
					bodyStyle:'padding:5px;',
					buttonAlign:'center',
					items: form1
				});
				
				//显示window
				window.show();  
					
			});
		  
 </script>
    </head>
    <body>
		<h3>第一个ExtJs测试用例</h3>
        <div id="loginForm"></div>
    </body>
</html>

2.编写处理extjs发送的表单数据请求页extjsGetter.jsp

<%@ page contentType="text/html;charset=gbk"  pageEncoding="gbk" %>

<!doctype>
<html>
	<head>
		<title>处理extjs发来的请求</title>
	</head>
	
	<body>
		<%
			String username = request.getParameter("name");
			String password = request.getParameter("pwd");
			out.println("用户名："+username+", 密码："+password);
		
		%>
	</body>
</html>

3.测试

进入extjsTest.jsp页面，在弹出的extjs对话框中输入用户名和密码，如下图：