ExtJS 学习笔记示例1-点击按钮弹出一个新窗体，避免重复创建

最新推荐文章于 2020-10-10 15:56:50 发布

xuejingmi

最新推荐文章于 2020-10-10 15:56:50 发布

阅读量3.6k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xuejm0218/article/details/53228794

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本人只是一枚编程界的小学生，虚心求教。代码仅供参考，勿喷！

1、代码结构图

2、代码示例windows_001.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>示例1-点击按钮弹出一个新窗体，避免重复创建</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- ext的样式文件 -->
	<link rel="styleSheet" type="text/css" href="static/plugins/extjs/resources/css/ext-all.css" />
	<!-- extjs的核心文件 -->
	<script type="text/javascript" charset="utf-8" src="static/plugins/extjs/ext-all-debug.js"></script>
	<!-- 国际化文件 -->
	<script type="text/javascript" charset="utf-8" src="static/plugins/extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" charset="utf-8" src="static/js/window_001.js"></script>
</head>
<body>
      <input type="button" id='btn' value="点击"/>
</body>
</html>

3、代码示例 window_001.js

Ext.onReady(function(){

	//ExtWeb 300例 ex001 点击按钮出来一个新窗体（注意重复创建的问题）
	
	//错误代码示例
	/*
	Ext.get('btn').on('click',function(){  
		
		Ext.create('Ext.window.Window', {
			id:'myWindow',      //有id属性时重复创建有bug,没有时会创建多个window     
		    title: '我的窗口',
		    height: '36%',
		    width: '30%',          
		    renderTo:Ext.getBody()   
		}).show();
		
	});
	*/
	
	//推荐解决方案
	Ext.get('btn').on('click',function(){  
		if(!Ext.getCmp('myWindow')){    //（第二种解决方案）判断是否存在该组件
			Ext.create('Ext.window.Window', {
				id:'myWindow',           
			    title: '我的窗口',
			    height: '36%',
			    width: '30%',
			    //modal:true,            //（第一种解决方案）加模态
			    renderTo:Ext.getBody()   
			}).show();
		}
	});
	
	//第三种解决方案 
	//closeAction 属性默认是destroy即当关闭window时，默认销毁故设置为隐藏
	//因为窗口一直存在，消耗浏览器内存，不推荐使用。
	
	/*
	var win = Ext.create('Ext.window.Window', {
			      title: '我的窗口',
			      height: '36%',
			      width: '30%',
			      renderTo:Ext.getBody(),
			      closeAction:'hide' 
			  });
			  
	Ext.get('btn').on('click',function(){ 
		win.show();
	});*/
	
});

xuejingmi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ExtJS 学习笔记示例1-点击按钮弹出一个新窗体，避免重复创建

本人只是一枚编程界的小学生，虚心求教。代码仅供参考，勿喷！1、代码结构图2、代码示例windows_001.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>示例1-点击按钮弹出一个新窗体，避免重复创建
复制链接

扫一扫