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

昨天一同事遇到一个问题，把一个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();
        		}) 
        	}}
        })

    });