Learn Extjs5 with me (08--custom menu 1)

Learn Extjs5 with me (08--custom menu 1)

The

top and bottom areas are already done, and there is a menu button in the top area, which we design a menu data structure that allows you to display different styles of menus. Since the preparation is a system module customization system, so the menu is also customized, when the operator system login, and Mainmodel in the same time, the same as other data, will be displayed through Ajax to display the menu data, and then generate the menu bar or menu tree. In this example, I only made a two-level menu, to do more than three layers as long as a slight modification.

Let's

take a look at the definition of the menu data: In Mainmodel, a Systemmenu array property is defined under the Data property, and the data definitions for each menu item and bar are placed below.

The definition of the System menu, this menu can be from the background through Ajax Systemmenu: [{text: ' Project management ',//menu item name icon: ',//The icon address of the top of the menus glyph:0,//the value of the icon font of the item expand Ed:true,//whether to expand Description: ',//menu item description in the tree menu items: [{text: ' project ',//' name of the ' item ' module: ' Global ',//the name of the corresponding module icon: ' ',//menu bar icon address glyph:0xf0f7//menu bar icon Font}, {text: ' Project segment ', Module: ' Project ', Icon: ', glyph:0xf02e} '}, {text: ' Contract management ', ex Panded:true,items: [{text: ' Project contract ', module: ' Agreement ', glyph:0xf02d}, {text: ' Contract payment plan ', module: ' Agreementplan ', glyp H:0XF03A}, {text: ' Contract request Form ', module: ' Payment ', glyph:0xf022}, {text: ' Contract payment order ', module: ' Payout ', glyph:0xf0d6}, {text : ' Contract Invoice ', module: ' Invoice ', glyph:0xf0a0}]}, {text: ' Comprehensive query ', Glyph:0xf0ce,expanded:true,items: [{text: ' Project contract ledger ', MoD  Ule: ' agreement ', glyph:0xf02d}, {text: ' Contract payment plan Ledger ', module: ' Agreementplan ', glyph:0xf03a}, {text: ' Contract request Bill ', module:  ' Payment ', glyph:0xf022}, {text: ' Contract payment Bill ', module: ' Payout ', glyph:0xf0d6}, {text: ' Contract invoice Ledger ', module: ' Invoice ', glyph : 0xf0a0}]}]

The above menu defines three menu items, several menu bars, and the specific properties are described above. With the menu data, and then a function that can generate a menu to display data based on the data, the array returned by this function can be directly used by toolbar and button as items and menus. The following function is also in mainmodel.js.

Based on the Data.systemmenu generated menu bar and Menu buttons below the menu data used Getmenus:function () {var items = [];var Menudata = This.get (' Systemmenu ');//Get fixed Good menu Data Ext.Array.each (menudata, function (group) {//iterates through the array of menu items var submenu = [];//for each menu item, traversing the array Ext.Array.each of the bar ( Group.items, Function (MenuItem) {Submenu.push ({mainmenu: ' true ', Modulename:menuitem.module,text:menuitem.text, Icon:menuitem.icon,glyph:menuitem.glyph,handler: ' Onmainmenuclick '///Maincontroller event handler})}) var item = {TEXT:GR Oup.text,menu:submenu,icon:group.icon,glyph:group.glyph};items.push (item);}) return items;}

        Inherit toolbar controls that customize a menu bar. Create the file Mainmenutoolbar.js in the War/app/view/main/region directory.

/** * System main Menu single, according to the data in the Mainmodel to generate, you can switch to the button menu, the menu tree */ext.define (' App.view.main.region.MainMenuToolbar ', {extend: ' Ext.toolbar.Toolbar ', alias: ' Widget.mainmenutoolbar ', defaults: { Xtype: ' buttontransparent '},items: [{glyph:0xf100,tooltip: ' Display the tree menu in the left column ',///buttons for the menu style toggle Disablemouseover:true,margi N: ' 0-5 0 0 '}, {glyph:0xf102,tooltip: ' Display menu in the top area ',//button for several menu style switches Disablemouseover:true}],viewmodel: ' main ',//Specify VI Ewmodel for Maininitcomponent:function () {///To add the menu items generated in the ViewModel to the items in this toolbar This.items = This.items.concat (
 This.getviewmodel (). Getmenus ()); This.callparent ();}); 

        This is done with the menu bar control, which is added to the main interface. First,

Items: [{xtype: ' Maintop ', Region: ' North '//put him on top}, {xtype: ' Mainmenutoolbar ', Region: ' North '//Put him under Maintop}, {xtype: ' Mainbottom ', Region: ' South '//put him at the bottom}, {region: ' center ',//middle panel version xtype: ' Maincenter '}]

A menu bar is added to the system to look at the effect.

I have set up 4 types of menus in the system, namely:

• Menu button: Under the menu button at the top.
• Menu bar: Under the top area, the one that's just done is.
• Menu tree: The menu tree that appears in the left area.
• Collapsed menu: Another way to display the area on the left.

These kinds of menus can be very convenient between the switch, if you think too much is not necessary, you can cancel the dislike. All the interfaces are built with controls, so it's convenient to add a menu style or cancel one.