ExtJS入门教程：起步与基本使用

需积分: 3 198 浏览量更新于2024-09-30 收藏 125KB DOCX 举报

"这篇教程是关于ExtJS的学习，主要介绍了如何起步并理解基本的文件配置以及如何使用Ext库创建简单的对话框。" 在深入探讨ExtJS之前，我们首先要明白几个核心概念。`ext-all.css` 文件是ExtJS的样式表，负责定义组件的外观。为了保持可升级性，通常不建议直接修改此文件，而是通过自定义样式覆盖来实现个性化。`ext-base.js` 包含了ExtJS的核心功能，可以视为整个框架的基础。如果需要与其他JavaScript库如jQuery结合使用，可以通过修改此文件来实现。`ext-all-bug.js` 和 `ext-all.js` 分别用于开发和生产环境，前者包含调试信息，后者则是在部署时使用的精简版本。在准备好了这些基础文件后，我们就可以开始编写基于ExtJS的应用。对于有服务器端语言背景的开发者，可以选择动态加载这些文件，但在这个教程中，我们将主要关注在静态HTML页面上的应用。使用ExtJS库意味着我们需要在HTML页面中引入这些文件，并在合适的时机执行ExtJS代码。`Ext.onReady` 是一个关键函数，它会在DOM加载完成且ExtJS库准备就绪时执行传入的回调函数。在这个例子中，我们创建了一个简单的警告对话框，通过调用 `Ext.Msg.alert` 来显示“Hello, World”。 ```html <html> <head> <title>GettingStartedExample</title> <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css"/> <script src="lib/extjs/adapter/ext/ext-base.js"></script> <script src="lib/extjs/ext-all-debug.js"></script> <script> Ext.onReady(function(){ Ext.Msg.alert('Hello','World'); }); </script> </head> <body>  </body> </html> ``` 这段代码首先引入了必要的CSS和JavaScript文件，然后在 `Ext.onReady` 的回调中调用了 `Ext.Msg.alert` 方法。当页面加载完毕，用户将看到一个带有“Hello”标题和“World”消息的警告对话框。这个简单的例子展示了ExtJS的基本使用方式，但它只是冰山一角。ExtJS提供了一个丰富的组件模型，包括各种窗口、面板、表格、树形视图等，以及强大的数据绑定和布局管理功能。随着学习的深入，你将能够构建复杂的用户界面和交互效果，同时利用其优秀的性能优化和可维护性设计。在后续章节中，我们将逐步介绍这些高级特性，帮助你成为ExtJS开发的专家。

第一章起步（2）

这些文件是用来干什么的：

我们需要添加一下三个文件：

� ext-all.css：这是一个样式表文件，用来控制组件的显示。改文件不需要进

行修改，任何改动将影响日后的升级。如果真的想改动样式的话，可以在

引入该样式文件后再做覆盖。

� ext-base.js：这个文件提供了 Ext 的核心功能。如果 Ext 是一部车，它就是

车的引擎。这个文件我们可以修改以用来采用其他的库，如 jQuery，让它

和 Ext 共存。

� ext-all-bug.js/ext-all.js：所有的组件都蕴含在这个文件里面。前者用来调试

开发，后者在发布的时候采用。

当这些文件都准备好后，我们就可以真正开始享受 Ext 带给我们的快乐。

N：如果你在同时使用后台语言（如 PHP、ASP.NET 等），你可以选择动态的加

载这些行。对于本书中的大部分示例来讲，我们假定其运行在静态 HTML 页面中。

使用 Ext 库：

现在我们在页面中加入了 Ext 库，我们可以在页面中添加 Ext 代码了。在第一

个例子中，我们使用 Ext 来显示消息对话框。可能满足不了您的胃口，但是这只是个

开始。

动作的时间：

我们可以通过在文件的头部添加 script 段来加入 Ext 代码，当然得添加到 Ext 文

件引入之后。我们的例子会弹出一个 Ext 风格的警告对话框：

<html>

<head>

<title>Getting Started Example</title>

href="lib/extjs/resources/css/ext-all.css" />

Ext.onReady(function(){

下载后可阅读完整内容，剩余5页未读，立即下载

JJR1988112

粉丝: 50
资源: 15

ExtJS入门教程：起步与基本使用

Extjs教程_第一章_起步(1)

ExtJs教程_史上最全_完整版_新手开发

ExtJs教程_完整版

ExtJS 教程

ExtJS入门教程：打造丰富用户界面

ExtJS深度教程：构建富客户端应用

ExtJS入门教程：打造丰富Web界面

ExtJS入门教程：打造强大Web界面

ExtJS入门教程：打造高效Web界面

ExtJS 2.x 教程：打造桌面级Web应用

最新资源