Extjs下拉菜单

最新推荐文章于 2023-06-17 22:16:18 发布

原创最新推荐文章于 2023-06-17 22:16:18 发布 · 719 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

extjs

本文详细介绍了使用Extjs编写下拉菜单时遇到的鼠标离开后无法自动隐藏的问题，并通过实例代码展示了如何实现下拉菜单在鼠标离开时自动隐藏的功能。

前两天用Extjs写了一个下拉菜单，鼠标离开后无法自动隐藏，问了老师后，终于解决了

 tbar:[{
                            html:'<html>  </html>',
                            disabled:true
                        }
                           ,'-',
                        {
                            text:'0001',
                            id: 'btn001',
                            menu:new Ext.menu.Menu({
                                id:'menu1',
                                items:[
                                    {
                                        text:'记录一'

                                    },{
                                        text:'记录二'
                                    }
                                ],
                                listeners:{
                                    mouseleave: function(){
                                        this.hide();
                                    },
                                    mouseout: function(){
                                        this.hide();
                                    }
                                }
                            }),
                            listeners:{
                                "mouseover":function()
                                {
                                    this.showMenu();
                                },
                                mouseout: function(btn,e){
                                    if (this.menu.hideMode === 'visibility')
                                    {
                                        if (!(e.getX() >= this.menu.x && e.getX() <= this.menu.x + this.menu.getHeight() && e.getY() >= this.menu.y && e.getY() <= this.menu.y + this.menu.getWidth()))
                                        {
                                            this.hideMenu();
                                        }
                                    }
                                }
                            }
                        }
]