Extjs4 Quick Start 4-menu implementation

Original http://www.cnblogs.com/good-temper/archive/2013/04/16/3023263.html

The status is not good these days, and there are too many chores to worry about. This time, let's talk less.

This article mainly describes the implementation of the extjs tree menu. Tree menus are widely used in many systems, mainly because of their clear hierarchies. Remember that the first tree menu we saw was implemented through <ul> <li>, which is very simple. Then I dragged one with the ready-made control of c #, and I was still complacent. Later, when I learned a general background code from my brother, I saw plum blossom snow. At that time, I felt so powerful that every node could have a database and be able to customize it. Then I came into contact with some UI libraries and saw more powerful tree menus.

It may not be difficult for many people to implement a simple tree menu, but it takes a lot of effort to implement a more complete function. Fortunately, there are a lot of ready-made options for us to use, and extjs also provides a rich function tree menu. This is the simplest one: Ext. Tree. Panel.

As mentioned earlier, when implementing an extjs component, we should follow the steps below:

The code implementation of each part is as follows:

// Model
Ext. define ('ET. model. menu ', {extend: 'ext. data. model ', fields: ['mid', 'text', 'cls', 'columns ', 'url', 'expanded', 'optype']});
// You may see that these fields do not correspond to the JSON data below. This is not important. Here, I have expanded several fields, but it is useless. You only need to set several key fields, we will introduce it below.

// Store
Ext. define ('ET. store. menus ', {extend: 'ext. data. treestore', requires: 'Et. model. menu ', model: 'Et. model. menu ', autoload: True, // sets automatic loading. When the page is opened, proxy: {type: 'ajax', URL: 'Data/manager is automatically loaded. json', Reader: {type: 'json', successproperty: 'success '}}});

// View
Ext. define ('ET. view. menu ', {extend: 'ext. tree. panel ', alias: 'widget. sxptmenu ', requires: ['Et. store. menus '], initcomponent: function () {Ext. apply (this, {ID: 'menu-panel ', Title: 'System menus', iconcls: 'icon-call', margins: '0 0-1 1', Region: 'west', border: false, enabledd: false, split: True, width: 212, minsize: 130, maxsize: 300, rootvisible: false, containerscroll: True, collapsible: True, autoscroll: false, store: ext. create ('ET. store. menus ')}); this. callparent (arguments );}});

// Controller
Ext. define ('ET. controller. menu ', {extend: 'ext. app. controller ', stores: ['menus'], models: ['menu'], views: ['menu '], init: function () {// initialization, the following sections bind a click event to the menu, which will be used later. Comment this first. control ({'sxptmenu ': {itemmousedown: This. loadmenu}) ;}, loadmenu: function (selmodel, record) {// load the Panel corresponding to the menu item, first determine whether it is a leaf node, if yes, it determines whether the current Panel has been created. If yes, it is activated directly. If no panel is created, it is created and added to the content-panel if (record. get ('leaf') {If (record. get ('o Ptype ') = 'window') {var win = ext. getcmp (record. Get ('url'); If (! Win) {win = ext. widget (record. get ('url')} win. show ();} else {var Panel = ext. getcmp (record. get ('id'); If (! Panel) {Panel = {ID: record. get ('url'), title: record. get ('text'), xtype: record. get ('url'), closable: true}; this. opentab (panel, record. get ('url');} else {var main = ext. getcmp ("content-panel"); main. setactivetab (panel) ;}}}, opentab: function (panel, ID) {var o = (typeof Panel = "string "? Panel: Id | panel. ID); var main = ext. getcmp ("content-panel"); var tab = Main. getcomponent (o); If (Tab) {main. setactivetab (Tab);} else if (typeof panel! = "String") {panel. ID = O; var P = Main. Add (panel); main. setactivetab (p );}}});

// App. js
Ext. loader. setconfig ({enabled: true}); Ext. application ({Name: 'et', autocreateviewport: True, appfolder: 'app', 'menu '// Add the menu controller]});

You only need to transmit the data in the JSON format of the menu in the background. Let's take a look at the JSON data of the next simple menu:

[{"Text": "question management", "mid": "1", "CLS": "folder", "leaf": false, "expanded": True, "children": [{"text": "question list", "mid": "2", "CLS": "file", "url": "subjectlist ", "leaf": True, "children": []}] },{ "text": "Group Management", "mid": "3", "CLS ": "folder", "leaf": false, "expanded": True, "children": [{"text": "topic group confirmation", "mid": "4 ", "CLS": "file", "url": "mstudentlist", "leaf": True, "children": [] },{ "text": "group list ", "mid": "5", "CLS": "file", "url": "mstudentlist", "leaf": True, "children": []}, {"text": "Report Review", "mid": "6", "CLS": "file", "url": "mstudentlist", "leaf": True, "children": []}]

Here, we can see that text specifies the ending name, CLS specifies the icon style (for example, folder is the folder icon, file is the file icon), leaf specifies whether it is a leaf node, and children Embedded child nodes. Others are custom. Here, the URL is used to specify the alias for opening the panel.

The basic menu usage is so simple. If you have higher requirements, such as adding a check button, dragging, and dynamic editing, you can refer to the instance code that comes with extjs.

Finally, we will discuss how to generate JSON. For systems with high flexibility (such as permission management), it is generally easier to store each menu item in a database. You can combine the items according to the situation and then splice them into JSON to return to the foreground. However, in many cases, we may not need such high flexibility. For example, if each role menu is fixed, we can consider writing each menu into a JSON file in the preceding JSON format, when a user logs in, the user can determine whether the role loads the corresponding file. This saves a lot of trouble (however, you should avoid unauthorized operations by directly opening the JSON file path, so it is best to judge the background in the interceptor ).

The code is shown at the end of the previous article.