extjs4 navmenu 通过json生成的nav导航条菜单

yw605

于 2019-07-05 09:16:17 发布

阅读量394

点赞数

分类专栏： javascript 文章标签： extjs nav navmenu 导航菜单导航条

本文链接：https://blog.csdn.net/yw605/article/details/94715840

版权

本文展示了如何在ExtJS4中利用JSON数据生成导航菜单导航条，包括实现过程及最终呈现的效果图。

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

效果图
在这里插入图片描述
组件代码：

/**
 * 该扩展可以通过解析一定规则的json生成导航菜单
 * @version 1.1 2019-07-05   增加了菜单cls定义，按钮cls定义
 * @author YinWang
 */
Ext.define('Eip.ux.NavMenu', {
   
    extend: 'Ext.Toolbar',
    height: 30,
    /**
     * @cfg {url} 远程获取json数据的地址
     */
    url: 'nav1.json',
    /**
     * @cfg {split} 远程获取json数据的地址
     */
    split: false,
    /**
     * @cfg {store} 读取记录的store 默认为jsonstore
     */
    store: undefined,
    /**
     * @cfg {root} store的root
     */
    root: 'menus',
    /**
     * @cfg {menuPlain} 删除nav菜单的阴刻线
     */
    menuPlain: true,
    /**
     * @cfg {topButtonCls} 导航菜单顶级按钮样式
     */
    topButtonCls: '',
    /**
     * @cfg {menuBodyCls} 导航菜单panel体样式
     */
    menuBodyCls: null,
    /**
     * @cfg {arrowCls} 顶级菜单的箭头样式,arrow为默认值
     */
    arrowCls: 'arrow',
    /**
     * @method 点击菜单或按钮的时候触发
     * @param menu 菜单按钮实例
     */
    onClickMenu: function (menu) {
   

    },

    constructor: function (config) {
   
        this.callParent(arguments);// 调用父类的构造
        if (!this.