1. #1
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Vote Rating
    1
    Dennis.Gearmesh is on a distinguished road

      0  

    Default 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
      • 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.
    2. 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.
    3. 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.
    4. 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"));
    5. 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"));
    6. 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")
    7. 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" />
    8. 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."

  2. #2
    Sencha User
    Join Date
    Oct 2007
    Location
    Orlando, FL
    Posts
    19
    Vote Rating
    0
    wadebee is on a distinguished road

      0  

    Default ExtJS Intellisense rocks

    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!

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    26
    Vote Rating
    0
    Link_ is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Jan 2014
    Posts
    1
    Vote Rating
    0
    Friggin is on a distinguished road

      0  

    Default


    Thank you, worked like a charm!

  5. #5
    Sencha User
    Join Date
    Jun 2014
    Posts
    1
    Vote Rating
    0
    shobs is on a distinguished road

      0  

    Default ExtJs 5 in .Net MVC

    ExtJs 5 in .Net MVC


    Hi All
    Thank you for the detailed steps but however can someone help me out in integrating Ext Js 5 in .Net MVC using Visual studio .
    I haven't downloaded EXTJS 4 . I am new to EXTJS scripting and wish to start my application with EXTJS 5.

Thread Participants: 4

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."