Ext利用TreeStore构建动态菜单

 项目中很多时候要动态创建菜单，但是ExtJs自身并没有提供这个组件。下面是我利用TreeStore实现的动态菜单的完整代码

/**
 * Ext Js library 4.2.1
 * 
 * 动态菜单栏
 * @class Xzr.view.base.main.DynamicMenu
 * @extends Ext.toolbar.Toolbar
 * @author 王成委
 * 
 * 2014-01-23 17:20:31
 * 
 */

Ext.define('Xzr.view.base.main.DynamicMenu',{
	extend:'Ext.toolbar.Toolbar',
	
	mixins: {  
        bindable: 'Ext.util.Bindable'  
	},
	
	alias:'widget.dynamicmenu',
	
	displayField:'moduleName',
	typeField:'moduleType',
	applicationField:'application',
	controllerField:'controller',
	leafField:'leaf',
	
	height:36,
	
	border:false,
	
	defaults:{
		style:{
			marginRight:'10px;'
		}
	},
	
	store:'sys.DynamicMenuStore',
	
	style:{
		paddingLeft:'10px;',
		paddingRight:'10px;'
	},
	
	cls:'x-fy-menubar',
	
	
	initComponent:function(){
		var me = this;
		
		if(Ext.isString(me.store))
			me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
			
		me.bindStore(me.store);
		
		this.callParent();
	},
	
	getStoreListeners:function(){
		var me = this;
		return {
			expand: me.onExpand
		}
	},
	
	/**
	 * 响应节点展开事件
	 * @private
	 * @param {Ext.data.Model} parent
	 * @param {Ext.data.Model[]} records
	 * @param {Boolean} successful
	 */
	onExpand:function(parent,records,successful){
		var me = this,container;
		
		if(parent.isRoot()){
			me.createMenuHeader(records);
			return;
		}
		
		container = me.down('#'+parent.getId()).menu
		if(!container )return;
		
		Ext.Array.each(records,function(node){
			me.doAdd(container,node);
		});
	},
	
	/**
	 * 创建
	 * @param {Ext.data.Model[]} records
	 */
	createMenuHeader:function(records){
		var me = this;
		
		Ext.Array.each(records,function(node,index){
			var split = (index+1)<records.length;
			me.addParentNode(me,node,split);
		});
		
		me.add('->');
		me.add({xtype:'button',text:'转到',action:'scroll',iconCls: 'x-icon-list',style: 'margin-left: 8px;',style:'marginRight:5px;',menu:[]});
	},
	
	doAdd:function(container,node){
		var me = this;
		if(node.isLeaf())me.addLeafNode(container,node);
		else me.addParentNode(container,node);
	},
	//添加父节点
	addParentNode:function(container,node,split){
		var me = this,
			menuItem = {
			text:node.get(me.displayField),
			itemId:node.getId(),
			menu:[]
		};
		//将菜单添加到父容器中
		container.add(menuItem);
		if(split)container.add('-');
		//展开节点
		node.expand();
	},
	//添加子节点
	addLeafNode:function(container,node){
		var me = this,
		menuItem = {
			text:node.get(me.displayField),
			itemId:node.getId(),
			type:node.get(me.typeField),
			app:node.get(me.applicationField),
			controller:node.get(me.controllerField)
		};
		
		container.add(menuItem);
	}
});

其原理就是向toolbar中绑定Store，并监听Store的expand事件，在expand事件中完成将节点添加到容器中的操作。

有关Store绑定的详细资料请到我的这篇博文中查看： http://blog.csdn.net/jaune161/article/details/18266301