ext 实现一个鼠标滑过弹出 子菜单面板

最新推荐文章于 2023-04-20 13:12:22 发布
最新推荐文章于 2023-04-20 13:12:22 发布
阅读量1k 收藏
点赞数
分类专栏： Ext.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sukla/article/details/78649798
版权
本文介绍如何在ExtJS中实现自定义的镜像菜单功能。通过使用border布局及Ext.tree.Panel组件，并结合自定义的CloneMenuListView组件，实现了菜单的动态加载与展示。文章详细介绍了组件间的交互逻辑与菜单的渲染过程。
摘要由CSDN通过智能技术生成

1，效果如下


2，思路

页面使用了 border 布局 

west 就是 菜单所在的区域 使用 fit 布局 这样就只会显示第一个子元素

其实有两个 子元素

第二个 子元素 是一个 默认的 Ext.tree.Panel 给它设置一个 autoLoad 的 store 获取菜单的数据 

west 的第一个组件 也就是 给用户看的这个组件 我叫它镜像菜单 

当 treePanel 获取到数据之后 将 镜像菜单的 viewModel 中的默认数据更新 成 treePanel 的数据 然后 让镜像菜单重新渲染即可

接下来 基本就和treePanel 没什么关系了

在 镜像菜单的  initComponent 方法中 获取自己的 viewModel 的数据 渲染成菜单的样子即可 具体怎么渲染就是一下布局 一些事件了

通过 监听 mouseover 事件 触发滑动 

调用 menushow 方法 显示 子菜单面板

子菜单面板的点击事件 触发路由 加上想要的参数 就完成跳转了 然后在 路由事件中做一下对应的操作 比如生成新的 tab 页面等等 我的是跳到指定的 tab 页面

3，主要代码

Ext.define('app.view.main.Main', {
    extend: 'Ext.Container',
    xtype: 'app-main',

    requires: [
        'Ext.window.MessageBox',
        'app.view.main.MainController',
        'app.view.main.MainModel',
        'app.view.main.CloneMenuListView',
        'app.view.main.TrueMenuListView',
        'app.view.main.CenterContainer'
    ],

    layout: {
        type: 'border'
    },

    controller: 'main',
    viewModel: 'main',

    items: [
        {
            region: 'north',
            height: 60,
            style: {
                border: 0,
                borderBottom: '1px solid #ddd'
            },
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'button',
                    text: '自定义镜像菜单',
                    handler: 'headerBtnClick'
                }
            ]
        },
        {
            region: 'west',
            xtype: 'panel',
            title: '自定义菜单',
            style: {
                borderRight: '1px solid #eee'
            },
            reference: 'west',
            width: 150,
            layout: {
                type: 'fit'
            },
            items: [
                //{
                //    xtype:'trueMenuListView'
                //},
                {
                    xtype: 'cloneMenuListView'
                },
                {
                    xtype: 'trueMenuListView'
                }
            ]

        },
        {
            region: 'center',
            xtype: 'center-container'
        }
    ]
});



/**
 * Created by Sukla on 2017/11/24.
 */
Ext.define('app.view.main.TrueMenuListView', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.trueMenuListView',
    reference: 'trueMenuListView',

    requires: [
        'Ext.data.TreeStore'
    ],
    rootVisible: false,
    useArrows: true,

    width: 150,
    store: Ext.create('app.store.TrueMenuListStore'),

    viewConfig: {
        listeners: {
            render: 'trueMenuRender'

        },
        getRowClass: function (record, rowindex, rowParams, store) {
            debugger;
            this.getRefOwner().getRefOwner().down('cloneMenuListView').getViewModel().set('arr',store.data.items);
            this.getRefOwner().getRefOwner().down('cloneMenuListView').initComponent();
        }
    }
})


/**
 * Created by Sukla on 2017/11/24.
 */
Ext.define('app.view.main.CloneMenuListView', {
    extend: 'Ext.Container',
    alias: 'widget.cloneMenuListView',
    reference: 'cloneMenuListView',

    width: 150,
    layout: {
        type: 'vbox'
    },
    cls: 'my-menu-contanier',
    defaults: {
        xtype: 'button',
        cls: 'myself-menu',
        overCls: 'myself-over-menu',
        listeners: {
            mouseover: 'myselfMenuOver'
        },
        width: 150,
        height: 34,
        style: {
            border: 0,
            margin: 0,
            padding: 0
        },
        menuAlign: 'tr'
    },
    viewModel: {
        data: {
            arr: [
                //{
                //    data:{
                //        allowDrag: true,
                //        allowDrop: true,
                //        checked: null,
                //        children: null,
                //        cls: "",
                //        depth: 2,
                //        expandable: true,
                //        expanded: false,
                //        glyph: "",
                //        href: "",
                //        hrefTarget: "",
                //        icon: "",
                //        iconCls: "",
                //        id: "demo",
                //        index: 0,
                //        isFirst: true,
                //        isLast: false,
                //        leaf: true,
                //        loaded: false,
                //        loading: false,
                //        parentId: "parent-tree-a",
                //        qshowDelay: 0,
                //        qtip: "",
                //        qtitle: "",
                //        root: false,
                //        text: "子菜单A",
                //        visible: true
                //    }
                //}

            ]
        }
    },

    initComponent: function () {
        debugger;
        var arr = this.getViewModel().get('arr');
        this.items = [];
        for (var i = 0; i < arr.length; i++) {
            var item = {};
            var menuItems = [];


            if (arr[i].data.children) {
                var children = arr[i].data.children;
                for (var j = 0; j < children.length; j++) {
                    var menuItem={
                        items:[]
                    }
                    //判断二级菜单是否叶子节点 从而准备不同的渲染组件
                    if(children[j].leaf){

                    }else{
                        var leafItems=[];
                        if(children[j].children){
                            var leafChild=children[j].children;
                            for(var k=0;k<leafChild.length;k++){
                                leafItems.push({
                                    itemId: leafChild[k].id,
                                    text:leafChild[k].text
                                })
                            }
                        }
                        menuItem.items.push({
                            width: 100,
                            html: children[j].text
                        });
                        menuItem.items.push( {
                            flex: 1,
                            layout: {
                                type: 'table',
                                columns: 5
                            },
                            defaults: {
                                xtype: 'button',
                                width: 70,
                                height: 40,
                                margin: 5,
                                text: '子菜单',
                                handler: "onMyMenuSelecte"
                            },
                            items: leafItems
                        })
                    }
                    menuItems.push(menuItem)
                }
            }
            var menus = [
                {
                    xtype: 'panel',
                    padding: 0,
                    margin: 0,
                    border: '1px solid #00f',
                    width: 500,
                    minHeight: 50,
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    defaults: {
                        layout: {
                            type: 'hbox',
                            align: 'stretch'
                        }
                    },
                    items: menuItems
                }
            ];

            //一级菜单
            item.text = arr[i].data.text;
            //二级菜单
            item.menu = menus;
            this.items.push(item)
        }

        //this.items = [
        //    {
        //        text: '交易管理',
        //        menu: [
        //            {
        //                xtype: 'panel',
        //                padding: 0,
        //                margin: 0,
        //                border: '1px solid #00f',
        //                width: 500,
        //                minHeight: 50,
        //                layout: {
        //                    type: 'vbox',
        //                    align: 'stretch'
        //                },
        //                defaults: {
        //                    layout: {
        //                        type: 'hbox',
        //                        align: 'stretch'
        //                    }
        //                },
        //                items: [
        //                    {
        //                        items: [
        //                            {
        //                                width: 100,
        //                                html: '二级菜单'
        //                            },
        //                            {
        //                                flex: 1,
        //                                layout: {
        //                                    type: 'table',
        //                                    columns: 3
        //                                },
        //                                defaults: {
        //                                    xtype: 'button',
        //                                    width: 70,
        //                                    height: 40,
        //                                    margin: 5,
        //                                    text: '子菜单',
        //                                    handler: "onMyMenuSelecte"
        //                                },
        //                                items: [
        //                                    {
        //                                        itemId: 'menu-001'
        //                                    }
        //                                ]
        //                            }
        //                        ]
        //                    },
        //                    {
        //                        items: [
        //                            {
        //                                width: 100,
        //                                html: '二级菜单'
        //                            },
        //                            {
        //                                flex: 1,
        //                                layout: {
        //                                    type: 'table',
        //                                    columns: 3
        //                                },
        //                                defaults: {
        //                                    xtype: 'button',
        //                                    width: 70,
        //                                    height: 40,
        //                                    margin: 5,
        //                                    text: '子菜单',
        //                                    handler: "onMyMenuSelecte"
        //                                },
        //                                items: [
        //                                    {
        //                                        itemId: 'menu-0011'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0011'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0012'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0013'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0014'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0015'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0016'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0017'
        //                                    },
        //                                    {
        //                                        itemId: 'menu-0018'
        //                                    }
        //                                ]
        //                            }
        //                        ]
        //                    }
        //                ]
        //            }
        //        ]
        //    }
        //];
        this.callParent();
    }

})

Ext.define('app.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',
    headerBtnClick: function () {
        debugger;
    },
    trueMenuRender:function(){
    },
    myselfMenuOver:function(btn){
        btn.showMenu();
    },

    routes: {
        ':id': {
            action: 'handleRoute',//执行跳转
            before: 'beforeHandleRoute'//路由跳转前操作
        }
    },

    /**
     * 路由跳转前的事件
     * @param id
     * @param action
     */
    beforeHandleRoute: function (id, action) {
//        var me = this,
//            treeNav = me.lookupReference('lefttreelistnav'),
//            store = treeNav.getStore(),
//            treeNavItem = store.getNodeById(id);
//        if (treeNavItem) {
        action.resume();
//        } else if (store.getCount() === 0) {
//            // 在store load事件中判断节点，避免store数据未加载情况
//            store.on('load', function () {
//                var rootNode = treeNav.getRootNode();
//                if (rootNode.hasChildNodes()) {
//                    rootNode.expand();
//                }
//                node = store.getNodeById(id);
//                if (node) {
//                    action.resume();
//                } else {
//                    //Ext.Msg.alert('路由跳转失败1', '找不到id为' + id + ' 的组件');
//                    action.stop();
//                }
//            });
//            store.load();
//        } else {
         Ext.Msg.alert('路由跳转失败21', store.getCount());
         Ext.Msg.alert('路由跳转失败2', '找不到id为' + id + ' 的组件');
//            action.stop();
//        }
    },

    /**
     * 执行路由
     * @param id
     */
    handleRoute: function (id) {
        var me = this,
        //    mainView = me.getView(),
        //    treeNav = me.lookupReference('lefttreelistnav'),
            centerContainer = me.lookupReference('centerContainer');
        //    store = treeNav.getStore(),
        //    treeNavItem = store.getNodeById(id),
        //    className, cmp, ViewClass;
        //
        响应路由，左侧树定位到相应节点
        var parentNode = treeNavItem.parentNode;
        treeNav.getSelectionModel().select(treeNavItem);
        treeNav.getView().expand(parentNode);
        treeNav.getView().focusNode(treeNavItem);
        //
        if (treeNavItem.isLeaf()&&treeNavItem.get('resLevel')==2) {
        //if (treeNavItem.isLeaf()) {
        me.addTabPanel(centerContainer, id, 'centerContainer');
        //}
    },

    /**
     * 根据点击的菜单显示相应内容页
     * @param targetPanel
     * @param treeNavItem
     * @param targetPanelStr
     */
    addTabPanel: function (targetPanel, treeNavItem, targetPanelStr) {
        var newTab = targetPanel.items.findBy(function (tab) {
            return tab.title === treeNavItem;
        });

        if (!newTab) {
            var tabObject = {
                xtype: 'panel',
                closable: true,
                title: treeNavItem
                //className: treeNavItem.get('id'),
                //resParams: treeNavItem.get('id'),
                //resId: treeNavItem.get('id')
            };
            //if (treeNavItem.get('resUri') === 'reportquery') {// 报表查询特殊处理
            //    tabObject.itemId = treeNavItem.get('id');
            //    tabObject.targetPanel = 'mainpanel';
            //}
            newTab = targetPanel.add(tabObject);
        }
        targetPanel.setActiveTab(newTab);
    },


    onMyMenuSelecte: function (selecteMenu) {
        this.redirectTo(selecteMenu.itemId);
    }


});

4，css

.my-menu-contanier,.myself-menu{
    background:#7b7b7b!important;
}
.myself-menu{
    border-bottom:1px solid #9b9b9b!important;
    font-size: 16px!important;
}
.myself-over-menu{
    background:rgba(0, 130, 223, 1)!important;
}

5，store 

/**
 * Created by Sukla on 2017/11/24.
 */
Ext.define('app.store.TrueMenuListStore', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.trueMenuListStore',
    autoLoad:true,
    proxy: {
        type: 'ajax',
        url: 'resources/data/trueMenuListJson.json'
    },
    root: {
        text: 'Ext JS',
        id: 'src',
        expanded: true
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }]
});
6，json 

[
  {
    id:'jygl',
    text:"权限管理",
    expanded:false,
    iconCls: 'x-fa fa-home',
    children:[
      {
        id:'xhzy',
        text:"管理员",
        children:[
          {
            id:'spfb',
            text:"一级管理员",
            leaf:true
          }
        ]
      },
      {
        id:'xsdd',
        text:"维护",
        children:[
          {
            id:'xjdd',
            text:"A类",
            leaf:true
          },
          {
            id:'ddgl',
            text:"B类",
            leaf:true
          },
          {
            id:'ddgz',
            text:"C类",
            leaf:true
          },
          {
            id:'ddsp',
            text:"D类",
            leaf:true
          }
        ]

      },
      {
        id:'xsht',
        text:"Vip",
        children:[
          {
            id:'htgl',
            text:"Vip001",
            leaf:true
          },
          {
            id:'htgz',
            text:"Vip002",
            leaf:true
          },
          {
            id:'htsp',
            text:"Vip003",
            leaf:true
          },
          {
            id:'htqz',
            text:"Vip004",
            leaf:true
          },
          {
            id:'bgxygl',
            text:"Vip005",
            leaf:true
          }
        ]

      }
    ]
  },
  {
    id:'khgl',
    text:"角色管理",
    expanded:false,
    iconCls: 'x-fa fa-home',
    children:[
      {
        id:'khglc',
        text:"老师",
        children:[
          {
            id:'wdkk',
            text:"其它老师",
            leaf:true
          },
          {
            id:'khda',
            text:"体育老师",
            leaf:true
          }
        ]
      },
      {
        id:'lfgl',
        text:"学生",
        children:[
          {
            id:'lfsq',
            text:"小学生",
            leaf:true
          },
          {
            id:'lfkjsp',
            text:"中学生",
            leaf:true
          },
          {
            id:'lfbjsp',
            text:"大学生",
            leaf:true
          },
          {
            id:'lfbglr',
            text:"研究生",
            leaf:true
          },
          {
            id:'lfcx',
            text:"博士生",
            leaf:true
          }
        ]
      }
    ]
  }
]

 


Sukla
关注
专栏目录
[Ext JS] 按钮子菜单的实现及鼠标移动自动显示
oscar999的专栏
03-12 485
Button 和Split类型的按钮都可以通过 menu 添加子菜单。默认状况添加的子菜单需要点击按钮的下拉箭头来显示菜单项， 如何实现将鼠标移动到按钮就显示子菜单，鼠标移除菜单自动隐藏呢
统信系统UOS桌面版V20 用户手册
热门推荐
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
鼠标移动事件（鼠标移动到主菜单上显示子菜单）
聆听
11-14 2734
mouseenter（）：当鼠标指针穿过元素时，会发生 mouseenter 事件。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。 mouseleave （）：当鼠标指针离开元素时，会发生 mouseleave 事件。与 mouseout 事件不同，只有在鼠标指针离开被选元素...
重写EXT treepanel 鼠标移动事件，弹出注释框
QQ379165262的专栏
12-14 1383
/**          重写鼠标移动事件，弹出注释框     */  var notesWindow;//提示消息框  定义全局变量  弹出先先判断是否已经存在  Ext.tree.TreeNodeUI.prototype.onOver = function(e){      if(notesWindow!=undefined){       notesWindow.destr
[ExtJS4]ExtJS4左边菜单面板收缩展开，右边TabPanel内容动态更新（解决宽度不能自适应问题）...
weixin_30731305的博客
01-07 522
一.问题： ExtJS4使用border布局，左边为accordion布局的功能导航菜单，发现当导航菜单面板收缩展开时，右边选项卡面板(TabPanel)中的grid等面板宽度并没有自动变化。 二.解决方案： 1.在新增选项卡中配置一个自定义属性sidebarChange，默认值为false,用于保存左边导航菜单是否发生展开收缩动作。 2.在新增的选项卡中添加activate监听...
导航栏鼠标悬浮弹出子菜单面板的实现方案
qq_42862882的博客
08-17 6748
当鼠标移动到导航栏某个字块时，悬浮出一块子菜单面板 实现： 在导航栏的字块镶嵌一块要悬浮的div，设置display为none。 jquery设置字块鼠标悬浮mouseover的事件为：显示悬浮div（设置display为block），同时获取导航栏字块的长度宽度，用于悬浮div的定位。 注意：悬浮div的定位设置为absolute，此时他的top，left相对的不一定是 他的直系上一级，...
html实现二级菜单自动打开,纯CSS实现鼠标滑过显示子菜单的二级菜单效果
weixin_34824634的博客
05-31 1145
本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下：这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
ExtAspNet v2.2.1 （2009-4-1） 值得一看
04-01
-一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
ExtAspNet_v2.3.2_dll
09-29
-一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
Vue - [完整源码] 实现分类菜单 + 轮播图组合布局效果，类似左侧菜单与右侧轮播图连接在一起的效果（当鼠标移入菜单时，侧边出现子菜单列表）常见于商城系统，示例代码注释详细开箱即用！
最新发布
王佳斌
04-20 2568
vue左侧菜单分类盖在右侧轮播图之上的效果，vue css实现分类菜单+轮播图合在一起效果，vue仿小米商城的导航及轮播图拼在一起的效果，vue nuxt 左侧分类菜单右侧轮播图的组合布局，css 实现左边菜单分类右边轮播图，vue css 左侧分类导航菜单和右侧图片轮播滚动布局代码，vue css实现带二级菜单的图片轮播动画，vue css如何实现垂直菜单,鼠标移入后出现二级菜单，vue有没有左侧是垂直菜单(鼠标移入后出现二级菜单)右侧是图片轮播图带左右箭头，vue css 左侧菜单分类与右侧轮播图盖在一
Extjs 动态加载子菜单
leehao_accp的博客
06-23 267
最近在做一个项目，要求从数据库中获得菜单子项动态加载到web客户端中的菜单： extjs如下： //定义grid this.grid = new FeedGrid(this, { region:"center", store:grid.php, tbar:[{ text:'级别', id:'btnLevel',...
ExtJS6.2开发-首页左菜单区域(三)
砌墙民工的博客
12-07 345
菜单区域开发 一、创建做左菜单组件 1.在在app目录下创建main\core\index\component下创建indexLeftMenu.js 2.编写基础代码如下: Ext.define('appCenter.main.core.index.component.indexLeftMenu', { extend : 'Ext.panel.Panel', alias : 'widget...
extjs菜单隐藏问题
niemingming的专栏
05-14 1515
近期由于项目中大量使用iframe导致父级页面的菜单显示后，在子页面的操作不能自动隐藏菜单。为此，笔者查看了extjs的源码，发现，extjs的菜单基本都是通过Ext.menu.MenuMgr进行管理的，我们在创建菜单时会自动调用其register方法，将菜单注册到管理器中，而管理器的初始化方法，针对document添加了mousedown事件，判断只要不是针对菜单选项的点击事件那么都会调用hid
Extjs 中鼠标划过悬浮效果的显示
一根小羽毛的专栏
07-16 1665
效果如图所示： 鼠标划过grand
(Ext基础篇) 弹出窗口
zhouzhiwengang的专栏
08-25 3036
从外观上来讲，浏览器自带的alert、confirm、prompt等对话框并不好看，而且配置也不灵活。诸如按钮的添加、删除、以及修改按下按钮所触发的事件等操作都非常难以执行，而在EXT的msgbox里都能实现，而且外观相当漂亮，本节将详细介绍EXT中的弹出窗口。                            Ext.MessageBox为我们提供了弹出提示框的简单方法，使用它提供的ale
EasyUI实现Layout收缩框鼠标移入展开移出收缩
cw370008359的专栏
05-22 5932
 var bLeftExpand = false; var bRightExpand = false; /* 左边布局 */ $("#panelWest").panel({    onCollapse:function(){     if(!bLeftExpand){      expandWest();      bLeftExpand=true;     }   
jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示
QC班长的博客
08-11 6974
jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示 关键思路就是在父菜单栏的hover函数里再加入子菜单的hover函数 jq代码： $(function() {     PopoutMenu("police_computer_network"); }); function PopoutMenu(v) {     $('#' + v).find('li').h
鼠标滑过，二级菜单显示
xqiitan的专栏
04-02 3476
使用css方式，实现菜单效果。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值