Ext出现的问题：this.dom is undefined

解决ExtJS弹窗关闭问题

最新推荐文章于 2022-11-03 15:19:17 发布

原创最新推荐文章于 2022-11-03 15:19:17 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JS 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在使用ExtJS框架中遇到的弹出窗口关闭导致父页面元素未定义错误的问题，通过设置窗口关闭行为为隐藏而不是关闭，并提供了解决方案及详细原因解释。

问题描述：

首先一个带有grid的页面，此页面弹出一个窗口，此窗口选择一些数据返回给父页面也就是那个带有grid的页面；数据填充好了而父页面却无法提交提示 this.dom is undefined。

解决方法：

弹出的窗口的closeAction的不要设置为close,要设置成hide和弹出的窗口的关闭方式改为win.hide()就好了！

原因不明！

var win = new Ext.Window({
   layout : '',
   title : '',
   closeAction : 'hide',//如果值是close 可能会产生this.dom is undefined
   items : {},
   buttons: [{
        text: '保存',
        handler:function(){}
              },{
                text: '取消',
handler:function(){
    win.close();//win.hiden()可能会产生页面元素错乱的情况
              }
            }]
});

close () : void
关闭窗口，从DOM中删除它，并销毁窗口对象。在关闭之前触发beforeclose事件，如果事件处理器返回...
在关闭之前触发beforeclose事件，如果事件处理器返回false则取消关闭操作 Closes the Window, removes it from the DOM, 销毁window对象和所有子控件. 在关闭之前触发 beforeclose事件如果

事件处理器返回false则取消关闭操作

注: 此方法不会被 closeAction 设置影响，仅当点击 'close'顶部按钮有影响. 如果要隐藏window并不销毁,调用 hide方法.

参数:
无。
返回值:
void

hide ([ String/Element animateTarget ], [ Function callback ], [ Object scope ] ) : Ext.Window
隐藏窗口，将其设置为不可见，并设置一个负数偏移量。

参数:
    1、animateTarget : String/Element
       (可选)目标元素或者id，在window隐藏时动画效果的起始处 (默认为null，没有动画效果)
    2、callback : Function
       (可选)在window被隐藏后需要调用的回调函数
    3、scope : Object
       (可选)作用域( this 引用)回调函数将在其中被执行。默认为当前window.
返回值:
    1、Ext.Window
       this

------------------------------------------------转载----------------------------------------------------------------

1.使用Ext新增一个弹出窗口（组件）时，窗口（组件）的配置对象里的id属性如果和页面上的某个元素E的id相同时，组件会被渲染到元素E上，如果元素E的样式和弹出窗口（组件）的样式不一致时，会导致窗口不能被正常显示。如:

<html>
<head><title>Ext Js</title>
<link href="ext/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
<script language="javascript" src="ext/adapter/ext/ext-base.js"></script>
<script language="javascript" src="ext/ext-all.js"></script>
<script language="javascript">
function genWindow()
{
  var _window = new Ext.Window({id:'treeWindow',border:0,layout:'fit',modal:true,width:200,height:350,html:'myWindow'});
//与页面上的div treeWindow冲突,弹出窗口不能被正常显示
  _window.show();
}
Ext.onReady(function(genWindow();));
</script>
<body>
<div id="treeWindow" style="height:400px; width:500px; text-align:center;">content</div>
</body>
</html>

2.Ext弹出窗口(组件)的隐藏和销毁:如果窗口(组件)的内容不是动态获取的，并且有多次调用窗口（组件）的情况或可能时，则需要使用单例模式来创建弹出窗口(组件)对象，并且窗口(组件)的属性closeAction:'hide'（如果有使用窗口的'X'关闭功能）,用hide()方法隐藏弹出窗口(组件),而不能closeAction:'hide'或者用close（）方法将窗口（组件）销毁.因为用closeAction:'hide'或者用close（）方法会将窗口(组件)销毁的同时也将页面上的静态内容一并销毁，第二次调用就会出错(不正常)或者没有内容。

   function openTeachPlanList()
   {
                /**************************************************************************
                 *如果不是动态内容，并且此方法可能调用多次时，配置窗口属性closeAction:'hide'，
                 *不然可能会出现第二次调用此方式时，静态内容已经被删除。
                 *每次调用此方法先检查窗口是否已经打开（隐藏）了,是则show(),否则创建
                 *这种情况属于单例模式的应用,需遵守单例的规则
                ***************************************************************************/
                   if(Ext.getCmp('_tplWindow'))
                {
                        Ext.getCmp('_tplWindow').show();
                        return;
                }
                        
                var tplWin = new Ext.Window({
                        id:'_tplWindow',
                        contentEl:'teachPlanList',//静态内容
                        title:'教案列表',
                        border:0,
                        layout:'fit',
                        buttonAlign:'center',
                        closeAction:'hide',//注意这里使用了hide
                        modal:true,
                        width:500,
                        height:250
                });
                
                tplWin.show();
   }

3、Extjs.Window中closeAction:"hide":是将window隐藏，用window.show()可以将它再次显示出来。这样就导致一个问题，如果其他事件调用此window，那么window的部分控件就会因重名而显示不出来。要想显示出来，就得将Window的 closeAction属性改成"close"，这样关闭window就将它从内存中撤销了。其他事件调用此window又可以正常显示了。