关闭

ExtJS学习笔记一:HelloWorld

标签: helloworldextjsbootstrap学习
390人阅读 评论(0) 收藏 举报
分类:

ExtJS发展到现在,网上有着很多的教程,也有很多的用法,我将在这里记录下自己走过的路,洗尽铅华始见金,褪去浮华归本真!

ExtJS4在开发阶段可以引用Bootstrap中文网免费的CDN服务,其中日常需要引用的文件如下所示:

<link href="http://cdn.bootcss.com/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/extjs/4.2.1/bootstrap.js"></script>
<script src="http://cdn.bootcss.com/extjs/4.2.1/locale/ext-lang-zh_CN.js"></script>

大家可以从上述列表中看到我们只将bootstrap.js引入了页面,而没有直接引用ExtJS的脚本文件。因为我们可以通过bootstrap在启动的时候动态的选择要将哪些extjs脚本添加到页面中。

那么很奇怪,bootstrap.js是怎么引用到ExtJS的脚本文件的呢?打开bootstrap.js的源码你会发现有这么一段注释:

/**
 * Load the library located at the same path with this file
 *
 * Will automatically load ext-all-dev.js if any of these conditions is true:
 * - Current hostname is localhost
 * - Current hostname is an IP v4 address
 * - Current protocol is "file:"
 *
 * Will load ext-all.js (minified) otherwise
 */

他的大致意思如下:

/**
 * 加载本文件相同路径中的库
 *
 * 满足以下条件将自动加载 ext-all-dev.js:
 * - 当前主机名是 localhost
 * - 当前主机名是 IP v4 地址
 * - 当前协议是 "file:"
 *
 * 其它情况下将加载 ext-all.js (minified)
 */

更神奇的是当我们在主机名是localhost的测试环境的时候,bootstrap.js自动为我们加载了ext-all-dev.js,而当访问使用域名时,bootstrap能够为我们自动加载ext-all.js

下面附一个简单的demo:

<html>
    <head>
        <title> ExtJS 页面学习 </title>
        <link href="http://cdn.bootcss.com/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet">
        <script src="http://cdn.bootcss.com/extjs/4.2.1/bootstrap.js"></script>
        <script src="http://cdn.bootcss.com/extjs/4.2.1/locale/ext-lang-zh_CN.js"></script>
        <script type="text/javascript">
            Ext.onReady(init)
            function init() {
                 Ext.MessageBox.alert("ExtJS", "Hello ExtJS");
              }
        </script>
    </head>

    <body>
    </body>
</html>

最后的显示结果如下图所示:
Ext Hello World 展示效果图

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10258次
    • 积分:172
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:7篇
    • 译文:0篇
    • 评论:0条
    文章分类