Ext JS (1) 之Hello World_ext.js 简单的hello world-优快云博客

本文链接：https://blog.youkuaiyun.com/yeseric/article/details/5533496

本文介绍了使用ExtJS创建一个简单的HelloWorld应用的过程。通过示例代码展示了如何引入必要的资源文件，包括核心库ext-base.js及组件文件ext-all.js，并通过JavaScript调用Ext.Msg.alert()方法来显示一个包含标题和内容的提示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始对Ext Js做简单的介绍，希望这个StepByStep教程能对大家有所帮助。今天首先从一个最简单的例子开始：Hello World。

我们的测试环境，文件结构如下：

首先把Hello World的代码给出：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>Ext Hello World</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" mce_href="resources/css/ext-all.css"/>   <mce:script type="text/javascript" src="../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  <mce:script type="text/javascript" src="../ext-all.js" mce_src="ext-all.js"></mce:script> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

这段代码中ext-all.css是Ext的核心css文件，我们在后面的例子中都会用到这个文件。

ext-base.js是ext的核心库，相当于Ext的引擎，我们可以根据需要把它替换成其他的JS库，比如JQuery。

我们这里还用到了一个ext-all.js包含了Ext各种组件，其实这里还有一个ext-all-debug.js两者的区别是，前一个是生产环境下用的，后一个是调试环境下用的，包含了更多的调试信息。

在这个例子中:

这一段显示了一个Hello World的提示框，这里"Hello" 是提示框的标题，"world"是提示框的内容。