ExtJS学习笔记一:HelloWorld

原创 2015年07月09日 10:50:16

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 展示效果图

版权声明:版权所有,转载请注明出处,文章来自 - 听枫阁<http://blog.csdn.net/pl1612127>

EXTJS学习笔记

  • 2014年05月19日 21:39
  • 1.04MB
  • 下载

ExtJs学习笔记.pdf

  • 2011年07月06日 15:54
  • 870KB
  • 下载

rabbitMQ学习笔记(二) 简单的发送与接收消息 HelloWorld

首先要下载rabbitmq的javaClient库,然后加入到项目中,下载地址为:http://www.rabbitmq.com/releases/rabbitmq-java-client/v3.1....

EXTJS学习笔记

  • 2012年05月15日 14:57
  • 1.04MB
  • 下载

Extjs学习笔记有用

  • 2012年12月18日 13:12
  • 340KB
  • 下载

Unity3D学习笔记(十五)脚本:HelloWorld!

憋了这么多章的基础知识,终于可以开始写脚本啦。虽然Unity提供了强大的引擎编辑功能,让游戏设计师可以通过简单的拖放动作就能制作出漂亮的游戏,但作为程序员怎么可以一行代码都不写呢,嘿嘿。 Uni...

Extjs4.0学习笔记

  • 2012年10月27日 22:25
  • 10.82MB
  • 下载

extjs4 学习笔记源码

  • 2011年06月13日 11:09
  • 1.07MB
  • 下载

GTK+学习笔记1——Helloworld

开发环境 Fedora 12 GTK+2.0 需要安装下面两个软件包: yum  install  gtk2 yum  install  gtk2-devel 最简单的GTK程序 ...
  • exbob
  • exbob
  • 2011年11月03日 13:38
  • 3286

extjs学习笔记

  • 2015年04月12日 17:15
  • 480KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS学习笔记一:HelloWorld
举报原因:
原因补充:

(最多只允许输入30个字)