Geeks With Blogs
Łukasz Kuryło's blog

This is a part of EXT JS Tutorial


To successfully carry out everything that has been described in this article you need:

 

 

-Ext JS library – link

-ASP.NET MVC library – link

-.NET Framework 3.5 SP1 – link

 

 

If you haven’t installed Service Pack  for .NET Framework 3.5 and/or MVC library, do it in this order.

 

At the beginning  we have to create a new ASP.NET MVC Application. Go to the File->New Project and select ASP.NET MVC Web Application. Call it e.g. ExtJSFirstApp like shown in the picture below

 

 

 



















If you have Visual Studio 2008 Professional or higher, you will be asked about creating  a project for unit testing. We won’t be writing tests for javascript applications (at least for now), so select No.

 

Nest step is to add a Ext JS library to the Scripts directory in Solution Explorer. Right click on this directory and select Open folder in Windows Explorer. Now unpack the ext-3.0.0.zip archive there and rename it to ext. You can remove (or move somewhere) the examples and docs directories, because we don’t need them in the project. By the way you can remove the rest of *.js files (jquery and MicrosoftAjax library). We don’t need them too. We will use all the stuff which provide the Ext JS library only.

 

 

When you unpack the archive, in Visual Studio probably you won’t see the ext directory even when you press the refresh button. So click the Show All Files button and you will see the ext directory:

 

 

 


























Now press on the ext directory right mouse button and select Include In Project. On the other *.js files select Remove and click the Show All Files button again.

 

Another step is to place links to relevant *.js files in the master page. If you put the library in Script directory, in master page you should put :

 

    <link href="../../Scripts/ext/resources/css/ext-all.css" type="text/css" rel="Stylesheet" />

    <script type="text/javascript" src="../../Scripts/ext/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../../Scripts/ext/ext-all.js"></script>

    <script type="text/javascript" src="../../Scripts/ext/ext-all-debug.js"></script>

 

The ext-all.css is the main css file for Ext.

The ext-base.js is a default adapter for Ext. Other adapters allow you to use additional javascript libraries, like jQuery or YUI or Prototype.

The ext-all.js or ext-all-debug.js you can be used interchangeably in development. In production you should use only the non-debug version. These files conytains the primary Ext library.

 

 

Visual Studio javascript intellisense

 

In Visual Studio 2008 there is included support for javascript intellisense. When you put a *.js file in your page and click the Ctrl+Shift+J shortcut, you will update the intellisense and from this moment you can use it in your code:

 

 

 














If you have these script lines in the master page and want to write javascript code in the view pages (also do not want to add them again in views), you can set a references for them, which looks like that:

 

    ///<reference path="ext/adapter/ext/ext-base.js" />

    ///<reference path="ext/ext-all.js" />

    ///<reference path="ext/ext-all-debug.js" />

 

 

Now, after Ctrl+Shift+J combination, intellisense is available in this file.

Notice that, this trick with ///references you can also use in *.js files.

 

Except intellisense in VS2008 there is also available stuff to show a documentation for javascript classes/functions which is held in *.js files with vsdoc phrase in the name. I know nothing about vsdoc for Ext JS library, but maybe someone create some in the future. So remember about it. Up to this day, I know only about documentation for jQuery library. At this point it is worth to add that, to use this vsdoc  you need a hotfix for VS2008. For more info look here

 

 

Testing

 

 So it’s the time to test if everything works properly

 

In the <head></head> section on the master page add this code with the immortal “Hello world!” phrase

 

    <script type="text/javascript">

        Ext.onReady(function()

        {

            Ext.Msg.alert("Alert", "Hello world!");

        });

    </script>

 

 

The onReady function is automatically called when the DOM is fully loaded. It ensures that any page elements that you may want to reference in your functions will be available when the script runs.

 

The result should look like:

 

 






You may wonder why this button is around decorated with the white frames. Guilty  is the default css file(exactly the css type selector for table and descendant selector table td)which comes with MVC. If you remove the file (or these selectors), the result looks like below

 

 

 





 

Summary


This is all in the first part of Ext JS Tutorial. I have shown how to integrate Ext JS with ASP.NET MVC application and how you can use a intellisense to javascript in Visual Studio 2008.

Instead of doing all the steps described in this article, you can also download the finished project which contains all the files here (click the blue button called "Pobierz plik").

Posted on Tuesday, August 25, 2009 4:38 AM ASP.NET MVC , Ext JS Tutorial | Back to top


Comments on this post: Integration Ext JS and ASP.NET MVC

# re: Integration Ext JS and ASP.NET MVC
Requesting Gravatar...
This is as simple as it gets, but it gets your foot in the door.

good job
Left by kurt schroeder on Nov 06, 2009 5:44 PM

# re: Integration Ext JS and ASP.NET MVC
Requesting Gravatar...
I found all these tips very useful.
Especially removing of table styles in Site.css was really helpful for me.
Thank you!
Left by Yevgeniy Fligel on Nov 18, 2009 4:50 PM

# re: Integration Ext JS and ASP.NET MVC
Requesting Gravatar...
the download link(sample) does not work...

please put it on the well known hosting.
Left by hedayat on Nov 26, 2009 6:26 PM

# re: Integration Ext JS and ASP.NET MVC
Requesting Gravatar...
Link corrected.
Left by Łukasz Kuryło on Nov 27, 2009 5:12 PM

# re: Integration Ext JS and ASP.NET MVC
Requesting Gravatar...
How can I do this with IIS 6?
It seems a problem like "Ext is null".
Left by IORI on Apr 13, 2010 6:46 AM

# re: Integration Ext JS and ASP.NET MVC
Requesting Gravatar...
I have the same problem as IORI, I have the problem "ext is null". Anyone solved that?
Left by mittelbestellen on Apr 29, 2010 8:39 AM

# re: Integration Ext JS and ASP.NET MVC
Requesting Gravatar...
This is a very fascinating post, I was looking for this info. Just so you know I discovered your web page when I was searching for blogs like mine, so please check out my site sometime and leave me a comment to let me know what you think.
Left by professional seo on Jul 30, 2010 1:50 PM

Comments have been closed on this topic.
Copyright © Łukasz Kuryło | Powered by: GeeksWithBlogs.net