ExtJs 6.0+快速入门，ext-bootstrap.js文件的分析，各版本API下载（一）

ExtAPI 下载地址如下，包含各个版本 
http://docs.sencha.com/misc/guides/offline_docs.html

1.使用工具HBuilder 
2.java 版本 8.0 
3.extjs 版本 6.2.0

注意顺序

        <!--
            描述：引入主题样式文件
        -->
        <link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-gray\resources\theme-gray-all.css"/>

        <!--
            描述：引入控制主题的js脚本
            -->
        <script src="extjs\build\classic\theme-gray\theme-gray.js" type="text/javascript" charset="utf-8"></script>


        <!--
            描述：引入ExtBootstrap文件，这个文件会默认加载
            build->ext-all-debug.js
        -->
        <script src="extjs/ext-bootstrap.js" type="text/javascript" charset="utf-8"></script>

        <!--
            描述：引入I18N 国际化文件
        -->
        <script src="extjs/build/classic/locale/locale-zh_CN.js" type="text/javascript" charset="utf-8"></script>

项目包结构

书写js代码绘制helloWorld项目

<script type="text/javascript">
    Ext.onReady(function(){
        Ext.MessageBox.alert("欢迎","你好，欢迎来到ExtJS6.0!");
    });
</script>

效果图

主题

更换其他主题的方法

theme-neptune主题

使用方法

<link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-neptune\resources\theme-neptune-all.css"/>

 

效果图

theme-neptune-touch主题

使用方法

<link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-neptune-touch\resources\theme-neptune-touch-all.css"/>

 

效果图

theme-triton主题

使用方法

<link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-triton\resources\theme-triton-all.css"/>

 

效果图

theme-gray主题

使用方法

<link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-gray\resources\theme-gray-all.css"/>

 

效果图

theme-crisp主题

使用方法

<link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-crisp\resources\theme-crisp-all.css"/>

 

效果图

theme-aria主题

使用方法

<link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-aria\resources\theme-aria-all.css"/>

 

效果图

theme-classic

使用方法

<link rel="stylesheet" type="text/css" href="extjs\build\classic\theme-classic\resources\theme-classic-all.css"/>

 

效果图

ext-bootstrap.js

这个文件源码如下

/**
 * Load the library located at the same path with this file
 * 此文件会默认自动加载ext-all-debug.js文件
 * 1.当主机名是localhost
 * 2.当主机名是ipv4地址
 * 3.协议是file协议
 * 4.带有debug参数的
 * 例如(http://foo/test.html?debug)
 *
 * 1.如果在url后加nodebug即可加载ext-all.js文件
 * 例如(http://foo/test.html?nodebug)
 */
(function() {
    var scripts = document.getElementsByTagName('script'),
        localhostTests = [
            /^localhost$/,
            /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(:\d{1,5})?\b/ // IP v4
        ],
        host = window.location.hostname,
        isDevelopment = null,
        queryString = window.location.search,
        test, path, i, ln, scriptSrc, match;

    for (i = 0, ln = scripts.length; i < ln; i++) {
        scriptSrc = scripts[i].src;

        match = scriptSrc.match(/ext-bootstrap\.js$/);

        if (match) {
            /**
             * use a path without the ext-bootstrap.js file on it. http://path/to/ext/ext-bootstrap.js will become
             * http://path/to/ext/
             */
            path = scriptSrc.substring(0, scriptSrc.length - match[0].length);
            break;
        }
    }

    if (isDevelopment === null) {
        for (i = 0, ln = localhostTests.length; i < ln; i++) {
            test = localhostTests[i];

            if (host.search(test) !== -1) {
                //host is localhost or an IP address
                isDevelopment = true;
                break;
            }
        }
    }

    if (isDevelopment === null && window.location.protocol === 'file:') {
        isDevelopment = true;
    }

    if (!isDevelopment && queryString.match('(\\?|&)debug') !== null) {
        //debug is present in the query string
        isDevelopment = true;
    } else if (isDevelopment && queryString.match('(\\?|&)nodebug') !== null) {
        //nodebug is present in the query string
        isDevelopment = false;
    }

    document.write('<script type="text/javascript" charset="UTF-8" src="' +
        path + 'build/ext-all' + (isDevelopment ? '-debug' : '') + '.js"></script>');
})();