开始
1.必须的
1.1Web浏览器
ExtJS 4 支持所有的主要的web浏览器,从IE6 到最新的GoogleChrome.但在开发期间,为了最好的调试体验,我们强烈建议选择以下浏览器:
GoogleChrome10+,Apple Safari5+,Firefox4+(带Firebug插件)
本手册是以GoogleChrome最新版为基础的。如果还没有,请花点时间安装Chrome并熟悉一下Chrome开发者工具。
1.2Web服务器
尽管本地的web服务器对使用EXTJS4 不是必须的,我们仍强烈建议使用。因为,在大多数浏览器上,XHR在本地file://协议上有跨域的限制。如果你没有一个本地服务器,强烈建议您下载并安装Apache HTTP Server
- 在Windows上安装Apache
- 在Linux上安装Apache
- ?
如果你已经安装并使Apache 可用,你可以在您的浏览器上通过localhost访问.看到一个启动页表明ApacheHTTP Server被成功安装并运行。
1.3 EXTJS 4 SDK
下载ExtJs 4 SDK. 解压到你的web 根目录下,并命名为extjs。如果你不确定你的web 根目录在哪,请咨询你的web服务器文档。您的web 跟目录可能非常依赖您的操作系统,但如果你使用apache,它默认被安排在
- windows:C:\Programe Files\Apache2.2\htdocs
- Linux:/var/wwww/
- MacOS X /library/WebServer/Documents
如果你安装好了Apche,你可以在浏览器中输入http://localhost/extjs/index.html。如果完成好了所以的设置,你可以看到ExtJS4的欢迎页面
2.应用程序结构
2.1基本结构
尽管不是强制的,以下建议列出了组织应用程序的最佳体验。以下是EXTJS应用程序的目录结构
- appname--------------------是包含所有应用程序源文件的目录
- app--------------------包含了所有的类,命名风格应该遵循类系统指南的约定
-namespace-Class1.js
-Class2.js
-...- extjs------------------包含EXTJS SDK文件
- resources--------------包含了其他代表应用程序和感觉的的CSS和image文件,还有其他的静态资源(XML,JSON)
- css
- images
-...- app.js-----------------包含你的应用程序逻辑
- index.html-------------是整个HTML文档的输入点
不用担心在此刻就创建这些目录。现在,让我们把焦点放在创建最少的代码来获得和运行ExtJS应用程序。
为了创建一个基本的helloworld.首先在您的web根目录创建一下的目录结构
- helloext
- app.js
- index.html
随后将ExtJS4 SDK 解压.到helloext中一个叫做extjs的目录
典型的ExtJs应用包含一个单独的HTML文档 index.html. 打开index.html 并插入以下的HTML代码
<html><head><title>Hello Ext</title><linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css"><scripttype="text/javascript"src="extjs/ext-debug.js"></script><scripttype="text/javascript"src="app.js"></script></head><body></body></html>
extjs/resources/css/ext-all.css包含了整个框架需要的所有的样式信息
extjs/ext-debug.js包含了ExtJS4 核心类库的最小集合
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.'}]});}});
Ext.application();的详细信息,请查看另一篇文章
- helloext
- app.js
- index.html
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....
ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
适合ExtJs开发人员extjs技术上手以及深入
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
语言程序设计资料:ExtJs学习笔记-2积分.doc
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...
这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...
本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文 学习资料还很少。 google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电 子书 [Ext JS 6 By Example] 。这份资料在 PACKT 上卖 ...
在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...
Extjs4.0学习笔记大全.pdf,供大家学习