1. 要求
1.1 浏览器
Ext JS 4 支持大多主流的浏览器(Ie6~chrome),在开发时,建议选择以下几种浏览器(with debuger)
此教程是以Chrome做为开发浏览器。如果你还没有安装Chrome,您需要花点时间安装在本机,再稍微熟悉Chrome的开发工具.
1.2 Web 服务器
安装Apache HTTP Server.
验证安装是否可用,在浏览器中打开localhost. 会看到一个启动页面,说明server已经开装成功.
1.3. Ext JS 4 SDK()
下载Ext JS 4 SDK.且解压到一个指定目录. 如果你不确定web根目录在哪, 查看服务器手册. 你的web服务器根目录依赖你的操作系统,如果你使用的是Apache服务器,则目录位置如下:
-
Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"
-
Linux - "/var/www/"
-
Mac OS X - "/Library/WebServer/Documents/"
如果你安装成功,在浏览器中打开http://localhost/extjs/index.html.如果你看到Extjs4的欢迎界面,说明你已经安装成功.
2. 应用的结构
2.1 基本结构
虽然不是强制性的,下面所列建议,应视为最佳做法,更好的组织您的应用程序,保证更好的扩展性和可维护性。下面是Ext
JS的应用程序推荐的目录结构
- appname
- app
- namespace
- Class1.js
- Class2.js
- ...
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
-
appname:
存放全部源代码
-
app
:存放自定义类
-
extjs
:extjs
4 sdk
-
resources
:存放CSS和IMAGE
也保含xml 和json等静态数据
-
index.html
:主页
-
app.js
:应用程序逻辑
目录结构不一定同时建立完成.现在我们建立一个小的可运行的应用程序. 起名叫"helloext". 建立如下的目录和文件.
- helloext
- app.js
- index.html
Then unzip the Ext JS 4 SDK to a directory namedextjs
in
thehelloext
directory
解压Extjs4且放在helloext的指定目录下,给这个目录起个名叫extjs
编辑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框架所的有样式
-
extjs/ext-debug.js
:extjs最小的可调式代码库
-
app.js
:自定义代码
现在可以写自己的代码。打开app.js写入如下代码:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
现在打开http://localhost/helloext/index.html。你将看到一个带有“Hello
Ext”标题且内容是"welcome"的panel.
2.2 动态载入
打开Chrome 开发工具,单击Console选项.刷新页面,在Console中会看到一个警告信息.看起来像:
在实例化Ext.container.Viewport时,需要加载Viewport.js文件,所以会出现很小的延迟。如果多次create实例,会出现更长的延迟。所以出现上上面的警告提示信息.
在Ext.application这行上面加入如下代码,可以解决问题:
Ext.require('Ext.container.Viewport');
2.3 库共享方法
在解压Extjs4时,你会看到如下文件:
-
ext-debug.js
:开发时用.
-
ext.js:上线时使用。已经保含了ext-all.js
-
ext-all-debug.js
-此文件包含整个ExtJS库。这可以有助于缩短您最初的学习曲线,然而在大多数情况下,实际的应用程序开发的首选EXT-debug.js。
-
ext-all.js-这是一个缩小的版本,可以在生产环境中使用,然而,这是不建议,因为大多数应用将不会使用它包含的所有类。
分享到:
相关推荐
Extjs4---grid的修改、删除功能---结合struts2、hibernate
licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
ExtJS4之初体验,中文版的文档,Getting started with extjs的中文版
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
ExtJS 4 DirectStore post参数的变化以及应对方法 ExtJS 4 实例之数据包 ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读...
extjs4-slate 主题 extjs4.0.7
Extjs4---combobox省市区三级联动+struts2
ExtJS快速入门--传智播客--蔡世友
extjs-theme-bootstrap-master.zip
Extjs4的demo 很不错的例子
我很自豪能代表Sencha和ExtJS团队和大家成功的分享了ExtJS 4的预览版、3个beta版和今天发布的正式版等5个版本。 ExtJS 4从创建之初,就以最全面现代化为目标,它采用了改进的架构和加入了许多新的特性,从而使你可以...
Extjs4--Form登录功能,结合struts2
EXTJS4 类似于bootstrap的主题
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
包含各种类型的extjs小图标,Extjs4小图标