Ext利用TreeStore构建动态菜单

来源：互联网发布：php写新闻发布系统编辑：程序博客网时间：2024/05/17 23:42

项目中很多时候要动态创建菜单，但是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()).menuif(!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

0 0