Myeclipse、eclipse 筹建 ext 环境

Myeclipse、eclipse 搭建 ext 环境

我已经上传了ext2.2或3.0的sdk开发包(spket-1.6.18.zip)，自己下载。

安装好了MyEclipse后关闭它，开始配置ext环境：步骤如下：

1. 解压spket-1.6.18.zip

2.拷贝spket-1.6.18\eclipse\features目录下"com.spket.ui_1.6.18","com.spket.xml.external_2.8.0"的插件包粘贴到MyEclipse安装目录下：E:\MyEclipse 6.0\eclipse\features

3.拷贝spket-1.6.16\eclipse\plugins目录下的插件包粘贴到MyEclipse安装目录下：E:\MyEclipse 6.0\eclipse\plugins

4.启动MyEclipse ，查看是否正确配置ext插件环境，点击window---preferences，展开spket目录下，点击java Script Profiles ，以上工作完成后，可以看到extjs sdk 的6个开发包。

5.选择Firefox点击new，弹出一个对话框，输入extjs

6.选择extjs点击 add Library，弹出一个对话框，选择ExtJs，点击确定

7.解压ext-2.2.zip，选择ExtJs 点击 add File，浏览解压后的文件找到

\ext2\source\ext.jsb并导入，同时把所有的复选框选中，然后选中自己定义extjs节点，点击右边的default

8.注意一定要选择：defalut.重启ide

测试ext

新建web项目—新建jsp文件：test.jsp

<%@page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8"></meta>
    <title>测试extjs</title>
    

   <!--  Include Ext2.2  -->
    <script type="text/javascript" src="<%=APP %>/js/EXT2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<%=APP %>/js/EXT2.2/ext-all-debug.js"></script>
    <script type="text/javascript" src="<%=APP %>/js/EXT2.2/ext-lang-zh_CN.js"></script>

    <!-- Include Ext2.2 stylesheets here: -->
	<link rel="stylesheet" type="text/css" href="<%=APP %>/js/EXT2.2/resources/css/ext-all.css"></link>
	<%if(request.getHeader("USER-AGENT").indexOf("MSIE")<0){ //加入其它浏览器的字体补丁%>
		<link rel="stylesheet" type="text/css" href="<%=APP%>/js/EXT2.2/resources/css/ext-all-patch.css"></link>
		<%}%>
 	
 	<!-- 自定义文件 -->
 	 <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript>
    </script>
</head>
<body>
	<div id="grid-example" ></div>
</body>
</html>

新建：test.js文件

Ext.onReady(function(){
	var myForm = new MyForm();
	myForm.layout(); 
});
function MyForm (){
	Zhc.init();
	//parent.document;
	
	this.ButtonDe =new Ext.Button({	
			text:'删除',
			id:'ButtonDe',
			width:200,
			iconCls:'del'
	});
	
	this.ButtonBC =new Ext.Button({	
			text:'保存',
			id:'ButtonBC',
			width:200,
			iconCls:'save'
	});
	
	this.tbar = [
		this.ButtonDe,
		'-',
		this.ButtonBC
	];

具体业务代码请详细阅读Ext API 中文开发文档，并结合网络资源进行学习！

Struts2.0相关配置说明

<!-- 指定被struts2处理的请求后缀类型。多个用逗号隔开

<!-- 指定由spring负责action对象的创建

-->

Struts与extjs交互：

String jsonString="{\"success\":true,\"roleList\":[{\"keyId\":\"402880\",\"styleId\":6,\"styleName\":\"分类\",\"listUrl\":\"/g3/dyn/templet/fl/defaultList.jsp\",\"infoUrl\":\"/g3/dyn/templet/fl/defaultInfo.jsp\"}],\"totalCount\":1,\"info\":\"找到符合条件的数据!\"}";

HttpServletResponse response = ServletActionContext.getResponse();

HttpServletRequest request=ServletActionContext.getRequest();

jsonRequest=request.getParameter("json");

System.out.println("接受前台传来的json:"+jsonRequest);

response.reset();//重新设置response

response.setContentType("text/html");

response.setCharacterEncoding("utf-8");

response.getWriter().write(jsonString);

由于extjs本身封装json接受数据方式，必须在交互时封装json格式数据。

Myeclipse、eclipse 筹建 ext 环境

相关推荐