您的位置：首页 > Web前端 > JavaScript

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

2016-11-19 11:42 791 查看

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

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">

<link rel="styleSheet" type="text/css" href="static/plugins/extjs/resources/css/ext-all.css" />

<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();
});*/

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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