This section updates four types of menus according to the menu grouping and definition passed in the background, as well as the module definition.

The data format of the button menu is the same as that of the standard menu. The functions generated are in MainModel.js. Let's change them below.

// Generate the menu data used under the menu bar and the menu button according to data.tf_MenuGroups
			getMenus : function() {
				var items = [], me = this;
				Ext.Array.each(this.get('tf_MenuGroups'), function(group) { // An array of traversing menu items
							var submenu = [];
							// For each menu item, traverse the array of menu bars
							Ext.Array.each(group.tf_menuModules, function(menuitem) {
										// Obtain the definition of the module based on moduleId
										var module = me.getModuleDefine(menuitem.tf_ModuleId);
										// If the module exists (or has browsing privileges, add later)
										if (module) {
											submenu.push({
														mainmenu : 'true',
														moduleName : module.tf_moduleName,
														text : module.tf_title,
														icon : module.tf_icon,
														glyph : module.tf_glyph,
														handler : 'onMainMenuClick' // Event Handler in MainController
													})
											// If the menu defines the next separator, add a separator to the menu
											if (menuitem.tf_addSeparator)
												submenu.push('-');
										}
									})
							var item = {
								text : group.tf_title,
								menu : submenu,
								icon : group.tf_iconURL,
								glyph : group.tf_glyph
							};
							items.push(item);
						})
				return items;
			}

Tree menus also need to be modified:

/**
 * Tree menu, displayed on the left side of the main interface
 */
Ext.define('app.view.main.menu.MainMenuTree', {
			extend : 'Ext.tree.Panel',
			alias : 'widget.mainmenutree',
			title : 'system menu',

			rootVisible : false,
			lines : false,

			initComponent : function() {
				this.store = Ext.create('Ext.data.TreeStore', {
							root : {
								text : 'system menu',
								leaf : false,
								expanded : true
							}
						});
				var vm = this.up('app-main').getViewModel()
				var menus = vm.get('tf_MenuGroups');
				var root = this.store.getRootNode();
				for (var i in menus) {
					var menugroup = menus[i];
					var menuitem = root.appendChild({
								text : menugroup.tf_title,
								// Whether the node is expanded by default
								expanded : menugroup.tf_expand,
								icon : menugroup.tf_iconURL,
								glyph : menugroup.tf_glyph
							});
					for (var j in menugroup.tf_menuModules) {
						var menumodule = menugroup.tf_menuModules[j];

						var module = vm.getModuleDefine(menumodule.tf_ModuleId);
						if (module) {
							var childnode = {
								moduleId : module.tf_moduleId,
								moduleName : module.tf_moduleName,
								text : module.tf_title,
								leaf : true
							};
							menuitem.appendChild(childnode);
						}
					}
				}
				this.callParent(arguments);
			}
		})

Accordion-style folding menu:

/**
 * Accordion menu, style can be beautified with css
 */

Ext.define('app.view.main.menu.AccordionMainMenu', {
			extend : 'Ext.panel.Panel',
			alias : 'widget.mainmenuaccordion',
			title : 'system menu',

			layout : {
				type : 'accordion',
				animate : true
			},

			initComponent : function() {
				this.items = [];
				var vm = this.up('app-main').getViewModel();
				var menus = vm.get('tf_MenuGroups');
				var me = this;
				for (var i in menus) {
					var menugroup = menus[i];
					var accpanel = {
						menuAccordion : true,
						xtype : 'panel',
						title : menugroup.tf_title,
						bodyStyle : {
							padding : '10px'
						},
						layout : 'fit',
						dockedItems : [{
									dock : 'left',
									xtype : 'toolbar',
									items : []
								}],
						glyph : menugroup.tf_glyph
					};
					for (var j in menugroup.tf_menuModules) {
						var menumodule = menugroup.tf_menuModules[j];
						var module = vm.getModuleDefine(menumodule.tf_ModuleId);
						if (module) {
							accpanel.dockedItems[0].items.push({
										xtype : 'buttontransparent',
										text : this.addSpace(module.tf_title, 12),
										glyph : module.tf_glyph,
										handler : 'onMainMenuClick'
									});
						}
					}
					this.items.push(accpanel);
				}
				this.callParent(arguments);
			},

			addSpace : function(text, len) {
				var result = text;
				for (var i = text.length; i < len; i++) {
					result += '　';
				}
				return result;
			}

		})

Now let's look at the revised version: because the modules under each module group are not added, only four modules under "System Management", so there are no menus under some menu groups. In the future, menu groups without menus will be deleted.

In the previous sections, I gave some examples of simple front-end and back-end interaction in building system homepages and menus. Before that, I added some additional content to the Top Area "Settings": adding a setting of the display location of the unit of amount, one is to display the unit of amount after the value, the other is to display the unit of amount on the header of the column. It is not shown in the numerical value.

Download address of source code and database: http://pan.baidu.com/s/1hqGcnze

This includes all extjs modifications to date, java code, various configuration files and databases. If you can't find the jar package, you can download the example project in my extjs4 series articles. There are all examples in the jar package. (Because of my limited time, there are problems in the construction of the project, please refer to the blog to solve them by yourself. Happy National Day to all of you.)