文档章节

ExtJS 4.2 系列教程(1):Hello ExtJS4

hanfeng
 hanfeng
发布于 2014/06/10 16:19
字数 267
阅读 1903
收藏 1

1、下载ExtJS

http://www.sencha.com/

我下载的版本是 ext-4.2.1.883

2、使用Eclipse创建Dynamic Web Project ,不懂的自行google(今天下午彻底挂了)or 百度

3、引入ExtJS库

  • 复制ext目录下的resources文件夹到WebRoot的static路径下,里面包含ext提供的主题和css文件

  • 复制bootstrap.js、ext-all.js、ext-all-debug.js三个文件

  • 复制locale中ext-lang-zh_CN.js中文语言包(可选)

4、新建index.jsp文件

在head引入上述Extjs库

<link rel="stylesheet" type="text/css" href="static/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="static/ext/bootstrap.js"></script>
<script type="text/javascript" src="static/ext/locale/ext-lang-zh_CN.js"></script>

5、修改bootstrap.js文件

找到

  document.write('<script type="text/javascript" charset="UTF-8" src="' + 
        path + 'ext-all' + (isDevelopment ? '-dev' : '') + '.js"></script>');

修改为:

  document.write('<script type="text/javascript" charset="UTF-8" src="' + 
        path + 'ext-all' + (isDevelopment ? '-debug' : '') + '.js"></script>');

6、在index.jsp的body中编写测试用例

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.MessageBox.alert("hello","Hello,ExtJS4");
	});
</script>

7、部署到Tomcat服务器,运行 http://localhost:8123/ext/index.jsp

© 著作权归作者所有

共有 人打赏支持
hanfeng
粉丝 19
博文 48
码字总数 36874
作品 0
福州
高级程序员
私信 提问
ExtJS4.2学习 php版(三)

我们先定义一个Person类 ExtJS4采用define方法 Ext.define("My.Person",{ name : "", constructor : function(name) {this.name = name;}, say : function() {var me = this;alert("My name......

lbc19920615
2014/03/31
0
0
ExtJS4.2学习 php版(二)

ExtJS使用命名空间 和 自己构建类的方法 写出了许多可以重用 高效的方法 所以使用ExtJS 类必须了解。 ExtJS4对新的类系统进行了大量的比较彻底的重构,新的架构建立在写在Extjs4库中每一个单...

lbc19920615
2014/03/31
0
0
Extjs 工具条(toolbar)

在extjs 中工具是一个比较重要的组件,工具条一共有几个小组件? 下面就是工具条所有组件。 显示文字Ext.toolbar.TextItem Extjs4 空间距 Ext.toolbar.Spacer Extjs4 分隔条Ext.toolbar.Sep...

Tity
2014/03/31
1K
0
Spring MVC 使用Json格式传输数据,XXX.xxx 的嵌套数据无法解析

后台使用的是 Spring MVC RESTful + 前台 ExtJs4 REST数据代理,交互格式是JSON,使用Jackson进行数据解析。现在出现的问题是后台只能接受 类似下面的纯Json数据: 类似这种这种数据格式: ...

Mr_Kail
2014/08/10
2.7K
4
ExtJs4.1目录结构介绍和使用说明

一、在做ExtJs开发之前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1。此版本相对于之前的版本目录结构发生了一些变化,没有了adapter目录, 目录结构如下 文件/文件夹名的作用:...

Junn
2013/01/17
0
1

没有更多内容

加载失败,请刷新页面

加载更多

IDE 插件新版本发布,开发效率 “biu” 起来了

近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明。 本地应用一键部署到任何...

阿里云官方博客
22分钟前
1
0
我是怎样和Linux系统结缘并通过红帽RHCE认证的

我高考完当时就是选择的计算机科学与技术专业,上大学以后联想到的和计算机相关的就只有写代码,开发,网站,网页设计,就没有其他的了,当时学习写代码也都是在Windows上,什么C#、C++之类的...

linuxprobe16
23分钟前
0
0
Coding and Paper Letter(四十四)

资源整理。 1 Coding: 1.Rstudio2019年会“机器学习应用”的幻灯片,代码和数据 rstudio conf 2019 2.R语言包sparkxgb,Spark上XGBoost的R接口。 sparkxgb 3.自动SQL注入和数据库接管工具。 ...

胖胖雕
55分钟前
3
0
Ubuntu最新的主要操作系统放弃32位支持?

现在是2018年,2019年即将到来——64位处理器已经成为主流很长一段时间了。如果你仍然使用32位的电脑,那么是时候把它扔进垃圾箱了。 我为所有基于Linux的操作系统维护者感到自豪,他们有勇气...

Linux就该这么学
56分钟前
2
0
Fundebug发布Vue插件,简化BUG监控接入代码

摘要: 代码越短越好! 我们发布了fundebug-vue插件,可以简化Vue框架接入Fundebug的代码。 Vue如何接入Fundebug 1. 安装fundebug-javascript与fundebug-vue npm install fundebug-javascrip...

Fundebug
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部