ExtJS框架中由于ID重复引起的异常问题解决


前言

最近在写ExtJS窗体组件的时候,遇到了一个由于ID重复引起的异常问题。折腾了挺久的,终于解决了,这儿记录下我的解决思路,同时也给遇到了相同问题的人,一个思路方向。

问题描述

有一个查询按钮,点击按钮,弹出Ext.Window窗体,查询完后的数据展示在GridPanel中。这儿有个需求,就是对查询到的数据,右击可以进行操作,右击显示的菜单用Ext.menu.Menu
我做完了之后,第一次打开这个window窗体,右击菜单能显示。

但是关闭窗体后,第二次去点开,右击菜单就变成了小方块,无法正常显示了。

我通过chrome浏览器调试发现,当窗体出现后,可以查询到这个实例,但是在关闭窗口后,就变成undefined,说明了这个窗体被销毁了。

窗体被创建
随着窗体关闭被销毁

但是查询右击菜单的时候发现,新建窗体时会跟着一起被实例化,但是关闭后,却不会被销毁。由此我觉得这个应该就是遇到了传说中令人头疼的ExtJS框架的ID冲突问题了。

解决方案

网上查了很多方法,我选择了从窗体销毁这个点出发,解决问题。ExtJS窗体中的closeAction属性默认是close,关闭窗体后就是销毁组件了。那我就在窗体属性里面加上closeAction: 'hide',让关闭窗体的时候动作不是销毁窗体,而是隐藏。

//搜索窗口
    function createWindowSearch() {
        return new Ext.Window({
            id: 'windowSearch',
            width: 1240,
            height: Ext.getBody().getHeight() - 200,
            title: '搜索',
            modal: true,
            layout: 'fit',
            items: fnCreatesearchGrid(),
            closeAction: 'hide'  //关键属性,关闭窗体的时候使窗体隐藏而不是销毁
        });
    }

然后在实例化窗体的时候先增加一个判断,判断这个窗体是否存在,如果不存在就新建,存在的话直接show(),而不用重新创建一个。

{
    xtype: 'button',
    text: '查找小区',
    iconCls: 'icon-find',
    handler: function () {
        if (Ext.getCmp('windowSearch') == null) {                          
            createWindowSearch();
            Ext.getCmp('windowSearch').show();
        } else {
           Ext.getCmp('windowSearch').show();
        }                   
    }
}

这样就让窗体保持唯一,从而解决了因为ID的冲突造成的异常。

你可能感兴趣的:(ExtJS框架中由于ID重复引起的异常问题解决)