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的冲突造成的异常。