高级菜单重复出现

Question

请看图
每点击一次左边的树，刷新中间的iframe页面之后，先点击高级查询一次。
然后点击一次树 ，再点击一次高级查询，
然后点击一次树 ，再点击一次高级查询，
如此循环
菜单就成倍增加！
求高手解决啊。。
下面是我表格的代码
[code="java"]var grid = new Ext.grid.GridPanel({
renderTo: "test",
height:400,
title : '中国开源产品',
columns : [{
header : '编号',
dataIndex : 'id',
sortable : true,
renderer:function(value){return ""+value+""}
}, {
header : '名称',
dataIndex : 'uid',
sortable : true
}, {
header : '密码',
dataIndex : 'password',
sortable : true
}, {
header : '职业',
dataIndex : 'remark',
sortable : true
}, {

                        header : '性别',
                        dataIndex : 'sex',
                        sortable : true,
                        renderer : sexrender
                    }],

            store : store,
            loadMask : true,
            viewConfig : {
                forceFit : true
            },

            autoExpandColumn : 2,
            bbar : new Ext.PagingToolbar({
                        pageSize : 5,
                        displayInfo : true,
                        store : store,

                        plugins:[new Ext.ux.plugins.PageComboResizer()],
                        beforePageText : '第',
                        afterPageText : '页 共{0}页',
                        emptyMsg : "没有记录",
                        displayMsg : '显示第 {0} - {1} 条记录，共 {2}条记录'
                    }),
            tbar : [{
                        id : 'addButton',
                        text : '添加员工',
                        iconCls : 'addIconCss',
                        tooltip : '新增员工',
                        handler : onadd,
                        scope : this
                    }, '-', {
                        id : 'editButton',
                        text : '编辑信息',
                        iconCls : 'editIconCss',
                        tooltip : '编辑所选用户',
                        handler : onedit,
                        scope : this
                    }, '-', {
                        id : 'delButton',
                        text : '删除用户',
                        iconCls : 'deleteIconCss',
                        tooltip : '删除所选用户',
                        handler : ondel,
                        scope : this
                    }, '->', {
                        id : 'searchButton',
                        text : '高级查询',
                        iconCls : 'selectIconCss',
                        menu: new Ext.menu.Menu({
                                            id: 'mainMenu1',

                                            items: [{
                                                    text: '按费率名称查询',
                                                    iconCls: 'selectIconCss',
                                                    id: 'menu001'


                                                    },{
                                                    text: '按费率前缀查询',
                                                    iconCls: 'selectIconCss',
                                                    id: 'menu002'


                                                     }]
                                            })
                }]

        });[/code]

我刚刚发现这个页面单独出来就没问题，内嵌框架就有问题。
我内嵌的事件是这样写的
[code="java"] m1_1.on("click", function() {
Ext.getCmp("center").load({

url : "right.php",

discardUrl : false,

nocache : true,

          text : "Loading...",  
          timeout : 30,  
          scripts : true
      });  
  });[/code]

Answer 1

这个系统设计有很大问题，现在你使用的是Panel.load方法加载子页面，已经算是OPOA模式了；在这种模式下要考虑的事件很多。

首先，切换页面后，原本页面的元素都没有销毁。
非OPOA是不会有问题，因为页面关闭就自动释放了。现在你使用的是load方法加载，它是不会创建iframe的，而是直接引入html，所以子页面中的组件与主页面同属一个运行环境。这样导致你每次切换都有一大堆组件没有释放。
普通的放于面板内的还好，组件没销毁但html销毁了，但弹出窗口、菜单这类关联的dom节点位于其它位置的组件，连html都不会销毁。

其次，很多组件都使用到了ID，在OPOA内极有可能与其它页面产生冲突，因为它是唯一的，无法并存。

这里出现重复的原因大致是这样：
切换页面后，菜单(Menu)是位于Body下的，是不会被更新掉。
而它又使用了ID，并会体现在html节点上。
当你再次点击时，子页面内的组件又创建了一次，获取ID时拿到旧的html，在它的基础上又重新render了自己的dom节点，从而出现重复项

最简单的解决办法是使用iframe，但会使与子页面交流不便
或者全面向OPOA方向改进，抽象页面，增加清理方法，避免使用ID，等等