首先,我们要找到有用的资源
Extjs是开源的(虽然Extjs5没有免费版),我们下载到的文件包含了源代码,我们要在这堆源代码中找到Extjs5的真正需要引用的文件。
这些文件在build文件夹下。我们首先需要引用的是ext.all.js,这个文件包含了所有Extjs的控件,它是经过压缩处理过的,目前的大小是1.85M,仍然比较庞大。
然后,我们会看到bootstrap.js,关于这个文件的介绍,大家可以参考我之前的文章《bootstrap.js 工作方式》。
然后是packages文件夹,这个文件夹下面包含了extjs的主题、语言包等,我们需要找到有用的内容,下面的截图是我删除了无用的之后得到的:
ext-aria和ext-charts我们目前不会用到,先保留下来备用。
ext-locale是本地化语言包,我们只保留里面的ext-locale-zh_CN.js,这个是简体中文语言包。
接 下来的四个文件夹都是extjs的主题包,分别是经典主题、清新主题、灰色主题和海王星主题,其中ext-theme-crisp(清新主题)是 extjs5新增的;ext-theme-neptune(海王星主题)是extjs4中新增的。经典主题和灰色主题大家会比较熟悉,从extjs诞生就 存在的两个主题。
创建Hello World示例
然后在index.html文件中,添加extjs的引用:
<script src="res/ext-5.0.1-min/ext-all.js"></script> <script src="res/ext-5.0.1-min/packages/ext-locale/ext-locale-zh_CN.js"></script> <link href="res/ext-5.0.1-min/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
首先添加的是ext-all.js,这个是extjs的核心脚本,包含了所有的控件。
然后的第二行,我们引入了本地化语言包,语言包是在ext-locale文件夹中的。
最后,在第三行中,我们引入了Extjs的主题。extjs的主题是通过添加对主题文件夹下的css引用来完成的。我们这里使用的是extjs5新添加的主题。
在引用完成之后,我们就可以编辑自己的代码了,下面的我们添加的Hello World代码:
<script type="text/javascript"> Ext.onReady(function () { Ext.MessageBox.alert("提示", "Hello World"); }); </script>
在浏览器中打开index.html文件。