Ext JS学习第五天 Ext_window组件（二）

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_30348519

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lisr/p/3928252.html

本文通过两个示例讲解了如何避免在ExtJS中重复创建窗口，探讨了按钮点击事件触发窗口显示的不同方式，并分析了常见错误及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此文用来记录学习笔记

•上一讲我们已经学过了window的使用，那么在这将中，我们将结合然后把Ext中需要注意的地方，以及组建的使用给予介绍。indow做几个Web开发的经典示例.

•ExtWeb实战300例：

–例1:点击按钮打开一个window，window重复创建的问题

•重点分析：这个问题是初学者经常会犯错的地方，一般来说简单的代码不会产生此问题，但是如果以后代码复杂以后，这个问题如果发生调试起来会非常麻烦！！

附上栗子代码

 1 Ext.onReady(function () {
 2 
 3     //ex001:点击一个按钮 ,打开一个新的窗体 window重复创建的问题
 4     //第一种实现
 5     //JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
 6     var btn = Ext.get('btn');        //这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);
 7     btn.on('click', function () {
 8         if (!Ext.getCmp('mywin')) {
 9             Ext.create('Ext.window.Window', {
10                 id: 'mywin',        //如果你给组件加了一个id  那么这个组件就会被Ext所管理
11                 title: '新窗体',
12                 height: 300,
13                 width: 400,
14                 renderTo: Ext.getBody() //,
15                 //modal:true
16             }).show();
17         }
18     });
19 
20 
21 });

 1 Ext.onReady(function () {
 2 
 3     //ex001:点击一个按钮 ,打开一个新的窗体 window重复创建的问题
 4     //第二种实现
 5         var win = Ext.create('Ext.window.Window',{
 6                     title:'新窗体' , 
 7                     height:300 ,
 8                     width:400 ,
 9                     renderTo:Ext.getBody() ,
10                     closeAction:'hide'  //closeAction默认是destroy 
11         });
12         
13         Ext.get('btn').on('click',function(){
14                 win.show();
15         });
16 
17 });