extjs5_ Customizing Menus 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.

//system Menu Definition, this menu can be from the background through Ajax.Systemmenu: [{text:' Engineering Management ',//Name of the menu itemIcon: ",//icon Address at top of menuglyph:0,//The value of the icon font for the menu itemExpanded:true,//whether to expand in the tree menuDescription: ",//Description of the menu itemitems: [{text:' Project ',//the name of the menu barModule: ' Global ',//the name of the corresponding moduleIcon: ",//the icon address of the menu barGlyph:0xf0f7//icon font for the menu bar}, {text:' Engineering Standard segment ', module:' Project ', Icon:‘‘, Glyph:0xf02e}]}, {text:' Contract Management ', expanded:true, items: [{text:' Project contract ', module:' Agreement ', Glyph:0xf02d}, {text:' Contract Payment plan ', module:' Agreementplan ', Glyph:0xf03a}, {text:' Contract Request form ', module:' Payment ', Glyph:0xf022}, {text:' Contract payment slip ', module:' Payout ', Glyph:0xf0d6}, {text:' Contract Invoice ', module:' Invoice ', Glyph:0xf0a0}]}, {text:' Comprehensive query ', Glyph:0xf0ce, expanded:true, items: [{text:' Project contract ledger ', module:' Agreement ', Glyph:0xf02d}, {text:' Contract Payment plan Ledger ', module:' Agreementplan ', Glyph:0xf03a}, {text:' Contract Request Bill ', module:' Payment ', Glyph:0xf022}, {text:' Contract Payment statement ', module:' Payout ', Glyph:0xf0d6}, {text:' Contract invoice account ', 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.

//according to Data.systemmenu, the menu data used below the menu bar and menu buttons are generatedGetmenus:function() {    varItems = []; varMenudata = This. Get (' Systemmenu ');//get the defined menu dataExt.Array.each (Menudata,function(group) {//iterating through an array of menu items                varsubmenu = []; //for each menu item, iterate through the array of menu barsExt.Array.each (Group.items,function(MenuItem) {Submenu.push ({mainmenu:' True ', ModuleName:menuitem.module, text:m Enuitem.text, Icon:menuitem.icon, glyph: Menuitem.glyph, Handler:' Onmainmenuclick '//event handlers in the Maincontroller                                    })                        })                varitem ={text:group.text, Menu:submenu, Icon:group.icon,                Glyph:group.glyph};            Items.push (item); })    returnitems;}

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

/** * The main menu of the system, based on the data in the Mainmodel, can be switched 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:' Show tree menu in left column ',//several menu-style toggle ButtonsDisablemouseover:true, margin:' 0-5 0 0 '}, {glyph:0xf102, tooltip:' Show menu in the top section ',//several menu-style toggle ButtonsDisablemouseover:true}], ViewModel:' Main ',//specify ViewModel as maininitcomponent:function() {        //Add the menu items generated in the ViewModel to the items in this toolbar         This. Items = This. Items.concat ( This. Getviewmodel (). Getmenus ());  This. Callparent (); }});

Now that the menu bar control is finished, add it to the main interface. First introduced in the uses of Main.js

items: [{    ' maintop ',    //  put him on top }, {    ' Mainmenutoolbar ' ,     // Put him under the maintop. }, {    ' mainbottom ',    //  put him at the bottom }, {    //  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.

extjs5_ Customizing Menus 1