Extjs 3.4 中 DateField不能放在Menu中的问题解决方法

来源：互联网发布：海康hiddns域名注册编辑：程序博客网时间：2024/05/16 17:50

昨天一同事遇到一个问题，把一个dateField放在menu中作为菜单项，出现了以下问题

如图，点击datefield上的trigger后menu会隐藏

于是分析原因，

原来dateField和combobox不同的是，datefield中弹出的是一个Menu,当一个Menu弹出的时候，会默认把当前其它的menu隐藏

于是把dateField改成这样

 var dateField = new Ext.form.DateField({    id:'date1',    hideParent :false,    menu:new Ext.menu.DateMenu({            hideOnClick: false,            focusOnSelect: false,            allowOtherMenus:true...

于菜单不会被隐藏了，但是又出现了新的问题,trigger展开后，点击dateField所在的Menu上的其它位置，trigger不会自动收回去

然后看了一下Menu的代码

Ext.menu.MenuMgr中

 // private   function onShow(m){       var last = active.last();       lastShow = new Date();       active.add(m);       if(!attached){           map.enable();           Ext.getDoc().on("mousedown", onMouseDown);           attached = true;       }       if(m.parentMenu){          m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);          m.parentMenu.activeChild = m;       }else if(last && !last.isDestroyed && last.isVisible()){          m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);       }   }

 // private   function onMouseDown(e){       if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){           hideAll();       }   }

原来如上面代码所示，如果事件发生在任何Menu上面，则都不会触发隐藏,因为datefield的trigger弹出的是一个Menu,所以当然不会隐藏

于是模仿上面的方法，在datefield上做特殊处理

 var dateField = new Ext.form.DateField({    menu:new Ext.menu.DateMenu({            hideOnClick: false,            focusOnSelect: false,            allowOtherMenus:true,        listeners:{render:function(m){        m.mon(Ext.getDoc(),'mousedown',function(e){        if(!m.el.contains(e.getTarget())){        m.hide();        }        });        }}        })    });

在mousedown的时候，判断事件如果没有发生在当前menu中的任何一个元素上,则menu隐藏

问题终于解决了

上面的代码还可以这样改

  var dateField = new Ext.form.DateField({    id:'date1',    hideParent :false,    menu:new Ext.menu.DateMenu({            hideOnClick: false,            focusOnSelect: false,            allowOtherMenus:true,        listeners:{render:function(m){        m.mon(Ext.getBody(),'mousedown',function(e){        m.hide();        });        m.el.on('mousedown',function(e){        e.preventDefault();        e.stopPropagation();        })         }}        })    });

0 0