t1.jsp
<div style="background-color:red;">
<b>plain text</b>
</div>
t2.jsp
<script type='text/javascript'>
Ext.get('div').setWidth(100, {
duration: 2,
callback: this.highlight,
scope: this
});
</script>
<div id='div' style="background-color:green;">
<b>with javascript</b>
</div>
index.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<% String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.get('lwc').on('click', function() {
/*
Ext.get('result')获得id='result'的div
getUpdater()获得div对应的Ext.Updater对象
调用update函数,取得url:'t1.jsp'的内容替换div的内容
*/
Ext.get('result').getUpdater().update({
url: 't1.jsp'
});
});
Ext.get('wr').on('click', function() {
Ext.get('result').getUpdater().update({
url: 't2.jsp',
/*
这样updater就会在获得页面数据之后自动检测数据中是否包含javascript脚本
如果页面包含javascript,Ext.updater就会在读取页面内容的后面将页面中的javascript脚本提取出来并执行这些代码
*/
scripts: true
});
});
});
</script>
</head>
<body>
<div>
<button id="lwc"><b>变化成静态页面</b></button>
<button id="wr"><b>变化成带javascript的页面</b></button>
</div>
<div id="result"></div>
</body>
</html>