Content below was copied from:
http://www.sencha.com/forum/showthread.php?252644-How-to-use-Ext-JS-4.1.1-in-.Net-MVC-4-project-using-Visual-Studio-2012
How to use Ext JS 4.1.1 in .Net MVC 4 project using Visual Studio 2012
It took me a while to figure this out since all of the links I could find were for older versions of Ext JS or older versions of .Net MVC. I wanted to post it here in case anyone else has problems figuring it out.
- Get the required Ext JS files
- Download Ext JS, and extract the .zip file.
- As of right now, you can get a free 30-day trial of Sencha Complete if you haven't purchased a license.
- Create the project in Visual Studio 2012
- Open Visual Studio 2012 (I'm using Express 2012 for Web)
- On the left, under "Start," choose "New Project..."
- Under "Installed" -> "Templates" -> "Visual C#" -> "Web," select "ASP.NET MVC 4 Web Application"
- Give the solution a name and a location.
- Click "OK" to move to the next window.
- For "View Engine" choose "Razor."
- It doesn't matter if you create a unit test project.
- Click "OK" to create the project.
- Add necessary files to the web project
- Create a new folder in your web application. Call it "extjs"
- In the Ext JS folder you extracted, find the folder called "resources". Copy the entire folder and paste it into the "extjs" folder inside your web project.
- In the Ext JS folder you extracted, find the file called "ex-all.js". Copy that file and paste it into the "Scripts" folder inside your web project.
- Bundle the javascript file so your web project can use it.
- In your web project, open the folder called "App_Start". Inside that folder, open the file called "BundleConfig.cs".
- Inside "public static void RegisterBundles(BundleCollection bundles){}, add the following code:
bundles.Add(new ScriptBundle("~/bundles/extjs").Include("~/Scripts/ext-all.js"));- Bundle the .css file so your web project can use it.
- In your web project, open the folder called "App_Start". Inside that folder, open the file called "BundleConfig.cs".
- Inside "public static void RegisterBundles(BundleCollection bundles){}, add the following code:
bundles.Add(new StyleBundle("~/Content/extjs").Include("~/extjs/resources/css/ext-all.css"));- Render your bundles in the _Layout.cshtml file so that any view can use it.
- Open "Views -> Shared -> _Layout.cshtml".
- Add the following lines of code insice the <head></head> tag.
- @Styles.Render("~/Content/extjs")
- @Scripts.Render("~/bundles/extjs")
- Add a JavaScript reference so that you have intellisense support
- Inside the "Scripts" folder, open the file called "_references.js".
- Add the following code to the end of the document
- /// <reference path="ext-all.js" />
- Test to be sure it's hooked up correctly.
- Open "Views -> Home -> Index.cshtml."
- At the very bottom of the file, type the following (notice that you should have intellisense working):
- <script>Ext.onReady(function () { alert('hello') });</script>
- Save your project and click the play button.
- When the page loads, you should see an alert message that says "hello."
*** First response on the article:
ExtJS Intellisense rocks
Step 7 was the key - thanks!
I put the CDN dev reference (ext-all-dev.js) into Tools | Options | Text Editor | Javascript | Intellisense | References and now I have verbose ExtJS Intellisense everywhere. The ExtJS documenters did a great job and the Intellisense even includes code examples. Wonderful!
