一 、要求
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 开发环境搭建说明 #### 一、概述 本文档旨在详细介绍如何在 Windows 操作系统环境下搭建 Extjs 的开发环境,并通过 Spket 实现代码智能提示功能,最后通过一个简单的 HelloWorld 示例来验证...
ExtJS是一种基于JavaScript的前端框架,用于...以上就是搭建ExtJS开发环境的详细步骤,通过这个过程,你将能够在Eclipse中有效地进行ExtJS应用的开发、调试和管理。记得保持环境的更新,以便充分利用最新的工具和技术。
本文将详细介绍如何搭建ExtJS4的开发环境。 首先,你需要下载ExtJS4的版本。ExtJS4.x的发布包含了多个版本,例如4.0、4.1、4.2等,根据项目需求选择适合的版本进行下载。下载完成后,解压缩文件到本地文件系统中。 ...
#### 三、ExtJS开发环境搭建 1. **安装Node.js**:推荐使用最新版本的 Node.js,这有助于更好地管理项目依赖。 2. **安装Ext JS SDK**:可以通过 npm 安装官方提供的 Ext JS SDK,命令如下: ```bash npm install...
总的来说,这个压缩包提供了一个完整的ExtJS开发环境搭建方案,包括了Eclipse和Spket的适配文件,以及ExtJS 4.1的核心库。开发者可以通过这个环境快速开始构建ExtJS应用,同时享受Eclipse和Spket带来的高效开发体验...
搭建ExtJS开发环境需要安装Node.js和Sencha Cmd,下载并解压ExtJS框架,创建项目,配置项目信息,启动开发服务器,编写和调试代码,最后通过Sencha Cmd构建并部署应用。在整个过程中,熟悉Sencha Cmd的命令和ExtJS的...
同时,确保你的开发环境中已经安装了HTML、CSS和JavaScript的基础开发工具,如Sublime Text、Visual Studio Code或IntelliJ IDEA等。 2. **创建基本结构**:新建一个项目文件夹,然后在这个文件夹中创建基础的目录...
搭建MyEclipse10+Spket+ExtJS的开发环境是一项关键步骤,特别是对于初学者而言,这将为JavaScript开发打下坚实的基础。本文将详细解释如何进行这一配置。 首先,我们来安装Spket插件。Spket是一个强大的JavaScript...
为了更好地利用Extjs进行开发,本文将详细介绍如何在Spket IDE中配置Extjs开发环境,使得开发者能够享受到强大的代码提示与调试支持,提高开发效率。 #### 二、准备工作 在开始配置前,请确保以下条件已满足: 1. ...
### ExtJS 入门教程详解 ...通过上述内容的学习,开发者可以逐步掌握 ExtJS 的基本概念、开发环境搭建、核心概念以及一些常用的工具和 API。这些知识对于快速上手并利用 ExtJS 构建高效、美观的用户界面至关重要。
### Extjs之Eclipse及spket的开发...通过以上步骤,您可以成功搭建起一套完整的Extjs开发环境,并且利用Eclipse和spket插件大大提高您的开发效率。同时,借助这些社区资源,您将能够在遇到问题时获得及时的帮助和支持。
#### 三、ExtJS 开发环境搭建 - **开发工具**:推荐使用 Visual Studio Code 或者 WebStorm 进行开发。 - **版本管理**:建议使用 Git 进行代码版本控制。 - **构建工具**:可以使用 Gulp 或者 Webpack 来构建项目...
EXTJS和SSH是两种在开发Web应用程序时常用的技术。EXTJS是一个基于JavaScript的富客户端框架,用于构建桌面级的Web应用,提供丰富的用户界面组件和交互体验。SSH(Struts2、Spring、Hibernate)则是一种Java后端的...
#### 三、项目环境搭建 为了更好地理解整个项目的构建流程,下面将详细介绍如何搭建一个基于SSM + ExtJS MVC框架的项目环境。 **1. 项目jar包简介** 在正式开始项目搭建之前,首先了解一下项目中会使用到的主要jar...
这篇学习笔记主要涉及EXTJS的环境搭建,特别关注EXTJS 4.1和5.1版本,适合测试工程师进行学习和实践。 在EXTJS 4.1和5.1的API文档中,提供了详细的类、方法和属性参考,对于开发和调试非常有帮助。中文API地址可以...
ExtJS6.0的环境搭建,和Eclipse集成开发,JAVAWEB工程
此压缩包中,包含ExtJs4.0类库,spket破解版,以及Myeclipse下ExtJs开发环境的搭建,和一个用ExtJs写的HelloWorld,相信有了它,你可以进行基础开发了