之前一直听说Extjs很强大,最近有点空就果断学习一下~
由于我主攻的是J2EE领域,所以这里就用jsp+Extjs来演示自己对Extjs的学习过程,按照惯例,第一个应用就来个HelloWorld吧。
第一步:下载Extjs
ExtJS 目前的最新版本是 4.2,我们可以从官方网站下载最新版本的Extjs。
下载地址:http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip
官网地址:http://www.sencha.com/products/extjs
下载完成以后,我们就得到了ExtJS 的源代码、API文档,以及示例内容。我们先将压缩包解压缩,然后就可以在浏览器运行解压文件夹下的index.html观看各种example。效果如下图:
第二步:新建项目,导入需要的文件
我使用的eclipse作为开发工具:
新建一个项目(我这里项目名为:Extjs-HelloWorld),然后在WebContent根目录下新建Extjs4.2文件夹,用来存放Extjs4.2的相关资源:
我们下载后解压的Extjs文件夹下有下图所示这么多的东西:
全部导入我们的项目显然是很庞大的,而有些不是我们需要的,所以我这里只导入需要的资源,如下图所示:
第三步:在页面测试
接下来我们要在页面中添加引用extjs给我们带来的效果。在使用Extjs的时候,我们必须要引用脚本和样式两部分。脚本的内容可以通过bootstrap.js来自动添加,而样式则需要我们手动的来添加了,例如我们要在项目中使用neptune样式(neptune 是在4.2中新增的样式,看上去比较现代一些,但不支持IE6),那么我们需要引入的文件如下:
<link href="./Extjs4.2/resources/css/ext-all-neptune.css" rel="stylesheet" /> <script src="./Extjs4.2/bootstrap.js"></script>
新建一个index.jsp页面,完整的页面代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ExtJs-HelloWorld</title> <link href="./Extjs4.2/resources/css/ext-all-neptune.css" rel="stylesheet" /> <script src="./Extjs4.2/bootstrap.js"></script> <script type="text/javascript"> function init() { Ext.MessageBox.alert("ExtJS", "Hello ExtJS"); } Ext.onReady(init); </script> </head> <body> </body> </html>
好吧,现在可以运行当前项目,你可以在浏览器中看到的效果如下:
到这里,第一个extjs4.2的应用已经完成了。
下面可以对Extjs进行本地化:
在我们保留的Extjs4.2文件中,有一个locale目录,我们保留了其中的 ext-lang-zh_CN.js 文件,这个文件是我们汉语的本地化文件,我们只需要添加该文件的引用,就能够轻松的实现ExtJS的本地化:
<script src="./Extjs4.2/locale/ext-lang-zh_CN.js"></script>
将以上这句代码加入到index.jsp页面中,然后刷新页面,效果如下图:
好吧,以上就是我第一个Extjs4.2的学习过程。。
相关推荐
在本实践项目“SpringMVC+ExtJs4.2实例”中,我们将深入探讨如何将SpringMVC框架与ExtJs4.2前端框架相结合,构建一个功能完善的Web应用程序。这个项目旨在展示如何利用这两个强大的技术栈来实现数据的动态交互和用户...
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
php+extjs4.2翻页搜索实例.php
标题 "nodejs+extjs4.2+mysql" 暗示了这是一个使用 Node.js、ExtJS 4.2 和 MySQL 数据库构建的项目。这个项目的核心是利用这些技术搭建了一个基本的框架,使得开发者可以方便地在此基础上添加自己的业务逻辑和功能。...
extjs4.2-2
这个"springmvc3+extjs4.2案例"是将两者结合,展示了如何在同一个项目中使用SpringMVC3作为后端控制层,与ExtJS4.2的前端MVC模式进行协作,构建出一个完整的Web应用程序。下面我们将深入探讨这两个技术以及它们在...
11.实现右键菜单的功能,自定义一个按钮 12.文章预览功能、修改文章功能 13.查看文章评审(重写分页组件的部分方法) 14.完善分页组件、查看文章评审后台功能 15.由菜单树操作右边的工作区域、完成管理员管理文章...
SSH+ExtJS4.2源码是一个典型的Java Web开发项目,结合了Spring、Hibernate和Struts2(SSH)三大框架,以及前端JavaScript库ExtJS4.2。这个项目可能是一个在线商城的应用,提供了完整的前后端交互功能。接下来,我们...
SpringMVC+ExtJS4.2是Web开发中一种经典的前后端组合,它们共同构建了高效、用户友好的企业级应用程序。在这个项目中,我们主要关注如何利用这两个框架实现用户管理的基本操作,包括增、删、改、查(CRUD)功能。 ...
这是一个基于Java技术栈,利用Spring、Struts2.3和ExtJS4.2构建的简单文件管理系统。系统功能涵盖文件的全面操作,如管理、分享、预览、评论以及上传和下载,同时包含了用户管理模块,确保了系统的交互性和安全性。 ...
ExtJS是一个用于构建交互式Web应用程序的前端框架,以其丰富的UI组件库、数据绑定能力和高性能而闻名。ExtJS 4.0.0版本相比之前的版本,在性能、API和组件库上都有显著的提升,提供了更多的组件和更精细的控制选项。...
EXTjs4.2中文版是EXTjs框架的一个重要版本,EXTjs是一个强大的JavaScript库,专门用于构建用户界面,尤其适用于创建富互联网应用程序(Rich Internet Applications,简称RIA)。它以其组件化的设计理念,丰富的UI...
ExtJS 4.2 component - Field-Money
总结来说,"extjs4.2目录框架"结合"spring+springmvc+mybatis",提供了一个全面的Web应用开发解决方案,从后端的数据处理到前端的用户交互,都有一套成熟的技术栈支持。这种框架有利于构建大规模、高性能的企业级...
在压缩包中的`ext-4.2.1.883`文件可能包含了ExtJS 4.2.1的源代码和资源文件,这将有助于你深入研究每个组件的内部工作原理,调试代码,甚至自定义和扩展框架功能。通过结合书籍内容和源码学习,将能更全面地掌握...
ExtJs 是一个基于 JavaScript 的开源框架,用于创建复杂的前端应用程序。在ExtJs 4.2版本中,`Window`组件是一个非常基础且重要的UI组件,它为开发者提供了一个灵活的弹出窗口解决方案。通过合理的配置,可以轻松...
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程