ExtJS5 实现树形菜单

敷盎方

于 2017-12-13 18:56:04 发布

阅读量1.4k

点赞数 1

分类专栏： ExtJS 文章标签： extjs5 树形菜单

本文链接：https://blog.csdn.net/weixin_39389850/article/details/78795551

版权

本文介绍如何在ExtJS5中创建树形菜单。首先通过sencha建立工程，然后在mainmodel.js中添加数据，接着在mainmenutree.js中编写视图。在视图中，通过循环数据集并递归处理来构建多层树形结构。接着，通过监听事件并在controller.js中处理逻辑，实现菜单点击响应。最后，作者建议对于重复功能，可以通过视图继承提高代码重用性。

摘要由CSDN通过智能技术生成

首先利用sencha建立extjs的工程，然后是对页面顶部和底部布局的添加以及按钮的美化，因为只要记录的是菜单的生成，就不记录了。

具体工程我会上传，因为是自己练练手的东西，所以写的很杂。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

接下来开始建我们的树形菜单。

首先在mainmodel.js的data中增加数据。

NavigationMenu : [{  
            text : '工程管理', // 菜单项的名称  
            icon : '', // 菜单顶的图标地址  
            glyph : 0,// 菜单项的图标字体的数值  
            expanded : true, // 在树形菜单中是否展开  
            description : '', // 菜单项的描述  
            items : [{  
                text : '工程项目', // 菜单条的名称  
                module : 'Global', // 对应模块的名称  
                icon : '', // 菜单条的图标地址  
                glyph : 0xf0f7  
                    // 菜单条的图标字体  
                }, {  
                text : '工程标段',  
                module : 'Project',  
                icon : '',  
                glyph : 0xf02e  
            }]  

    }, {  
        text : '合同管理',  
        expanded : true,  
        items : [{  
                    text : '项目合同',  
                    module : 'Agreement