The generation of menus is detailed in the code below. getMenus takes items from the first level menu and uses recursion in the getaMenu function to generate sub-menus at all levels.Execution events for menu type, module name, icon, handler are added to each executable menu bar.

// Generate menu data used under menu bars and buttons from data.tf_MenuGroups
	getMenus : function() {
		var items = [];
		Ext.Array.each(this.get('menus'), function(group) { // Traversing an array of menu items
			items.push(this.getaMenu(group));
		}, this);
		return items;
	},
	/**
	 * Return the menu and all its children based on the group
	 */
	getaMenu : function(group) {
		var items = [];
		// Menu type group, module, reportGroup, report, function,
		// window, executestatement,separate
		Ext.each(group.tf_Menus, function(submenu) {
			if (submenu.menuType === 'group') {
				items.push(this.getaMenu(submenu));
			} else if (submenu.menuType === 'separate')
				items.push('-');
			else {
				items.push({
					menuType : submenu.menuType, // Menu Type
					menuTypeId : submenu.menuTypeId,
					moduleName : submenu.moduleName, // Module Name
					text : submenu.title,
					// If icon is not set in the menu, see if module has icon set
					icon : submenu.tf_iconUrl || submenu.moduleIconUrl,
					// If glyph is not set in the menu, see if module has glyph set
					iconCls : submenu.tf_iconCls || submenu.moduleiconCls,
					handler : 'onMainMenuClick' // Event handlers in MainController
				});
			}
		}, this);
		return {
			text : group.title,
			menu : items,
			iconCls : group.tf_iconCls,
			icon : group.tf_iconUrl
		};
	}

In the source code, menu bars and button menus are generated using the functions above.The resulting tree menu is similar to the one above, and the specific code is visible in the source file.

After the user clicks a menu button, the onMainMenuClick function in MainController.js is executed.

// Execute when the menu on the main menu is selected
	onMainMenuClick : function(menuitem) {
		// menuType ,module, reportGroup, report, function,
		// window, executestatement
		if (menuitem.menuType === 'module' || menuitem.menuType === 'reportGroup'
				|| menuitem.menuType === 'report')
			this.addModuleToCenter(menuitem);
		else
			// Execution when other types of menus are selected
			;

	}

In the above function, the type of menu command that will be executed is determined. If it is a module, a composite query grouping, or a query, the addModuleToCenter function in CenterController.js is executed.Why use this before the function here because the mixins attribute is added to MainController.js.This property is essentially equivalent to what multiple inheritance means.

// Mixed settings, which can be interpreted as multiple inheritance, inherit methods from the following three classes
	mixins : {
		// Controller for interface changes in grid
		gridController : 'app.view.main.controller.GridController',
		// Controller for central area interface changes
		centerController : 'app.view.main.controller.CenterController',
		// Controller to change left menu interface
		leftController : 'app.view.main.controller.LeftController'
	}

In CenterController.js, functions that add modules to the main area are executed.

/**
	 * After clicking on a menu item, add to the tabPanel in the main area
	 */
	addModuleToCenter : function(menuitem) {
		console.log('addModuleToCenter : ' + menuitem.menuType + ','
				+ menuitem.text + ',' + menuitem.moduleName);

		var maincenter = this.getView().down('maincenter');
		// For controls with a reference set, you can find it directly in the controller using the following functions.If you still use getCmp to get the control, you have to change that.
		// var maincenter = this.lookupReference('maincenter');

		if (menuitem.menuType === 'module') {
			this.addModuleToMainRegion(menuitem.moduleName);
		} else if (menuitem.menuType === 'reportGroup')
			this.addReportToMainRegion({
				reportGroupId : menuitem.menuTypeId,
				text : menuitem.text
			});
	},

	/**
	 * Add the standard module to the tabpanel, and if you already have one, go to the tab page itemId:module_(moduleName)
	 */
	addModuleToMainRegion : function(moduleName) {
		var module = app.modules.getModule(moduleName);
		if (moduleName) {
			var view = this.getView().down('maincenter');
			var tabItemId = 'module_' + moduleName; // itemId in tabPanel
			var tab = view.down('> panel#'+ tabItemId);//Find if this module has been added to the current main area
			if (!tab) {
				// Generate controls for the current module if it is not added
				tab = view.add(app.modules.getModule(moduleName).getModulePanel(
						tabItemId));
			}
			view.setActiveTab(tab);
		}
	}

With the click of a menu, you can add a module to the main display area.