<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://localhost/ext-4/resources/css/ext-all.css" />
<script type="text/javascript" src="http://localhost/ext-4/ext-debug.js"></script>
</head>
<body>
</body>
</html>
2、需要引用的脚本是 ExtJS 根目录下的 ext-debug.js ， 不是 ext-all-debug.js， 这个文件非常小， 只有几百K ， 当让这个只是最基本的 ExtJS 组件， 不包括任何的界面功能。
3、配置 Ext.Loader 启用动态加载；
4、ExtJS 中的动态加载是由 Ext.Loader 来完成的， 默认不启用动态加载， 所以接下来需要做的事配置 Ext.Loader 启用动态加载， 在上面模板的 body 标签内添加如下代码：
<script type="text/javascript">
Ext.onReady(function() {
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
Ext : '/ext-4/src'
}
})
})
</script>
注意：上面的代码启用了动态加载， 禁用了浏览器缓存， 以及指定了 ExtJS 的所部署的路径。
1、首先,需要先创建一个基本可用的ExtJS模板,这个很简单,如下所示:<!DOCTYPEhtml><html><head><title></title><linkrel="stylesheet"type="text/cssjsp页面中是一部分页面布局是通过extjs代码来展示的。比如：
var htmlPanel = new Ext.Panel( {
width : '100%',
height : '100%',
autoScroll : false,
frame : true,
html : '<div id="sna_html"></div>',//div页面在这里显示
listeners : {
'beforerender' : function() {
Ext.Ajax( {
url : request.do',//请求
params : {
id:id//整个是参数，没有的不用写
},
success : function(ret) {
document.getElementById("sna_html").innerHTML = ret//动态的将页面加载
},
waitmsg : "请求中......."
})
}
}
})
以上代码：只是动态的将jsp页面加载到了div中。
