Extjs4 Quick Start 4-menu implementation

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:

// ModelExt. 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. I have expanded several fields here, but it is useless, you only need to set several key fields, which will be described below.
// StoreExt. define ('ET. store. menus ',{
Extend: 'ext. data. treestore ',
Requires: 'Et. model. Menu ',
Model: 'Et. model. Menu ',
AutoLoad: true, // sets automatic loading. Data is automatically loaded when the page is opened.
Proxy :{
Type: 'ajax ',
Url: 'Data/manager. json ',
Reader :{
Type: 'json ',
SuccessProperty: 'success'
}
}
});
// ViewExt. 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-menu ',
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 );
}
});
// ControllerExt. define ('ET. controller. Menu ',{
Extend: 'ext. app. controller ',
Stores: ['menus'],
Models: ['menu '],
Views: ['menu '],
Init: function (){
// Initialization part. The following Part binds a click event to the menu. It will be used later.
This. control ({
'Sxptmenu ':{
Itemmousedown: this. loadMenu
}
});
},
LoadMenu: function (selModel, record) {// load the panel corresponding to the menu item. First, determine whether the panel is a leaf node. If yes, determine whether the panel has been created. If yes, activate the panel directly, create and add content-panel if not created
If (record. get ('leaf ')){
If (record. get ('optype') = '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. jsExt. Loader. setConfig ({enabled: true });
Ext. application ({
Name: 'et ',
AutoCreateViewport: true,
AppFolder: 'app', 'menu '// Add the controller to the Menu
]
}); In the background, you only need to transmit the data from the menu in json format. Next, 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": "select 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": []}
]
}] We can see that text specifies the end name, cls specifies the icon style (for example, folder is the folder icon, file is the file icon), and leaf specifies whether it is a leaf node, children is embedded with 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 ).