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

最新推荐文章于 2017-08-04 15:30:52 发布

itlwc

最新推荐文章于 2017-08-04 15:30:52 发布

阅读量3.3k

点赞数

分类专栏： Extjs 文章标签： javascript stylesheet div function button callback

本文链接：https://blog.csdn.net/itlwc/article/details/7887339

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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>

itlwc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Extjs-局部更新新页面内容 Ext.Updater

t1.jsp plain textt2.jspExt.get('div').setWidth(100, { duration: 2, callback: this.highlight, scope: this}); with javascriptindex.jsp /ext/resources/css/ext-all.css"
复制链接

扫一扫

专栏目录