自己翻译的EXTJS4 入门

最新推荐文章于 2024-05-05 10:34:54 发布

阿洲

最新推荐文章于 2024-05-05 10:34:54 发布

阅读量1.1k

点赞数

文章标签： extjs http服务器 apache ext 浏览器 web服务

1。要求

1.1网络浏览器

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

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

1.2 Web服务器

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

说明在Windows上安装的Apache
Linux上的Apache安装说明
Mac OS X中带有导航“系统预置”>“共享”，检查“Web共享”旁边的框，你可以通过在Apache安装的构建。

一旦你已经安装的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的一个名为EXTJS在helloext目录

一个典型的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下载，你会看到以下文件：

EXT-debug.js -这个文件是在发展过程中只使用。它提供了Ext JS的核心类起床和运行所需的最低数量。任何额外的类应作为单独的文件证明上述动态加载。
ext.js - EXT-debug.js一样，但在生产中使用的精缩。意味着要与您的应用程序的APP-all.js文件结合使用。（见第3节）
EXT-ALL-debug.js -这个文件包含了整个Ext JS库。这可能有助于缩短您最初的学习曲线，但是EXT-debug.js优先在大多数情况下，为实际应用的发展。
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文件：

classes.js -此文件包含所有应用程序的类。它是不是精缩内置的应用程序的调试问题是非常有用的。在我们的例子中，这个文件是空的，因为我们的“Hello EXT”应用程序不包含任何类。
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分机”应用程序的生产版本。

阿洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己翻译的EXTJS4 入门

1。要求1.1网络浏览器Ext JS的4支持所有主要的网页浏览器，从谷歌浏览器的最新版本的Internet Explorer 6。然而，在发展过程中，我们建议您选择最好的调试经验，以下浏览器之一：谷歌Chrome 10 +苹果Safari 5 +Mozilla Firefox的 4 + Firebug的 Web开发插件本教程假定您正在使用最新版本的谷歌C
复制链接

扫一扫