ExtJS4.2学习(2)——HelloWorld

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

低调de草原狼

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

阅读量5.3k

点赞数

分类专栏： ExtJS ExtJS学习文章标签： extjs4

本文链接：https://blog.csdn.net/sunyingyuan/article/details/10473479

版权

ExtJS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

ExtJS学习

13 篇文章 18 订阅

订阅专栏

ExtJS下载：http://www.sencha.com/products/extjs/download/

Ecplise Spket插件下载：http://www.spket.com/download.html

下面将手把手教你如何写HelloWorld，其实为什么每个程序都基本上从HelloWorld开始呢，我是这么理解的，从HelloWorld开始，是说明你环境搭好了，其实从另一个侧面也可以看出你对这项技术的一些基本情况有了初步的了解。

一、ExtJS必须导入文件

首先，我们先看看ExtJS下载下来的包这么多文件是不是都必须导入啊，其实是不必的，如果要想基本的程序运行，那么你可以只引入一些基本的文件，我们在上一讲中也有包中一些比较重要的文件做了简单的介绍，大家可以看上一篇，那么ExtJS运行所必须的文件都是哪些呢？如下图：

那么下面我们就其中一些文件做简单的介绍：

locale是一些国际化文件，我们在中文环境下只需要引入 ext-lang-zh_CN.js；

resource目录下是一些资源文件，这些资源文件包括一些css样式等，我们在引入的时候也是必须要引入ext-all.css；

bootstrap.js，这个文件时这个文件，我读了一下源码，大致意思就是说，它会根据你输入的路径，比如说里面含有localhost/127.0.0.1等等信息的时候，自动调用ext-all-debug.js，而当发布的路径的时候，会调用ext-all.js，如果说调试版本会调用ext-all-dev.js。这个我们会在源码解读的时候细细品读。

ext-all.js，是在发布的时候调用的js文件，这个文件是extjs运行所必须加入的，是ext的核心包。

ext-all-debug.js，调试版本

二、HelloWorld引入文件需要的注意事项

我们写的HelloWorld js文件需要在所有extjs引入文件之后再引入，这样就避免报错：

ReferenceError: Ext is not defined

Ext.onReady(function(){

这个也是在网上比较常见的错误之一，原因就是，js是一种解释型语言，浏览器负责解析的时候会从上到下依次解析，所以如果你在加载extjs的js文件时候就写了helloworld js文件，这个时候就会报函数未定义错误。

插播一句，我一般都会在源码中做非常详细的注释，使大家能够更加明了的了解其中的原理。我个人感觉对知识的态度就应该知其然，并知其所以然。

另外，大家可能将ExtJS包下的内容加载到WebContent下的时候，会加载非常的慢，而且会报溢出或者其他的错误，这个时候，我们比较好的做法就是讲ExtJS包下的内容直接加载到项目根路径下，我所建的目录结构是这样的，如下图：

这样的话，就可以解决上面的问题。

大家看到的helloworld.js就是HelloWorld的js程序，我们会将其都贴在博客中，源码也会全部上传，但是extjs的源码只上传一次，由于太大还请大家自行下载并将其放入。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<!-- 这个文件必须在以上js文件引入之后引入，否则会Ext is not define错误 -->
<script type="text/javascript" src="helloworld.js"></script>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript">
</script>
</head>
<body>
	
</body>
</html>

helloworls.js

//onReady方法将会在页面加载完成后执行，相当于我们平时常用到的window.onload方法
//这个地方经过我的测试，它是在onload后执行的
Ext.onReady(function(){
	//调用Ext.MessageBox.alert();
	Ext.MessageBox.alert("HelloWorld","大家好，这是HelloWorld！");
});

这个地方有个注意点就是，我们可以看到ExtJS API中，

那么这个API中为什么连alert这个Methods都没有呢，细细看我们的代码其实是调用的这个方法；

Ext.MessageBox.alert("HelloWorld","大家好，这是HelloWorld！");

它在API中的位置是：

这样这个问题我们就解决了。

那么我们的HelloWorld程序呢，到此就告一段落，谢谢~

低调de草原狼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
8
评论
ExtJS4.2学习(2)——HelloWorld

ExtJS下载：http://www.sencha.com/products/extjs/download/Ecplise Spket插件下载：http://www.spket.com/download.html下面将手把手教你如何写HelloWorld，其实为什么每个程序都基本上从HelloWorld开始呢，我是这么理解的，从HelloWorld开始，是说明你环境搭好了，其实从另一个侧面
复制链接

扫一扫