一 、要求
1, extjs4虽然支持所有主流浏览器,但是开发过程还是建议使用Google Chrome10+,Apple Safan5+ Firefox4+。
2,服务器
官方文档强烈建议使用web Server打开extjs4.0 sdk,否则一直处在loading状态,尽管有XHR可以跨过浏览器限制。本人采用的tomcat6.0,将extjs4.0 sdk解压后放在webapp下面,然后在IE里面打开,就可以看到帮助文档了。
3,应用工程结构
虽然不是必须,但是EXTJS4.0建议采用如下开发结构,从而使用工程易于组织和维护。
- appname
- app
- namespace
- Class1.js
- Class2.js
- ...
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
-
appname
工程的根目录,包含所有的源文件。
-
app
:包含所有的类文件
-
extjs
:包含 Ext JS 4 SDK 文件
-
resources
:CSS,图片,JSON等资源文件
index.html:HTML文档的入口点
-
app.js
:包含应用程序的所有业务逻辑
二,Hello extjs---第一个extjs程序
1,在webapp下面建文件荚 helloext,helloext下面再建一个extjs文件,将extjs4.0 sdk解压到extjs下面。目录如下:
- helloext
- extjs
- app.js
- index.html
用editplus打开index.html,输入以下内容:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
说明:
-
extjs/resources/css/ext-all.css
样式信息
-
extjs/ext-debug.js
:extjs核心类库最小集
-
app.js
:应用程序代码
在浏览器输入http://localhost:8080/helloext/index.html,看看效果吧。
三,动态加载特性
上例子中,Ext.create
实例化了 一个Ext.container.Viewport
. 当Ext.create调用的时候,extjs加载器将会先检查是否定义了Ext.container.Viewport
对象,如果没有定义,它将会首先加载包含Ext.container.Viewport
.的js文件。程序将一直等着Ext.container.Viewport成功加载。这将导致一点延时,在Ext.application前加入下面这行代码可以解决这个问题:
Ext.require('Ext.container.Viewport');
它可以保证包含
Ext.container.Viewport的文件在应用运行前加载。
四,如何引用extjs库
在extjs sdk中包括以下文件:
-
ext-debug.js
- 调试用,包含extjs运行的最小核心类库
-
ext.js
- :与ext-debug.js
一样,只不过是运行时用。
-
ext-all-debug.js
-包含整个extjs类库,开发时用。
-
ext-all.js
- 运行时用,但不建议直接包括这个文件,因为很多类一般用不到。
分享到:
相关推荐
windows下Extjs开发环境搭建说明,利用Spket实现智能提示,及第一个HelloWorld的开发说明
ExtJS开发环境搭建(Eclipse)
我也是初学,把自己的学习过程记录下来,供大学参考。 2015年最新的搭建MyEclipse10+Spket+ExtJS的开发环境介绍
搭建好的EXTJS和SSH环境
Extjs之Eclipse及spket的开发环境的搭建
ExtJS6.0的环境搭建,和Eclipse集成开发,JAVAWEB工程
此压缩包中,包含ExtJs4.0类库,spket破解版,以及Myeclipse下ExtJs开发环境的搭建,和一个用ExtJs写的HelloWorld,相信有了它,你可以进行基础开发了
最近有些工作上要利用extjs库来做一些东西,最好的ide就是spket IDE 一个非常好js编辑器,可以设置相应的js库,从而得到非常友好的代码提示。 随便工作的展开,越来越多同事问我要怎么设置才能得到ext的代码提示,...
简单入门培训包括环境搭建,配置,开发示例。
本教程从Extjs5的开发环境搭建开始,讲解了Extjs5的项目结构(包括核心文件的作用),Extjs类的一些基本概念,布局、事件、MVVM和MVC架构、路由器,数据绑定等的概念和实际使用,同时讲解了开发中常用的extjs UI...
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
搭建java开发环境,主要用于开发extjs应用和swing/swt应用,配置spket以实现extjs的代码提示功能,用visual editor插件实现可视化设计swing/swt界面
详细讲述通过Struts2+hiberante+Spring+ExtJs实现的实例说明,包括S2SH环境搭建和开发的过程,有详细的开发步骤说明,包括通用基类,事务等关键地方的讲解,图文并茂,适合初中级学习者
本工程涵盖了 Ext Js Modern 开发的各方面的基础知识, 比如开发环境搭建, 项目结构详解, 如何使用 api, 数据的增删查该基本示例, 以实际操作为主,非常好的入门项目 本书的各章节之间有一定的知识关联, 由浅至...
跟我一起学extjs5前20节的代码,请各位自行根据前几节的说明搭建环境
1.2 搭建学习环境 假设您的机器已安装myeclipse和tomcat如果没有请参阅其他相关资料。myeclipse建立新Web project顷目Extjs4 并且将extjs4.0.7压缩包解压后的全部文件复制到项目的Webroot目录下 ... ...
主要介绍了eclipse下搭建开发ExtJS的开发环境。
Ext JS开发框架简介 框架简介、环境搭建、helloWord示例 EXT框架基础 EXT核心组件应用
系统基于Eclipse+4.4开发环境搭建,可作为OA、网站、电子政务、ERP、CRM、APP后台等基于B/S架构的应用软件系统的快速开发框架。 主要特色 1、采用ExtJS 4.2.1.883无限制版本,放心用于网站开发。 2、ExtJS富文本...