Sencha ExtJS with Visual Studio 2012

1 post / 0 new
benzzon
benzzon's picture
Sencha ExtJS with Visual Studio 2012

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.
  1. Get the required Ext JS files
    1. Download Ext JS, and extract the .zip file.
    2. As of right now, you can get a free 30-day trial of Sencha Complete if you haven't purchased a license.
  2. Create the project in Visual Studio 2012
    1. Open Visual Studio 2012 (I'm using Express 2012 for Web)
    2. On the left, under "Start," choose "New Project..."
    3. Under "Installed" -> "Templates" -> "Visual C#" -> "Web," select "ASP.NET MVC 4 Web Application"
    4. Give the solution a name and a location.
    5. Click "OK" to move to the next window.
    6. For "View Engine" choose "Razor."
    7. It doesn't matter if you create a unit test project.
    8. Click "OK" to create the project.
  3. Add necessary files to the web project
    1. Create a new folder in your web application. Call it "extjs"
    2. 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.
    3. 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.
  4. Bundle the javascript file so your web project can use it.
    1. In your web project, open the folder called "App_Start". Inside that folder, open the file called "BundleConfig.cs".
    2. Inside "public static void RegisterBundles(BundleCollection bundles){}, add the following code:
      bundles.Add(new ScriptBundle("~/bundles/extjs").Include("~/Scripts/ext-all.js"));
  5. Bundle the .css file so your web project can use it.
    1. In your web project, open the folder called "App_Start". Inside that folder, open the file called "BundleConfig.cs".
    2. Inside "public static void RegisterBundles(BundleCollection bundles){}, add the following code:
      bundles.Add(new StyleBundle("~/Content/extjs").Include("~/extjs/resources/css/ext-all.css"));
  6. Render your bundles in the _Layout.cshtml file so that any view can use it.
    1. Open "Views -> Shared -> _Layout.cshtml".
    2. Add the following lines of code insice the <head></head> tag.
      1. @Styles.Render("~/Content/extjs")
      2. @Scripts.Render("~/bundles/extjs")
  7. Add a JavaScript reference so that you have intellisense support
    1. Inside the "Scripts" folder, open the file called "_references.js".
    2. Add the following code to the end of the document
      • /// <reference path="ext-all.js" />
  8. Test to be sure it's hooked up correctly.
    1. Open "Views -> Home -> Index.cshtml."
    2. At the very bottom of the file, type the following (notice that you should have intellisense working):
      • <script>Ext.onReady(function () { alert('hello') });</script>
    3. Save your project and click the play button.
    4. 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!