下载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. LINQ Group By操作

    在上篇文章 .NET应用程序与数据库交互的若干问题 这篇文章中,讨论了一个计算热门商圈的问题,现在在这里扩展一下,假设我们需要从两张表中统计出热门商圈,这两张表内容如下: 上表是所有政区,商圈中的餐饮 ...

  2. Leetcode 笔记 100 - Same Tree

    题目链接:Same Tree | LeetCode OJ Given two binary trees, write a function to check if they are equal or ...

  3. 自动添加Linux登录账户，并授予sudo权限

    #!/bin/bash USER=test PASS=$USER GROUP=root HOME=/data/home/$USER # if user not exist if [[ $(cat /e ...

  4. 我的第一个python程序--给2.x的print代码加上括号

    最近想学习一门脚本语言,综合考虑,选择了python. 花了几天时间看完了 简明 Python 教程 ,想着应该写点什么东西才好,刚好我使用的是3.x版本,以前好多2.x的代码都直接报错,尤其是pri ...

  5. 理解Session与Cookie

    写在前面的话:Session和Cookie是非常有意思的两个概念,对于两者的管理可以处理的很复杂,但是无论如何,理解Session和Cookie的基本概念和发明初衷,对于问题的解决,大有裨益. === ...

  6. .NET Core下的日志（2）：日志模型详解

    NET Core的日志模型主要由三个核心对象构成,它们分别是Logger.LoggerProvider和LoggerFactory.总的来说,LoggerProvider提供一个具体的Logger对象 ...

  7. SQL Server-聚焦EXISTS AND IN性能分析（十六）

    前言 前面我们学习了NOT EXISTS和NOT IN的比较,当然少不了EXISTS和IN的比较,所以本节我们来学习EXISTS和IN的比较,简短的内容,深入的理解,Always to review ...

  8. 如何给现有的PDF文件添加页码

    如何给现有的PDF文件添加页码 之前我写了如何打印PDF文件,有人qq问我怎样在打印时给PDF文件添加页码,的确,给PDF文件添加页码,可以帮助我们区分纸质档的PDF文件页面的先后顺序,方便我们对它的 ...

  9. 使用OWIN作为WebAPI的宿主

    前言 好吧,也没什么好说的,就是个技术的总结,直接生成MVC的项目,感觉好重,虽然各种东西很全 ...也许我是处女座? - -, OWIN呃,这里我就不解释了,自己也是一知半解,可以参考 Open W ...

  10. ASP.NET Core 中文文档 第四章 MVC（3.6.2 ）自定义标签辅助类（Tag Helpers）

    原文:Authoring Tag Helpers 作者:Rick Anderson 翻译:张海龙(jiechen) 校对:许登洋(Seay) 示例代码查看与下载 从 Tag Helper 讲起 本篇教 ...