自己翻译的EXTJS4 入门

翻译 2012年03月29日 22:31:57

1。要求

1.1网络浏览器

Ext JS的4支持所有主要的网页浏览器,从谷歌浏览器的最新版本的Internet Explorer 6。然而,在发展过程中,我们建议您选择最好的调试经验,以下浏览器之一:

本教程假定您正在使用最新版本的谷歌Chrome。如果你不已经有铬花点时间安装它,熟悉自己的浏览器开发工具

1.2 Web服务器

即使本地Web服务器不要求使用的Ext JS 4,它仍然是强烈建议你有一个发展,因为本地file :/ /协议的XHR以上交叉的原产地限制,大多数浏览器。如果你不已经有一个本地Web服务器,建议您下载并安装Apache HTTP服务器。

一旦你已经安装的Apache,你可以验证它通过导航到您的浏览器中运行的本地主机你应该看到一个启动页面,说明Apache HTTP服务器已成功安装并正在运行。

1.3。Ext JS的4 SDK

下载的Ext JS 4 SDK中包解压缩到一个新的目录称为“ExtJS的”在你的web根目录。如果您不能确定您的网站根目录,请咨询您的Web服务器的文档。你的网站根目录可能会有所不同,取决于您的操作系统,但如果你使用的是Apache,它通常位于:

  • 窗口 - 的“C:\ Program Files文件\ Apache软件基金会\ Apache2.2 \ htdocs下”
  • Linux的 - “/ var / www下面/
  • Mac OS X的 - “/图书馆/ Web服务器/文件/”

一旦你完成了安装Apache 在您的浏览器导航到http://localhost/extjs/index.html如果一个Ext JS 4欢迎页面出现时,你所有的设置。

2。应用程序结构

2.1基本结构

虽然不是强制性的,下面列出的所有建议,应考虑作为最佳实践指引,让您的应用程序以及组织,可扩展性和可维护性。下面是Ext JS的应用程序推荐的目录结构:

- APPNAME
     - 应用程序
         -  命名空间
            -  Class1的JS
             -  Class2的 ... 
    - EXTJS
     - 资源
         - CSS
         - 图像
         -  ... 
    - 应用程序JS
     - 指数HTML
  • APPNAME是一个目录,其中包含所有应用程序的源文件
  • 应用程序包含了所有的类,其中的命名风格应遵循公约中列出的类系统指南
  • EXTJS包含了Ext JS 4 SDK文件
  • 资源包含额外的CSS和图像文件,这是负责的外观和感觉的应用程序,以及其他静态资源(XML,JSON等)
  • index.html的是HTML文档的入口点
  • app.js包含应用程序的逻辑

不要担心所有这些目录创建的时刻。现在让我们专注于创建需要得到Ext JS的应用程序代码的最低金额和运行。要做到这一点,我们将创建一个基本的“你好世界”Ext JS的应用,被称为“EXT”。首先,在您的网站根目录中创建以下目录和文件。

- helloext
     - 程序JS
     - 指数HTML

然后解压缩的Ext JS 4 SDK的一个名为EXTJShelloext目录

一个典型的Ext JS的应用程序包含在一个单一的HTML文档- 的index.html打开index.html和插入下面的HTML代码:

<HTML> 
<HEAD> 
    <TITLE> 你好分机</ 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 /资源/ CSS / EXT-all.css包含整个框架所需的所有样式信息
  • EXTJS / EXT-debug.js包含了Ext JS的4核心库类的最小集合
  • app.js将包含您的应用程序代码

现在,你可以编写应用程序代码。的开放app.js和插入以下JavaScript代码:

   
           
                 分机
                    HTML  “你好!欢迎来到Ext JS的' 
                } 
            ] 
        }); 
    
} } );

现在打开你的浏览器和导航到http://localhost/helloext/index.html你应该看到一个面板标题栏包含文本“Hello EXT”和“欢迎”面板的身体面积的消息。

2.2动态加载

打开Chrome的开发工具,然后按一下控制台上的选项。现在刷新你好分机应用。你应该看到一个看起来像这样在控制台的警告:

动态加载的JavaScript必要的资源来运行您的应用程序与系统的Ext JS 4。在我们的例子Ext.create创建一个实例Ext.container.Viewport被称为Ext.create装载机将首先检查看到,如果Ext.container.Viewport已被定义。如果它是不确定的,loader会尝试加载的JavaScript文件包含代码Ext.container.Viewport的实例视口中的对象之前。在我们的例子Viewport.js文件被加载成功,但装载机检测该文件正在装载在低于最佳方式。由于我们正在装载的Viewport.js文件,只有当一个实例Ext.container.Viewport的要求,停止执行的代码,直到该文件已被成功加载,造成了短暂的延迟。这种延迟会加剧,如果我们有几个的呼吁Ext.create,因为应用程序会为每个文件等待下一个请求之前加载。

为了解决这个问题,我们可以添加一行Ext.application这上面调用代码

ext.require(“ Ext.container.Viewport);

这将确保应用程序运行之前加载文件包含代码Ext.container.Viewport的是。你应该不会再看到的Ext.Loader警告,当您刷新页面。

2.3图书馆共享方法

当你解压缩的Ext JS 4下载,你会看到以下文件:

  1. EXT-debug.js -这个文件是在发展过程中只使用。它提供了Ext JS的核心类起床和运行所需的最低数量。任何额外的类应作为单独的文件证明上述动态加载。

  2. ext.js - EXT-debug.js一样,但在生产中使用的精缩。意味着要与您的应用程序的APP-all.js文件结合使用(见第3

  3. EXT-ALL-debug.js -这个文件包含了整个Ext JS库。这可能有助于缩短您最初的学习曲线,但是EXT-debug.js优先在大多数情况下,为实际应用的发展。

  4. EXT-all.js -这是一个缩小的版本EXT--debug.js,可以在生产环境中使用,然而,它不建议,因为大多数应用将不使用,它包含的所有类。相反,它建议您创建自定义为您的生产环境,节所述3

3。部署

新推出的煎茶SDK工具(这里下载)使得任何Ext JS的应用程序的部署比以往任何时候都更容易。工具允许您生成一个JSB3(JSBuilder文件格式)文件的形式体现的所有JavaScript依赖,并创建一个自定义生成只包含您的应用程序需要的代码。

一旦你安装了SDK工具,打开一个终端窗口,浏览到您的应用程序的目录。

CD 路径

从这里,你只需要运行几个简单的命令。第一个生成JSB3文件:

煎茶创建JSB - A股指数HTML - P 应用程序jsb3

对于一个动态的服务器端语言,如PHP,Ruby中,ASP等之上的应用程序,你可以简单地更换index.html的实际URL与您的应用程序:

煎茶创建JSB - 一个HTTP / /本地主机/ helloext / index.html的-P app.jsb3

这种扫描你的index.html文件,实际上是由应用程序使用的所有框架和应用程序文件,然后创建一个名为app.jsb3 jsb文件生成JSB3首先给了我们一个机会来修改生成的app.jsb3建设-这可能是有用的,如果你有自定义的资源复制,但在大多数情况下,我们可以立即着手建立第二个命令的应用:

煎茶构建- P级的应用程序jsb3 - D 

这将创建2个文件的基础上JSB3文件:

  1. classes.js -此文件包含所有应用程序的类。它是不是精缩内置的应用程序的调试问题是非常有用的。在我们的例子中,这个文件是空的,因为我们的“Hello EXT”应用程序不包含任何类。

  2. APP-all.js -该文件是一个最小化您的应用程序,加上所有运行所需的Ext JS类的建设。它是在缩小的和生产准备的版本所有的classes.js + app.js

Ext JS的应用程序将需要一个单独的应用程序的生产版本的index.html您通常会在您的构建过程中或服务器端逻辑处理,但现在我们只是创建一个新文件helloext称为目录索引prod.html的

<HTML> 
<HEAD> 
    <TITLE> 你好分机</ TITLE>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

请注意,EXT-debug.js已与ext.js取代,并app.js已取代APP-all.js如果您在您的浏览器导航到http://localhost/helloext/index-prod.html,你应该看到的“Hello分机”应用程序的生产版本。

4。进一步阅读

  1. 类系统
  2. MVC应用程序架构
  3. 布局和Containsers
  4. 使用数据

IOS学习之AFNetworking 使用总结 (用法+JSON解析)

AFNetwork是一个轻量级的网络请求api类库。是以NSURLConnection, NSOperation和其他方法为基础的。 下面这个例子是用来处理json请求的: NSURL *url...

boost设计TCP服务器中的strand与心跳机制实现

在boost用asio设计TCP服务器的关键技术及boost用asio设计TCP服务器中单连接的设计中,整理了boost的asio设计tcp服务器的连接管理类和单连接的处理类,基本可以实现双工的多并发...

ExtJs4入门之二: 事件绑定 , 与jQuery的简单混用

一: 混用js顺序 jsp js/jquery-1.7.1.min.js"> extjs/resources/css/ext-all.css" /> extjs/ext-all-deb...

Extjs4教程一之入门教学

最近刚到一家新公司

extjs 4入门 GPLv3授权协议问题

1.Extjs采用GPLv3带来的问题     Extjs是一个优秀的js框架,可惜授权协议是GPLv3。一个类库,用GPL授权是很不可取的。意味着你提供给客户使用的程序,“修改了extjs的代...

ExtJs4入门之九: 补充Grid组件杂项

一:编辑事件 C层: //5.edit事件 /* "usergrid":{ edit:function(editor , e , options){...

[ExtJS] Ext JS 4 入门教程 (英文版)

  • 2013年08月18日 13:38
  • 4.91MB
  • 下载

ExtJS 4 官方指南翻译:键盘导航 Keyboard Navigation

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/keyboard_nav 翻译:frank/sp42 转载请保留本页信息 使用键盘的原因,无...

ExtJS 4 官方指南翻译:Grid组件(上)

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/grid 翻译:frank/sp42 转载请保留本页信息 Grids Grid 面板为 Ext JS ...

Extjs4 官方文档翻译系列二:组件(components)、自定义组件

EXTJS4官方文档翻译系列二:组件(components) 从八月开始不用加班了,应该会有比较多的时间来把这些文档翻译完了.之所以翻译这些文档,是因为我觉得这几篇是比较重要的(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自己翻译的EXTJS4 入门
举报原因:
原因补充:

(最多只允许输入30个字)