Extjs4文档－概述－开始

最新推荐文章于 2022-08-11 14:20:00 发布

vipchenhongbin

最新推荐文章于 2022-08-11 14:20:00 发布

阅读量204

点赞数

分类专栏： extjs4 文章标签： javascript 开发工具操作系统 ViewUI

本文链接：https://blog.csdn.net/vipchenhongbin/article/details/84279152

版权

extjs4 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、准备工作

1.1.浏览器

Extjs4支持所有主流的浏览器，从IE6到最新版本的Google Chrome浏览器。然而在开发阶段，我们建议你选择以浏览器以达到最佳调试结果：

●Google Chrome 10+

●Apple Safari 5+

●带有firebug插件的Mozilla Firefox 4+

本指南假设你正使用最新的Google Chrome浏览器。如要你还没有Ghrome浏览器，请花一分钟时间安装他，并且熟悉一下他的开发工具。

1.2.Web服务器

虽然本地服务器不是Extjs4必须的，但是还是建议你开发的时候使用它，因为大多数浏览器不支持本地的XHR请求。如果你没有本地的服务器，我们建议你下载安装Apache Http Server。

●如何在Windows下安装Apache

●如何在Linux下安装Apache

●在苹果操作系统下你可以通过导航到“系统设置>共享”，并且点击下一步到“网络共享”来安装并使用内建的Apache。

一旦你安装并启用Apache你可以通过在浏览器里键入localhost来检是否正常运行。如果你已安装并启动了Apache应用服务器，你将看到一个开始页。

1.3. Extjs4软件开发包

下载Extjs4的软件开发包并解压到你的Web根目录里新建的"extjs"包中。如果你不知道你的web根目录在哪，你可以查阅你的web服务器的文档。如果你使用典型的方式安装Apache，你的web根目录取决于你的操作系统：

Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"
Linux - "/var/www/"
Mac OS X - "/Library/WebServer/Documents/"

如果你已经安装了Apache你可以在浏览器里通过 http://localhost/extjs/index.html 来访问。如果如现Extjs4的欢迎界面，表示你已经完成了所有的配置。

2、应用程序结构

2.1.基础架构

虽然不是必须的，但是以下目录结构应该被认为是一个最佳实践来确保你的应用程序被更好的组织，扩展并且维护。以下是Extjs建议的目录结构。

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html

●appname目录包含了所有应用程序的源文件

●app包含了所有的类，命名规范应该参考类系统指南

●extjs包含了extjs4的软件开发包文件

●resources包含了额外添加的css以及图片文件来实现应用程序的外观以及一些XML，JSON等其他静态资源。

●index.html是html文档的入口点

●app.js是包含了应用程序的逻辑

不要担心一下子能创建所有目录。此时我们更关注如何用最小的代码来开始并运行Extjs。为了实现这个我们来创建一个类似“hello world”的“Hello Ext”的应用程序。首先在你的web目录创建如个目录和文件：

- helloext
    - app.js
    - index.html

然后解压Extjs4的软件开发包为extjs到你的helloext目录。
一个典型的Extjs应用程序包含了一个简单的HTML文档－index.html。打开index.html并且插入以下html代码：

<html>
<head>
    <title>Hello Ext</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/resources/css/ext-all.css包含了所有整个框架必须的样式信息

●extjs/ext-debug.js包含了最小化Extjs4的核心类库

●app.js包含了应用程序的代码

现在准备你的应用程序代码。打开app.js并且插入以下javascript代码：

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

现在打开你的浏览器并且导航到 http://localhost/helloext/index.html。你应该可以看到一个标题为“Hello Ext”，内容为"welcome"的面板。

2.2.动态加载

打开Ghrome开发工具，并且点击控制台选项。刷新Hello Ext应用程序，你将会在控制台看到一个类似下面的警告：

Extjs4附带的系统动态加载只加载你应用程序所必须的JavaScript文件。在我们的例子中，Ext.create创建一个Ext.container.Viewport实例。当加载器第一次调用Ext.create它会去检查Ext.container.Viewport是否已定义。如果它未定义加载器会在实例化viewport对象之前尝试加载包含Ext.container.Viewport代码的JavaScript文件。在我们的例子中，Viewport.js文件被成功加载了，但是加载器检测到文件没有以一个最佳方式加载。因为我们只有在请求实例化Ext.container.Viewport的时候加载Viewport.js,代码会停止执行直到文件被加载成功，这样会有一个短暂的延迟。如果我们多次调用Ext.create这种延迟会加剧，因为应用程序会等到每一个文件加载完成再去请求下一个。

为了解决这个问题，我们可以在调用Ext.application之前加上一句话如下：

Ext.require('Ext.container.Viewport');

这可以确保包含Ext.container.Viewport代码文件在application运行之前加载。当你刷新页面的时候你将不再看到Ext.Loader的警告。

2.3.类库包含的方法

当你解压下载的Extjs4文件，你将会看到如下文件：

1、ext.debug.js-这个文件只要开发环境下使用。它提供了Extjs运行所必须的最小类库核心文件。任何额外的类应该作为一个单独的文件被动态加载。

2、ext.js-跟ext.debug.js一样但是用在生产环境下。是配合你应用程序app.js文件使用的。

3、ext-all-debug.js-这个文件包含了完整的Extjs的类库。这可以帮助你减少最初的学习曲线，然而在实际的开发中ext-debug.js是首选。

4、ext-all.js-这是ext-all-debug.js的缩小版本可以用在生产环境下，但是不建议这么做因为大多应用程序不会用它包含的所有类。建议你参照第3节的介绍构建你应用程序的生产环境。

3、部署

新推出的Sencha SDK工具（下载）使开发Extjs4的应用程序变的更简单。这个工具允许你生成一个包括所有JavaScript依赖清单的JSB3文件（JSBuilder文件格式），并且创建一个只包含你应用程序所需的代码。

当你安装完了SDK工具之后，打开window终端窗口并且导航到你应用程序的目录。

cd path/to/web/root/helloext

这里你只需要运行一组简单的命令。首先生成了一个JSB3文件。

sencha create jsb -a index.html -p app.jsb3

如果应用程序是以像PHP，Ruby，ASP动态服务端语言构建的，你可以将index.html替换为实际的URL地址：

sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3

这会扫描你index.html文件上app实际用到的所有的框架和应用程序文件，然后创建一个名为app.jsb3的JSB文件。在构建之前你可以修改app.jsb3文件－如果你有自定义的资源要复制，这可能是有用的，但是在大多情况下，我们应该立即用以下的命令构建应用程序：

sencha build -p app.jsb3 -d .

这样基于JSB3文件创建了两个文件：

1、all-classes.js - 这个文件包含了所有的应用程序类文件。这不是压缩版所以对你调试应用程序非常有帮助。在我们的例子中，这个文件是空的因为我们的“Hello Ext”应用程序没有包含任何类文件。（注意：这个是打包的所有用到的类文件）

2、app-all.js - 这个文件加上ExtJS类文件是构建应用程序必须的。这是简化所有类+app.js版本，并用用于生产环境。（注意：这里的是应用程序所有JS文件打包而成的。生产环境只需要引用这个包+ext.js最小类文件就行了）

一个Extjs应用程序生产环境下需要一个独立的index.html文件。你通常在服务端处理业务逻辑，但是现在我们仅仅在helloext目录创建了一个新的文件index-prod.html:

<html>
<head>
    <title>Hello Ext</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 Ext应用程序。

vipchenhongbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs4文档－概述－开始

1、准备工作 1.1.浏览器 Extjs4支持所有主流的浏览器，从IE6到最新版本的Google Chrome浏览器。然而在开发阶段，我们建议你选择以浏览器以达到最佳调试结果： ●Google Chrome 10+●Apple Safari 5+●带有firebug插件的Mozilla Firefox 4+ 本指南假设你正使用最新的Go...
复制链接

扫一扫

专栏目录