`

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
分享到:
评论

相关推荐

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    extJs 2.1学习笔记

    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.0学习笔记

    ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ...

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

    ExtJs简明教程+Extjs学习笔记

    ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    extjs 学习心得笔记

    在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...

    ExtJs学习笔记,共30讲

    这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...

    ExtJS 6 学习笔记

    本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文 学习资料还很少。 google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电 子书 [Ext JS 6 By Example] 。这份资料在 PACKT 上卖 ...

    extjs 学习笔记(三) 最基本的grid

    在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...

    Extjs4.0学习笔记大全.pdf

    Extjs4.0学习笔记大全.pdf,供大家学习

Global site tag (gtag.js) - Google Analytics