Extjs-局部更新新页面内容 Ext.Updater

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>

你可能感兴趣的:(JavaScript,function,callback,div,button,stylesheet)