ExtJS入门之Hello World

最新推荐文章于 2021-02-21 05:13:03 发布

yubo_725

最新推荐文章于 2021-02-21 05:13:03 发布

阅读量1k

点赞数

分类专栏： ExtJS 文章标签： ext Ext js javascript

本文链接：https://blog.csdn.net/yubo_725/article/details/45220855

版权

ExtJS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文记录的是Extjs入门的第一个程序：Hello World，在浏览器中访问我们的程序，会出现一个提示框，如下图所示：

该提示框可以在浏览器内移动，点击OK按钮或右上角的按钮，提示框关闭，下面我们就来实现这个效果。

1、要使用Extjs，必须先下载对应的sdk，可以在官方网站上下载，地址为：http://extjs.org.cn/

2、下载好了对应的sdk后，可以看到，里面有很多文件，目录结构如下图：

面对这么多的文件，这里我们该怎么使用Extjs呢？从Extjs的官方文档上，我们可以找到答案，链接地址为：http://docs.sencha.com/extjs/5.0/

打开官方文档后，可以看到如下图的内容：

我们点开上图中的Welcome to Ext JS: Hello World，里面有对Extjs的Hello World程序的详细解释，如下图：

我们要开始使用Extjs，第一步应该是知道如何引入Extjs的代码，上图中给我们说明了需要引入的三个文件，这三个文件分别是：

/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css

/build/ext-all.js

/build/packages/ext-theme-neptune/build/ext-theme-neptune.js

引入了这三个文件后，我们就可以使用Extjs的API了，我们在sdk的目录下新建一个文件夹test，然后在test文件夹下新建一个HTML文件，名为index.html，在其中编辑如下内容：

<!DOCTYPE html>
<html>
	<head>
		<!-- 下面是三个必须引入的文件 -->
		<link rel="stylesheet" type="text/css" href="../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
		<script src="../build/ext-all.js"></script>
		<script src="../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

		<script type="text/javascript">
			//当文档加载完成后，会执行下面的函数
			Ext.onReady(function () {
        		Ext.MessageBox.alert("提示", "Hello World");
    		});
		</script>
	</head>
	<body>

	</body>
</html>

保存文件后，我们用浏览器打开test.html，不出问题的话，提示框应该就会出来了。

以上就是Extjs入门的第一个程序Hello World。