Extjs learning: MVC model case study (3)

InExtjs case series tutorialIn the first two lecturesExtjs learning: MVC model case study (2)We added the viewport. js and democontroller. js files to achieve the basic layout of the entire web page. This lecture makes the third part of our series of tutorials mainly implement the tree menu on the left side of the webpage, hoping to provide a guiding role for entry-level Web developers.

Next, we will add a menttree. js file in the view folder to serve as a tree menu component. Add the followingCode:

 

Ext. Define ('demo. View. menutree' , {Extend: 'Ext. Tree. Panel' , Alias: 'Widget. menutree' , Border:  False  ,  //  Specifying the display area of the anchor link address Hreftarget: 'maincontent',  //  Show root node? Rootvisible: False  ,  //  Dataset Store: 'menustore' ,  //  Menu style  Bodystyle: {Background: '# Ffc' , Padding: '10px' }}); 

In this way, we create a menu component, but our menu does not work properly yet, because the menu does not contain data. In extjs4, we use a separate file to create data models and datasets. Before creating a dataset, we first create a data model. Create a model folder under the app folder, and create the menumodel. js file under the folder. Add the following code to the file:

 
Ext. Define ('demo. model. menumodel', {Extend:'Ext. Data. model', Fields: [{Name:'Id', type: 'int'}, {Name:'Pid ', type: 'int'}, {Name:'Text', type: 'varchar'},//When type is Boolean, the default value is required.{Name: 'leaf', type: 'boolean', defaultvalue:True}, {Name:'Url', type: 'varchar'}]});
 

With the data model, create the store folder, create the menustore. js file under the folder, and add the following code:

Ext. Define ("demo. Store. menustore", {Extend:'Ext. Data. treestore', Defaultroodid:'Root', Requires:'Demo. model. menumodel', Model:'Demo. model. menumodel', Proxy: {type:'Ajax', URL:'./Server/data. json', Reader:'Json', Autoload:True}});
 

Since both the dataset and the data model are available, how can we add data to the menu? Generally, the data required by the menu is provided by the backend server, because we mainly explain extjs knowledge here and try not to involve backend things. We can simulate background data output in JSON format. Now, create the server folder in the root directory, and create a data. JSON file under the folder to provide data for the front-end:

 [{ "ID": "2" , "PID": "1" , "Text": "User Management" , "Leaf": "0" , "Url": "http: \/www. itlee. Name" , "Children" :[{ "ID": "5" , "PID": "2" , "Text": "basic information" , "Leaf": "1" , "Url": "http: \/www.sogou.com" , "Children ":"" },{ "ID": "11", "PID": "2" , "Text": "Information Management" , "Leaf": "1" , "Url": "http: \/www.sogou.com" , "Children ":"" },{ "ID": "12" , "PID": "2" , "Text": "Add User" , "Leaf": "1" , "Url": "http: \/www.sogou.com" , "Children ":""}]}, { "ID": "3" , "PID": "1" , "Text": "Product Management" , "Leaf": "0" , "Url": "http: \/www.so.com" , "Children" :[{ "ID": "7" , "PID": "3" , "Text": "product information" , "Leaf": "1" , "Url": "http: \/www.so.com", "Children ":"" },{ "ID": "8" , "PID": "3" , "Text": "add product" , "Leaf": "1" , "Url": "http: \/www.so.com" , "Children ":"" }] 

For the sake of simplicity, we replace the URL address of each node with a simple webpage. Everything is ready and loaded. So how can we load the menu components we have written into our project?
First, modify our viewport. js file and add the menu component to the entire view. The modified code is as follows:

Ext. Define ('demo. View. viewport' , {Extend: 'Ext. iner. viewport' ,  //  Layout mode Layout: 'border' , Items: [{Title: 'Extjs case' , Collapisble:  True  , Region: 'North' , Height: 100 , HTML: '<Br> <center> <font size = 5> extjs case implemented in MVC mode </font> <br> <font size = 2> source code: itlee blog </font> </center>' },{ Title: 'Function menu', Region: 'West' , Width: 180 , Split:  True  , Collapisble:  True  ,  //  Here is the modified part.  Items: [{xtype: 'Menutree' }]}, {ID: 'Maincontent' , Title: 'Display topic Content' , Layout: 'Fit', Region: 'Center' , Collapisble:  True  , Contentel: 'Contentiframework' }]}); 

Next, modify the democontroller. js file to load the menu component and the modified Code:

 
Ext. Define ('demo. Controller. democontroller', {Extend:'Ext. App. controller', Views :['Viewport', 'menutree'], Stores :['Menustore'], Model :['Menumodel']});
 

When we click the tree node, we find that the content of the webpage is not displayed in the topic Section on the right. This is because we have not added a monitoring event to the node. Next we will explain in detail how to add the effect of page switching.

ArticleSource: itlee blog

Address: http://www.itlee.name/qianduan/extjs/481.html/