下载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小程序就写完了，怎么样？很简单吧~

运行结果:

在项目中使用ExtJS的更多相关文章

  1. ExtJS初接触 - 在项目中使用ExtJS

    ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...

  2. ExtJS初探：在项目中使用ExtJS

    注意:本文写作时间是 2013 年,所讲的 ExtJS 如今早已过时,请勿学习! -------------------------------- 今天ExtJS官网发布了ExtJS最新正式版4.2. ...

  3. Extjs 项目中常用的小技巧，也许你用得着(2)

    接着来,也是刚刚遇到的 panel怎么进行收缩 collapsible: true, 这会panel就会出现这个 点这个就可以收缩了 panel怎么随便拉伸,也就是让那个小黑三角出现 split: t ...

  4. Extjs 项目中常用的小技巧，也许你用得着(1)

    我在项目中遇到的一些知识点: 1.在GridPanel中显示图片,效果 对应的代码实现 { text: '是否启用', width: 80, // xtype: 'checkcolumn', data ...

  5. 动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：

    移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...

  6. extjs6整合到web项目中

    最近有一个项目需要应用extjs作为前端界面,因此研究了一下如何将extjs 6引入到项目中.以下是操作步骤 extjs6下载地址 extjs 6有gpl版本的,下载地址https://www.sen ...

  7. VS项目中使用Nuget还原包后编译生产还一直报错？

    Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...

  8. ABP项目中使用Swagger生成动态WebAPI

    本文是根据角落的白板报的<使用ABP实现SwaggerUI,生成动态webapi>一文的学习总结,感谢原文作者角落的白板报. 1 安装Swashbuckle.core 1.1 选择WebA ...

  9. iOS 之项目中遇到的问题总结

    昨天去一家公司面试,面试官问了我在项目开发中遇到过哪些问题,是什么引起的,怎样解决的? 当时由于有点小紧张只说出了一两点,现在就来好好总结一下. 问题: 1.两表联动 所谓的两表联动就是有左右两个表格 ...

随机推荐

  1. UML类图（上）：类、继承和实现

    面向对象设计 对于一个程序员来说,在工作的开始阶段通常都是别人把东西设计好,你来做.伴随着个人的成长,这个过程将慢慢变成自己设计一部分功能来实现,自己实现.如果要自己设计,无论是给自己看,还是给别人看 ...

  2. Running Dubbo On Spring Boot

    Dubbo(http://dubbo.io/) 是阿里的开源的一款分布式服务框架.而Spring Boot则是Spring社区这两年致力于打造的简化Java配置的微服务框架. 利用他们各自优势,配置到 ...

  3. Java线程池解析

    Java的一大优势是能完成多线程任务,对线程的封装和调度非常好,那么它又是如何实现的呢? jdk的包下和线程相关类的类图. 从上面可以看出Java的线程池主的实现类主要有两个类ThreadPoolEx ...

  4. 使用python实现短信PDU编码

    前几天入手一个3G模块,便倒腾了一下.需要发送中英文混合短信,所以采用PDU模式(不了解google ^_^). 最大问题当然就是拼接PDU编码(python这么强大,说不定有模块),果不其然找到一个 ...

  5. 前端进阶试题（css部分）

    一.css 40分 1. 什么是盒模型? 答: 2. Doctype的几种类型? 答:①.过渡的:②.严格的:③.框架的 更多详细介绍参考:资料 3. 如何布局左不动右边自适应的两列布局? 答:两种简 ...

  6. Windows下PowerShell监控Keepalived

    一.背景 某数据库服务器为CentOS,想要监控Keepalived的VIP是否有问题,通过邮件进行报警,但这台机器不能上外网,现在只能在Windows下通过PowerShell来完成发邮件预警. 二 ...

  7. $.extend({},defaults, options) --（初体验三）

    1.$.extend({},defaults, options) 这样做的目的是为了保护包默认参数.也就是defaults里面的参数. 做法是将一个新的空对象({})做为$.extend的第一个参数, ...

  8. 1. SVM简介

    从这一部分开始,将陆续介绍SVM的相关知识,主要是整理以前学习的一些笔记内容,梳理思路,形成一套SVM的学习体系. 支持向量机(Support Vector Machine)是Cortes和Vapni ...

  9. Android消息传递之EventBus 3.0使用详解

    前言: 前面两篇不仅学习了子线程与UI主线程之间的通信方式,也学习了如何实现组件之间通信,基于前面的知识我们今天来分析一下EventBus是如何管理事件总线的,EventBus到底是不是最佳方案?学习 ...

  10. 表单reset无法重置hidden的解决方案

    方法一:用text代替hidden,设置text隐藏 <input id="id" name="id" style="display: none ...