How to use Ext JS 4.1.1 in .Net MVC 4 project using Visual Studio 2012

**Dennis.Gearmesh** · 29 Dec 2012 4:52 PM

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."

**wadebee** · 23 Jan 2013 3:16 PM

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!

**Link_** · 3 Mar 2013 9:18 AM

Hello Guys,

I have a problem. I'm not able to do the work on extjs 4 in my asp.net mvc application 4.
Simply nothing happens when I run my application, ie a blank page appears. By Firebug I found the following error:

[COLOR=red !important]Uncaught SyntaxError: Unexpected identifier bundles/extjs?v=judcVaZnVQSTVXaPvtFF5liVbED9azajR9zxYgY6wTk1:848371[/COLOR]

[COLOR=red !important]Uncaught ReferenceError: Ext is not defined aplicacao:1[/COLOR]

See the structure of my application in the attached file:
app_folder.png

My main application app.js

Code:

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: true,
    paths: {
        'Ext': '../Scripts/ext411/src',
        //'Ext.ux':'../Scripts/ext411/src/ux',
        'APP': '../app'
    }
});
Ext.BLANK_IMAGE_URL = "../Scripts/ext411/resources/themes/images/default/tree/s.gif";
Ext.application({
    name: 'APP',
    appFolder: '../app',
    controllers: [
        'Menu'
        ,'Custom'
        ,'Bank'
        ,'Person'       
    ],
    autoCreateViewport: true
});

BundleConfig.cs

Code:

using System.Web.Optimization;


namespace Business.App_Start
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));


            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));


            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));


            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));


            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/hti_styletoolbars.css"));


            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));


            // Bundles Extjs
            bundles.Add(new StyleBundle("~/Content/extjs411").Include("~/Scripts/ext411/resources/css/ext-all.css"));
            bundles.Add(new StyleBundle("~/Content/extjs411/ux/css").Include("~/Scripts/ext411/src/ux/alert.css"));
            bundles.Add(new ScriptBundle("~/bundles/extjs411").Include("~/Scripts/ext411/ext.js"));
            bundles.Add(new ScriptBundle("~/bundles/extjs411/locale").Include("~/Scripts/ext411/locale/ext-lang-pt_BR.js"));
            bundles.Add(new ScriptBundle("~/bundles/aplicacao").Include("~/app/app.js"));
        }
    }
}

_Layout.cshtml

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")  
        @Scripts.Render("~/bundles/modernizr")


    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Financial", "Index", "MenuPrincipal")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>


        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

My Index.cshtml MenuPrincipal

Code:

@{
    ViewBag.Title = "Business";
    Layout = null;
}
<head>
    <title>Business</title>
</head>


@Styles.Render("~/Content/css")
@Styles.Render("~/Content/extjs411")
@Styles.Render("~/Content/extjs411/ux/css")


@Scripts.Render("~/bundles/extjs411")
@Scripts.Render("~/bundles/extjs411/pkgs")
@Scripts.Render("~/bundles/extjs411/locale")


@Scripts.Render("~/bundles/aplicacao")

Please, any help will be appreciated

hugs

How to use Ext JS 4.1.1 in .Net MVC 4 project using Visual Studio 2012

Thread Tools

Search Thread

Display

Hybrid View

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

ExtJS Intellisense rocks

ExtJS Intellisense rocks

Tags for this Thread