Open vs2010, select a file from the main menu, create a project, select the C # web template under the installed template in the pop-up window shown in 1, and then select "ASP. net MVC 3 web application ", change the project name to simplecms, and click OK. A window of 2 is displayed.
Figure 1 new project window
Figure 2 create an MVC 3 Project
In the figure 2 window, make sure that the template is empty, the view engine is razor, and click OK to create the project.
After creating a project, you must first delete all the files in the solution content and scripts directories in Solution Explorer, and then create an images directory in the content directory, create the app and extjs directories under the scripts directory. In the app directory, create four directories, namely controller, model, store, and view, to store the controllers, models, stores, and view files of ext Js in the project. Create an UX directory under the extjs directory to store the extension components of ext Js.
The management system will use the latest ext JS version, that is, version 4.1.1. In the ext JS 4.1.1 package, bootstrap will be used. JS, ext-all.js, and ext-all-dev.js (now Bootstrap. JS loads the file instead of the ext-all-debug.js file during debugging) these three files and the Resources Directory are copied to the extjs directory of the solution. Note that do not copy the files directly to the actual directory of the Project. Otherwise, these files will not be included in the release package without additional settings during packaging, therefore, the best way is to copy data in Solution Explorer.
Also copy the Chinese Language Pack ext-lang-zh_CN.js under the local directory to the extjs directory. If the project supports multiple languages, you can create a local directory under the extjs directory to store the Language Pack. This is not required because you can directly copy it to the extjs directory.
Finally, search for the s.gif file in the ext jspackage directory and copy it to the images directory under the content directory.
The final result is shown in 3.
Figure 3 ext JS development framework
The ext JS framework has been set up. Now you need to test whether extjs can be used normally and create the homepage by the way. Create a homecontroller controller in the controllers directory and you will see the following code:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace SimpleCMS.Controllers{ public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } }}
Right-click the view in the Code and choose add view from the shortcut menu. The window shown in 4 is displayed.
Figure 4 Add a View to the homepage
Remove the "use layout or master page" option in the figure, because the application on a single page does not need layout or master page, and click the Add button, the following code is displayed:
@{ Layout = null;}<!DOCTYPE html>
Modify the index in the title to "CMS background management system", and add the page encoding instructions and references of ext JS styles and scripts under it. The Code is as follows:
<Title> CMS Background Management System </title> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <LINK rel =" stylesheet "type =" text/CSS "href =" @ URL. content ("scripts/extjs/resources/CSS/ext-all.css") "/> <SCRIPT type =" text/JavaScript "src =" @ URL. content ("scripts/extjs/Bootstrap. JS ")"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "@ URL. content ("scripts/extjs/Ext-lang-zh_CN.js") "> </SCRIPT>
Delete the DIV in the body, add a script block, and add the Ext. onready function block to the block. The Code is as follows:
<script> Ext.onReady(function () { })</script>
Add a blank image for verification in the onready function. Pay attention to the image directory. The Code is as follows:
if (Ext.BLANK_IMAGE_URL.substr(0, 4) != "data") { Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";}
Finally, alert of ext JS is called to display a prompt. The Code is as follows:
Ext. msg. Alert ("message", "Hello! ");
Now select debug in the main menu to start executing (not debugging), or directly press crrl + F5 to browse the project in the browser. If the prompt shown in Figure 5 is displayed, everything is normal, you can go to the specific development page. Finally, we need to solve the problem. Finally, we need to change all "11px" in the ext-all.css file to "12px". Otherwise, the font is too ugly.
Project files: http://download.csdn.net/detail/tianxiaode/4509623
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
