1。要求
1.1网络浏览器
Ext JS的4支持所有主要的网页浏览器,从谷歌浏览器的最新版本的Internet Explorer 6。然而,在发展过程中,我们建议您选择最好的调试经验,以下浏览器之一:
- 谷歌Chrome 10 +
- 苹果Safari 5 +
- Mozilla Firefox的 4 + Firebug的 Web开发插件
本教程假定您正在使用最新版本的谷歌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分机”应用程序的生产版本。