Step by step use ext js mvc and ASP. Net MVC 3 to develop a simple CMS background management system and create a viewport (1)

After so long, I finally entered the topic, ext JS MVC development.

First, let's talk about a little change in 4.1.1. In 4.1, you must first create a class that is extended to Ext. App. application, and then use create to create its instance to start the application. In 4.1.1, you can directly call the application method to start executing the application, which is simplified.

To call the application method, the parameter is a configuration object. The main configuration items are as follows:

L name: used to define the name of the application. Here is simplecms.

L appfolder: Application path, which is scripts/APP

L autocreateviewport: The default value is false. Set this parameter to true to automatically load the viewport. js file under the \ Script \ app \ view directory. Because the directory has been configured in loader, you do not need to set the directory.

In vs2010, open index. cshtml on the homepage and add the following code to the user information:

Ext. onready (function (){

If (ext. blank_image_url.substr (0, 4 )! = "Data "){

Ext. blank_image_url = "content/images/s.gif ";

}

 

Ext. Application ({

Name: "simplecms ",

Appfolder: "scripts/APP ",

Autocreateviewport: True

});

 

})

 

 

In this way, the application runs, and now you need to create viewport. js. In Solution Explorer, right-click the \ Script \ app \ view directory to add a script text named viewport. js. Define a class derived from Ext. Container. viewport in the file to build the overall interface of the application. In this example, a user interface similar to ext js api is built, which consists of three parts: Top, main area, and bottom. The system name and exit buttons are displayed on the top. The management content is displayed on tabs in the main area, and the details page of the article content is displayed on tabs. The bottom part is purely a placeholder area. You can write some status information, but you will not do it in this example. If you are interested, study it yourself.

After the goal is clear, first define the framework of the new class. The Code is as follows:

Ext. Define ('simplecms. View. viewport ',{

Extend: 'ext. Container. viewport ',

 

Initcomponent: function (){

Varme = this;

Me. callparent (arguments );

}

 

});

 

 

In the Code, be sure to pay attention to the class name. The content before the last decimal point in the class name is the directory, followed by the file name. Here, because simplecms directs to the scripts/APP directory, the file directory is scripts/APP/view, which is the directory of the current file.

Now consider what layout to use. Because it is divided vertically, you don't need to use the border layout. You can use vbox. Now add the layout:

Layout: {type: 'vbox', align: 'stretch '},

 

Here, you must add align so that the layout can fill the width.

Now, add three parts of the interface to items. It is easier to use a toolbar because you need to add buttons on the top. The middle part is the tab; the bottom is only a placeholder, and you can use component. The Code is as follows:

Me. Items = [

{Xtype: "toolbar", height: 53, ID: "North "},

{Xtype: "tabpanel", flex: 1,

Items :[

{Title: "Article management "},

{Title: "image management "},

{Title: "user management "}

]

},

{Xtype: "component", height: 13, ID: "South "}

];

 

In the code, the height at the top is 53, and the bottom is 13. If Flex is set to 1, the entity occupies the remaining space. Define ID to facilitate future access and style definition.

Now, open the page in the browser and you will see the effect shown in Figure 17 after logging on.

Figure 17 basic framework

The basic framework is coming out. Beautify the top and bottom. Create a resources directory under the app directory, where the resources of the application will be stored, such as style files and images. Next, create the CSS directory and the images directory. the CSS directory is used to place the application style file, and the images directory is used to place the image. Create an app.css style file under the CSS directory. Then add the style:

# North, # South {

Background: # 6c86ae! Important;

Background-image:-WebKit-gradient (linear, 50% 0%, 50% 100%, color-stop (0%, # 6c86ae), color-stop (100%, #526c95 ))! Important;

Background-image:-WebKit-linear-gradient (top, # 6c86ae, #526c95 )! Important;

Background-image:-moz-linear-gradient (top, # 6c86ae, #526c95 )! Important;

Background-image:-o-linear-gradient (top, # 6c86ae, #526c95 )! Important;

Background-image:-MS-linear-gradient (top, # 6c86ae, #526c95 )! Important;

Background-image: Linear-gradient (top, # 6c86ae, #526c95 )! Important;

Border: 1px solid #567422! Important;

}

 

 

Add the style file to the home page, and refresh the page to see the effect shown in 18.

Figure 18 beautifying the framework

Now it looks almost the same.

Then, complete the display at the top, and add a component to display the project name. The Code is as follows:

{Xtype: "toolbar", height: 53, ID: "North ",

Items :[

{Xtype: 'component', CLS: 'logo ', HTML: 'simple CMS background management system '},

]

},

 

You need to define a style logo for the component to change the size of the displayed text. The style code is as follows:

. LOGO {

Padding: 10px 10px 10px 31px! Important;

/* Background: URL (../images/logo.png) No-repeat 10px 12px ;*/

Color: # fff! Important;

Font-size: 18px! Important;

Font-weight: bold! Important;

Text-Shadow: 0 1px 0 # 4e691f! Important;

}

The logo is blocked in the Code. If there is a logo, you can restore the code to display the logo.

Refresh the page and you will see the title 19.

Figure 19 page title

Add an exit button to the rightmost of the tool and display it with an icon. Copy the image file (logout.png) to the images directory. Then, add the following code to add the icon:

"-> ",

{Iconcls: "logout", tooltip: "exit", scale: "large ",

Handler: function (){

Window. Location = "account/logout ";

}

}

"->" Displays the toolbar icon on the right. The icon defines the scale as large, indicating that the 32*32 large icon is displayed. Click the button to go to the account controller's logout method.

Add the logout style to the CSS file:

. Logout {

Background: URL ("../images/logout.png ")! Important;

}

 

Refresh the page and you will see the exit icon 20.

Figure 20 Exit

The exit operation is not difficult. By the way, switch to the account controller and add a logout method. In the method, call the signout method to exit authentication and adjust it to the homepage. The Code is as follows:

Public actionresult logout ()

{

Formsauthentication. signout ();

Return redirecttoaction ("Index", "home ");

}

 

Regenerate the application and open the page in the browser to test the exit button. You can switch to the logon page, indicating that the exit operation is complete.

Now consider the main panel section. Because user management is only visible to the system administrator, this mode is not easy to process now. You need to extract it, create a panel object, and then add the required tab Based on the permission. Delete the main panel code in items and add the code for creating the main panel before it:

Me. mainpanel = ext. widget ("tabpanel ",{

Flex: 1, ID: "mainpanel ",

Items :[

{Title: "Article management "},

{Title: "image management "}

]

});

 

In the code, an ID is added for future calls. Article management and image management because all users are visible, they can be pre-added to the tab.

Add mainpanel to the original code position in items of viewport.

Next, you need to use userinfo to determine whether the user is an administrator. If yes, add the user management tab. The Code is as follows:

Varroles = "." + simplecms. userinfo. roles. Join ('.') + ".";

If (roles. indexof (". System Administrator.")> = 0 ){

Me. mainpanel. Add ({Title: "user management "});

}

 

Because the role in userinfo is saved in the array, convert it to a string and then compare it. Call the add method of the tab to add the new tab to the tab.

Now, you cannot see user management on the test user logon page in the browser. Log on to admin and you will see user management. This indicates that the permission control is successful.

After the above methods are used to control permissions, you can use different methods as needed, such as control buttons and page display. Ext js 4 is easy to add or remove components by using add or remove methods.

Now, we are here today.

 

Source code: http://download.csdn.net/detail/tianxiaode/4573793