您的位置：首页 > Web前端 > JavaScript

Extjs如何动态加载Extjs脚本

2011-12-19 21:45 489 查看

这样做可以省去不少空间流量。需要的时候才会下载对应的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'
})

这样就完成了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： extjs stylesheet function 脚本 javascript button

相关文章推荐

新的分享

章节导航