`

[Ext扩展]MenuToolbar:根据json串生成多级菜单

    博客分类:
  • Ext
阅读更多
注意:html文件的Ext库引用请自行解决,效果图:



/**
 * 该扩展可以通过一定解析规则的json串生成菜单
 * 通过itemclick事件调用点击菜单项的监听函数;
 * 通过afterload事件调用菜单加载完毕后的监听函数;
 * 注意:使用该控件须确保父菜单code值小于子菜单
 * 'code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls'
 *  code、parentcode都是编码,通常来讲这个菜单表都是开发人员手工写入数据库的
 *  name 对应菜单上的文字,leaf为空字符串、false、0的时候表示该节点下面还有子节点
 *  enabled 字段目前还没什么用,可以无视
 *  
 *  iconcls 就是菜单文件前图标的css样式类
 *  
 *  1.1修改:加载完成后清楚内置的父容器缓存
 *
 * @version 1.1 2010-4-14
 * @author 赵启明
 */
Ext.namespace("Ext.ux");

Ext.ux.MenuToolbar = Ext.extend(Ext.Toolbar, {
    height: 30,
    /**
     * @cfg {root} store的root
     */
    root: 'menus',
    /**
     * @cfg {split} 一级菜单之间是否用横线间隔
     */
    split: true,
    /**
     * @cfg {store} 读取记录的store 默认为jsonstore
     */
    /**
     * @cfg {url} 用于读取菜单记录串的url
     */
    initComponent: function(){
        Ext.ux.MenuToolbar.superclass.initComponent.call(this);
        this.addEvents(        
		/**
         * @event itemclick 菜单被点击时触发
         */
        'itemclick',        
		/**
         * @event afterload 菜单项加载完毕后触发
         */
        'afterload');
        if (!this.store) 
            this.store = new Ext.data.JsonStore({
                url: this.url,
                root: this.root,
                fields: ['code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls']
            });
        this.store.on('load', this.loadRecords, this);
        this.store.load();
    },
    //private 遍历records生成菜单
    loadRecords: function(s, r, o){
        this.menuCache = {};//对菜单(Menu)按照code进行缓存 code必须是唯一的!
        this.store.sort('code');
        s.each(function(record){
            var parentCt = this.getParnetCt(record.get('parentcode'));
            if (parentCt === this && this.split) 
                this.add('-');
            if (!record.get('leaf')) {//是个菜单
                var menu = new Ext.menu.Menu({
                    code: record.get('code')
                });
                parentCt.add({
                    text: record.get('name'),
                    iconCls: record.get('iconcls'),
                    menu: menu
                });
                this.menuCache[record.get('code')] = menu;
            }
            else {
                var item = new Ext.menu.Item({
                    text: record.get('name'),
                    code: record.get('code'),
					url: record.get('url')
                });
                item.on('click', function(item){//注册点击事件监听函数
                    this.lastItem = item;
                    this.fireEvent('itemclick', this, item);
                }, this);
                parentCt.add(item);
            }
        }, this);
		delete this.menuCache;//没用,不要了
        this.doLayout();
        this.fireEvent('afterload', this);
    },
    //private 根据parentcode获取它的容器对象,parentcode不存在或是cache中找不到就返回toolbar对象
    getParnetCt: function(parentcode){
        if (!parentcode) { //parentcode为空时父容器就是toolbar
            return this;
        }
        return this.menuCache[parentcode] ? this.menuCache[parentcode] : this;
    },
    //根据item对象或者code属性获取它的的路径
    getItemPath: function(item){
        var code = typeof item == 'string' ? item : item.code;
        var record = this.store.getAt(this.store.find('code', code));
        if (!record) 
            return;
        var path = [];       
        while (record) {
			path.push(record.get('name'));
			index = this.store.find('code', record.get('parentcode'));
            record = this.store.getAt(index);            
        }
        path.reverse();
        return path.join('-->');
    },
    //获取最后一个被点击的item
    getLastItem: function(){
        return this.lastItem;
    },
    load: function(){
        this.store.load();
    }
});
  • 大小: 5.3 KB
分享到:
评论
11 楼 hanbin51987 2010-08-20  
Mark 看过,标记以后留用
10 楼 meteorzc 2010-08-18  
不错………………
9 楼 huayaoyang 2010-07-01  
huayaoyang 写道
chemzqm 写道

String.format是Ext扩展的一个方法,可以在官方API中找到,其中第一个参数十一哥模板字符串,我这里只是想生成一个面包屑导航罢了


发现一个问题 生成的json串 是按照ID的字母排序的 不知道楼主发现没


误会了 发现有行this.store.sort('code');

嘿嘿 删除就不碍事了
8 楼 huayaoyang 2010-07-01  
chemzqm 写道

String.format是Ext扩展的一个方法,可以在官方API中找到,其中第一个参数十一哥模板字符串,我这里只是想生成一个面包屑导航罢了


发现一个问题 生成的json串 是按照ID的字母排序的 不知道楼主发现没
7 楼 chemzqm 2010-07-01  
huayaoyang 写道
chemzqm 写道
Ext官方没这玩意,亮点就是menu是后台生成的,不同角色你可以给他不同的menu而不用去写多个页面


楼主 你这个东西真好 正是我在寻找的好东西

Ext.getCmp('workpanel').setTitle(String.format(positionTmp, path))

这行是不是把workpanel的title名称替换成选中的?

positionTmp

这个函数哪里来的 有点没看明白 希望指点一下 谢谢

String.format是Ext扩展的一个方法,可以在官方API中找到,其中第一个参数十一哥模板字符串,我这里只是想生成一个面包屑导航罢了
6 楼 huayaoyang 2010-06-30  
huayaoyang 写道
chemzqm 写道
Ext官方没这玩意,亮点就是menu是后台生成的,不同角色你可以给他不同的menu而不用去写多个页面


楼主 你这个东西真好 正是我在寻找的好东西

Ext.getCmp('workpanel').setTitle(String.format(positionTmp, path))

这行是不是把workpanel的title名称替换成选中的?

positionTmp

这个函数哪里来的 有点没看明白 希望指点一下 谢谢

还有 替换名字
Ext.getCmp('workpanel').setTitle(item.text);

这一行也就够了啊
5 楼 huayaoyang 2010-06-30  
chemzqm 写道
Ext官方没这玩意,亮点就是menu是后台生成的,不同角色你可以给他不同的menu而不用去写多个页面


楼主 你这个东西真好 正是我在寻找的好东西

Ext.getCmp('workpanel').setTitle(String.format(positionTmp, path))

这行是不是把workpanel的title名称替换成选中的?

positionTmp

这个函数哪里来的 有点没看明白 希望指点一下 谢谢
4 楼 chemzqm 2010-06-02  
Ext官方没这玩意,亮点就是menu是后台生成的,不同角色你可以给他不同的menu而不用去写多个页面
3 楼 cuixiping 2010-06-02  
跟ext官方自带的相比,有啥亮点功能不?
2 楼 chemzqm 2010-05-08  
AJAX方式不能读本地数据,请配置好web环境进行访问
1 楼 jwei0791 2010-05-07  
我下载了你的代码,在本地运行,提示JS脚本有错。
对象不支持属性或方法。

相关推荐

    生成JSON树型表结构

    EXT框架,作为一个强大的前端组件库,提供了丰富的UI控件,其中包括树形组件(EXT树),它能够根据JSON数据生成交互式的树状结构。 EXT树是EXT JS库中的一个组件,用于展示层级关系的数据,比如目录结构、组织架构...

    读Ext之十(解析JSON)

    `JSON.parse()`用于将一个JSON字符串转换为JavaScript对象,而`JSON.stringify()`则相反,将JavaScript对象转换为JSON字符串。 在"读Ext之十(解析JSON)"这篇博文中,作者可能详细讨论了在Ext JS框架中如何处理...

    Ext 根据数据库返回json动态生成grid列表实例

    在"Ext 根据数据库返回json动态生成grid列表实例"中,我们学习了如何使用ExtJS创建一个动态的Grid,它的列和数据都依赖于服务器返回的JSON数据。这个过程包括了Grid的基本配置、数据存储的设定以及如何处理和解析...

    AnyFo - Util - Json4Ext:通用ExtJS数据交换处理

    Json4Ext是“AnyFo – Util”项目下的一个子项目,他提供了多个工具包,它让开发者轻松的通过构建一些简单的Java类,然后自动的将 这些Java类生成符合Ext要求的各种Json格式的字符串。 Json4Ext类简介 在Json4...

    java后台生成JSON数据

    Java 后台生成 JSON 数据是现代 Web 应用开发中的常见任务,特别是在与前端框架如 EXT 进行数据交互时。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因其易于人阅读和编写,同时也易于机器解析...

    Ext 中JsonLib 解析字符串

    Ext 中JsonLib 解析字符串 Ext 中JsonLib 解析字符串 Ext 中JsonLib 解析字符串

    Jtopo读取Json生成树状拓扑图

    Jtopo读取Json生成树状拓扑图,Json结构如下,可添加业务需要字段 // id 节点唯一标识 // name 节点名字 // type 节点类型 // pid 父节点标识 // error “0”无异常 “1”有异常 // errorMessage 异常...

    Spring3+Hibernate4+SpringMVC整合Ext:JSON数据格式传输

    2、ext4,这个项目是用来做ext的公共js库用的,这样不比没个项目都添加ext的js文件,方便开发。 切记将ext4项目部署上去,并且应用名称为ext4,否则访问fes项目是会找不到ext的js文件。 jxcia.sql是数据库脚本,...

    Ext.tree.TreeLoader附带封装的json类

    总之,`Ext.tree.TreeLoader`与JSON数据的结合使得在Ext JS中创建动态、可扩展的树形视图变得简单高效。通过理解和应用这些概念,开发者能够构建出更加交互丰富的前端应用。希望这个概述能帮助你更深入地了解`...

    ext-grid+json简单应用

    在"EXT-GRID+JSON简单应用"中,我们将探讨如何使用EXT-JS的Grid组件与JSON数据源进行集成,以创建一个动态的数据表格。 EXT-JS的Grid组件允许开发者通过定义列模型、存储器和视图来展示数据。在JSON方面,它是一种...

    php-json-ext-1.2.1.rar

    "这表明在Cacti中,NPC(可能是指网络性能控制台)依赖于JSON扩展来解析或生成数据,以呈现其用户界面。JSON扩展对于正确运行Cacti的某些功能至关重要,因为它涉及到数据的解析和展示,如果缺少该扩展,Cacti无法...

    json-ext:一组扩展JSON使用的实用程序。 专为快速且高效存储而设计

    一组扩展JSON使用的实用程序。 专为快速且高效存储而设计 特征: parseChunked() –解析块(例如FS可读流或获取响应流)附带的JSON stringifyStream() –字符串化流(Node.js) stringifyInfo() –在不将值转换...

    深入浅出Ext_JS:数据存储与传输

    对于不常见的数据源和协议,可以通过自定义reader和proxy来扩展其功能,例如DWRProxy使得EXT能够直接与DWR(Direct Web Remoting)进行通信。 10.2 Ext.data.Connection Ext.data.Connection是Ext.lib.Ajax的封装,...

    EXT JSON Sqlserver 分页 全部正常运行

    【EXT JSON Sqlserver 分页 全部正常运行】 在IT领域,这个标题涉及到的是一个使用EXT JS(一种基于JavaScript的富客户端框架)和JSON(JavaScript Object Notation)数据格式,结合SQL Server数据库实现分页功能的...

    ext2.2+struts2使用json传输数据生成的树

    本篇将详细讲解如何使用`Ext2.2`和`Struts2`集成,通过`JSON`传输数据生成树形结构。 首先,`Ext2.2`的树形组件(TreePanel)是一种强大的可视化工具,能够展示层级关系的数据。它支持动态加载、拖放操作以及多种...

    EXT实例+JSON

    例如,你可以使用`Ext.util.JSON.decode()`方法将JSON字符串转换为JavaScript对象,然后将其加载到EXT的数据存储(如`Ext.data.Store`)中。 EXT实例与JSON的结合使用,通常涉及到以下几个关键步骤: 1. **创建...

    Ext3.X横向菜单导航栏

    要根据JSON数据生成菜单,我们需要遍历数据并构造`Ext.menu.Item`实例,然后添加到菜单实例中。这里的关键在于解析JSON并创建相应的菜单对象,代码如下: ```javascript function createMenuFromJson(jsonData) { ...

    jsonquery:基本 json -> sqlalchemy 查询构建器

    from sqlalchemy.ext.declarative import declarative_base Base = declarative_base() class User(Base): __tablename__ = 'users' id = Column(Integer, primary_key=True) name = Column(String) email = ...

    Ext官方中文教程(可打包下载)

    从源码生成Ext 基础用法: DomQuery基础 Ext中的事件 简述模板 模板(Templates)的函数 教你创建Ext UI控件 事件的处理 Ext中的继承 Ext的类设计 Ajax通讯 JSON处理方法 函数的原型扩展 组件的使用: Tab标签...

Global site tag (gtag.js) - Google Analytics