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

注意：html文件的Ext库引用请自行解决，效果图：

Js代码

1. /**  
2.  * 该扩展可以通过一定解析规则的json串生成菜单  
3.  * 通过itemclick事件调用点击菜单项的监听函数；  
4.  * 通过afterload事件调用菜单加载完毕后的监听函数；  
5.  * 注意：使用该控件须确保父菜单code值小于子菜单  
6.  * 'code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls'  
7.  *  code、parentcode都是编码，通常来讲这个菜单表都是开发人员手工写入数据库的  
8.  *  name 对应菜单上的文字，leaf为空字符串、false、0的时候表示该节点下面还有子节点  
9.  *  enabled 字段目前还没什么用，可以无视  
10.  *    
11.  *  iconcls 就是菜单文件前图标的css样式类  
12.  *    
13.  *  1.1修改：加载完成后清楚内置的父容器缓存  
14.  *  
15.  * @version 1.1 2010-4-14  
16.  * @author 赵启明  
17.  */  
18. Ext.namespace("Ext.ux");   
19.   
20. Ext.ux.MenuToolbar = Ext.extend(Ext.Toolbar, {   
21.     height: 30,   
22.     /**  
23.      * @cfg {root} store的root  
24.      */  
25.     root: 'menus',   
26.     /**  
27.      * @cfg {split} 一级菜单之间是否用横线间隔  
28.      */  
29.     split: true,   
30.     /**  
31.      * @cfg {store} 读取记录的store 默认为jsonstore  
32.      */  
33.     /**  
34.      * @cfg {url} 用于读取菜单记录串的url  
35.      */  
36.     initComponent: function(){   
37.         Ext.ux.MenuToolbar.superclass.initComponent.call(this);   
38.         this.addEvents(           
39.         /**  
40.          * @event itemclick 菜单被点击时触发  
41.          */  
42.         'itemclick',           
43.         /**  
44.          * @event afterload 菜单项加载完毕后触发  
45.          */  
46.         'afterload');   
47.         if (!this.store)    
48.             this.store = new Ext.data.JsonStore({   
49.                 url: this.url,   
50.                 root: this.root,   
51.                 fields: ['code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls']   
52.             });   
53.         this.store.on('load', this.loadRecords, this);   
54.         this.store.load();   
55.     },   
56.     //private 遍历records生成菜单   
57.     loadRecords: function(s, r, o){   
58.         this.menuCache = {};//对菜单(Menu)按照code进行缓存 code必须是唯一的！   
59.         this.store.sort('code');   
60.         s.each(function(record){   
61.             var parentCt = this.getParnetCt(record.get('parentcode'));   
62.             if (parentCt === this && this.split)    
63.                 this.add('-');   
64.             if (!record.get('leaf')) {//是个菜单   
65.                 var menu = new Ext.menu.Menu({   
66.                     code: record.get('code')   
67.                 });   
68.                 parentCt.add({   
69.                     text: record.get('name'),   
70.                     iconCls: record.get('iconcls'),   
71.                     menu: menu   
72.                 });   
73.                 this.menuCache[record.get('code')] = menu;   
74.             }   
75.             else {   
76.                 var item = new Ext.menu.Item({   
77.                     text: record.get('name'),   
78.                     code: record.get('code'),   
79.                     url: record.get('url')   
80.                 });   
81.                 item.on('click', function(item){//注册点击事件监听函数   
82.                     this.lastItem = item;   
83.                     this.fireEvent('itemclick', this, item);   
84.                 }, this);   
85.                 parentCt.add(item);   
86.             }   
87.         }, this);   
88.         delete this.menuCache;//没用，不要了   
89.         this.doLayout();   
90.         this.fireEvent('afterload', this);   
91.     },   
92.     //private 根据parentcode获取它的容器对象,parentcode不存在或是cache中找不到就返回toolbar对象   
93.     getParnetCt: function(parentcode){   
94.         if (!parentcode) { //parentcode为空时父容器就是toolbar   
95.             return this;   
96.         }   
97.         return this.menuCache[parentcode] ? this.menuCache[parentcode] : this;   
98.     },   
99.     //根据item对象或者code属性获取它的的路径   
100.     getItemPath: function(item){   
101.         var code = typeof item == 'string' ? item : item.code;   
102.         var record = this.store.getAt(this.store.find('code', code));   
103.         if (!record)    
104.             return;   
105.         var path = [];          
106.         while (record) {   
107.             path.push(record.get('name'));   
108.             index = this.store.find('code', record.get('parentcode'));   
109.             record = this.store.getAt(index);               
110.         }   
111.         path.reverse();   
112.         return path.join('-->');   
113.     },   
114.     //获取最后一个被点击的item   
115.     getLastItem: function(){   
116.         return this.lastItem;   
117.     },   
118.     load: function(){   
119.         this.store.load();   
120.     }   
121. });