开始
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
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
Extjs 5 学习笔记,在网上下载整理好的。
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学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
老师整理的extjs学习笔记,和大家共享
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
非常适合新手学习extjs的笔记,让你少走弯路
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
语言程序设计资料:ExtJs学习笔记-2积分.doc
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,
EXTJS学习笔记!亲,初学者的必备哦,其中还有部分的Aop、Hibernate