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>'); })();