首页 / 脚本样式 / ExtJS / Extjs基础知识

Extjs基础知识2014-05-27 cnblogs 空谷@幽兰一、环境的搭建

从官网下载Extjs 4.1 的工具包，里面的东西很多，我们在开发阶段并不需要太多的东西，因此保留 了我们需要用到的最少的几个文件：

其中resources为资源和一些Extjs样式文件，local为语言包，Extjs4.0新增加了bootstrap.js这样一 个文件，我们可以看下它的源码来了解一下它的作用：

if （isDevelopment === null） {for （i = 0, ln = localhostTests.length; i < ln; i++） {test = localhostTests[i];if （host.search（test） ！== -1） {isDevelopment = true;break;}}}if （isDevelopment === null && window.location.protocol === "file:"） {isDevelopment = true;}document.write（"<script type="text/javascript" charset="UTF-8" src="" + path + "ext-all" + （isDevelopment ？ "-dev" : ""） + ".js"></script>"）;

我们可以了解到，其实它的作用就是判断我们是处于开发模式还是调试模式，然后动态的给我们引入 所需要的js文件。因此如果我们需要在页面内编写Extjs，只需要为Extjs引入这样两个文件：

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/bootstrap.js"></script>

这样我们最简单的一个环境就搭建完成了。

二、Hello World

学习每个语言必定都是从Hello World开始的，在javascript中我们使用alert来弹出提示框，而在 Extjs中我们采用如下的方式：

1 （function（）{
2     Ext.onReady（function（）{
3         Ext.MessageBox.alert（"hello","Hello World！ "）;
4         }）
5 }）（）;