初次使用extjs4的版本,在配置学习Ext.Loader()进行js文件的动态加载机制,由于各种原因导致多次失败,纠结2天,现将解决时出现的问题及需要注意事项进行记录
开发环境myeclipse8.5,tomcat6.
目录结构:
WebRoot
-->02(文件夹)
-->createWindow.js
-->createWindow.html
-->ux(文件夹)
-->window.js
createWindow.html中,引入ext环境文件(ext-all.css,bootstrap.js),引入createWindow.js文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>extjs--创建window</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../extjs-4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-4.1.1/bootstrap.js"></script>
<script type="text/javascript" src="createWindow.js"></script>
</head>
<body>
</body>
</html>
createWindow.js
(function(){
Ext.Loader.setConfig({
enabled:true,
paths:{
//定义一个命名空间,路径处添加相对路径
myApp:'ux'
}
});
Ext.onReady(function(){
Ext.create('ux.window',{
//可以根据个性修改值
title:'个性定制的title',
requires:['ux.window']
}).show();
});
})();
window.js
Ext.define('ux.window',{
extend:'Ext.window.Window',
width:200,
height:90,
title:'me is myExt.Window',
initComponent:function(){
this.callParent(arguments);
}
});
在createWindow.js中定义的命名空间是以当前文件位置而填写的相对路径(相对路径不能向上级回退[../])
在window.js中define的第一个参数实际就是相对于 = (命名空间路径 + 文件名)组成
例如以上目录改为如下
-->02(文件夹)
-->createWindow.js
-->createWindow.html
-->ux(文件夹)
-->window(文件夹)
-->window.js
则createWindow.js中paths改为{myApp:'ux/window'}
window.js中define中第一个参数改为'ux.window.window'
createWindow.js中Ext.create()第一个参数改为'ux.window.window'
requires改为'ux.window.window'