这样做可以省去不少空间流量。需要的时候才会下载对应的extjs脚本
前提:我们设定我们当前的工作目录名称为code.主文件放在其中,code文件夹下有个子文件夹叫ux,用于放插件。
进入正文。
code文件夹 首先 主页面 index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="test_require.js"></script>
</head>
<body>
<button id='buttons' >click me </button>
</body>
</html>
在主页面中,我只加载了一个js脚本,也就是test_require.js脚本。其内容如下所示。
(function(){
Ext.Loader.setConfig({
enabled:true,//启用这个机制
});
Ext.onReady(main);
function main()
{
Ext.get("buttons").on("click",function(){//获得按钮的DOM对象 他放在onReady中才有效
var win=Ext.create("ux.window",{//这里控制路径名 等同于ux/window.js
});
win.show();
});
};
})();
在ux文件中 有一文件叫做window.js
// JavaScript Document
Ext.define('ux.window',{//这里的名称一定要与test_require.js中的一致
extend:'Ext.window.Window',
height:300,
width:300,
title:'fanpei'
})
这样就完成了。