EXTJS学习札记(一) _JavaScript

EXTJS学习笔记(一)

开始
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