zoukankan html css js c++ java

在项目中使用ExtJS

下载ExtJs 5.1.0后解压得如下图的目录结构:

下面来搭建ExtJs的开发环境。

1. MyEclipse中新建Web Project，目录结构如下:

注意: 项目中extjs5.1.0目录的文件均来自ExtJs中build文件夹下，并且引用了crisp主题样式，读者也可引用其他 theme。

scripts目录下的script.js用来编写ExtJs代码，而ExtJs的呈现载体为index.jsp，下面让我们来看下index.jsp做了什么工作。

index.jsp：

<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/ext-all.js"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/ext-theme-crisp.js"></script>
  	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />  
  	
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/script.js"></script>
  </head>
  
  <body>
  </body>
</html>

注意: index.jsp引入了extjs5.1.0的三个文件: ext-all.js，ext-theme-crisp.js 和 ext-theme-crisp-all.css

同时读者注意到，我们还引入了script.js，该文件将实现第一个ExtJs的小程序: "Hello World"，让我们赶快来看下~

script.js：

Ext.onReady(function() {   
	Ext.Msg.alert('Information','Hello World, LvSantorini');  
});

到这里，第一个ExtJs小程序就写完了，怎么样？很简单吧~

运行结果:

查看全文

相关阅读:
关于工作中Git相关的总结
 浅谈MySQL的优化
 由内搜推送思考Kafka 的原理
 SOA和微服务架构
 Centos7.2 搭建Lamp服务器以及迁移WordPress个人博客详细过程
 MyISAM和InnoDB索引实现区别
 图解高内聚与低耦合
 图解Java常用数据结构(一)
Java源码安全审查
 Java高并发之锁优化

原文地址：https://www.cnblogs.com/dingjiaoyang/p/6251498.html