ExtJS and ASP.NET Part 1- Setup

Extjs is a great client side tool we can use in our web applications, unfortunate that most of the examples on the internet are given in PHP, or server platform agnostic, as an ASP.NET programmer, I find that there are some tricks when you try to use Extjs in your .Net project.

In next couple of articles I will blog about the integration of ExtJS into an ASP.Net project. The integration was not as straight forward as you might have thought, but once you get past the steep learning curve, you will absolutely fall in love with this advanced UI tool, as a result, ASP.Net code behind will have nothing in it.

My experiences come from successful integration of ExtJS with a standard ASP.Net web form application, but I do not think there will be much difference if you are using ASP.Net MVC, because MVC is more friendly to the ajax programming model.

This is the first part of the series, how to set up ExtJS in ASP.Net web site project.

1. First download Extjs from here
2. Add Extjs to your ASP.Net project, here is a screen shot about my project structure with Extjs

Extjs File Structure

Extjs File Structure


3. Reference Extjs css in your aspx page:

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

4. Reference Extjs script in your asp page:

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

<%-- <script type="text/javascript" src="lib/ext-3.1.1/adapter/jquery/ext-jquery-adapter.js"></script>--%>

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

The line commented out is for jquery adapter if you do not want to use extjs one. Please notice that I am using the debug version in my development, it is recommended that to use the minimized version in the production. Be warned that if you use VS2008 to debug Extjs, VS2008 crashes most of the time, I have also tested this in VS2010, the crashes are definitely less frequent, but still happen, apart from that, javascript intellisense provided by VS2008 is brilliant.

5. Place your javascript within

Ext.onReady(function() {
// your javascript code
});

6.That is all you need to use Extjs in your asp.net project.

Tags:

This entry was posted on Monday, July 26th, 2010 at 4:37 am and is filed under ASP.NET, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “ExtJS and ASP.NET Part 1- Setup”

  1. ExtJS and ASP.NET Part 1- Setup…

    Extjs is a great client side tool we can use in our web applications, unfortunate that most of the examples on the internet are given in PHP, or server platform agnostic, as an ASP.NET programmer, I find that there are some tricks when you try to use E…

  2. Thilakraj says:

    May i know how to pass the value from ExtJs to Asp.net Server side.
    And also how to send dataset value to ExtJS.

Leave a Reply

*