{"id":484,"date":"2008-12-04T00:00:00","date_gmt":"2008-12-04T00:00:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/ext-framework-jquery-and-asp-net\/"},"modified":"2021-05-17T18:35:04","modified_gmt":"2021-05-17T18:35:04","slug":"ext-framework-jquery-and-asp-net","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/ext-framework-jquery-and-asp-net\/","title":{"rendered":"Ext Framework, jQuery and ASP.NET"},"content":{"rendered":"
\n

Ext Framework, jQuery<\/b> and ASP.NET<\/h1>\n

With a little bit of magic you can do anything!\u00a0 I enjoy leaving the details of the intricate workings of object libraries to those lower level folks who enjoy typing code all day.\u00a0 If you’re like me, you’re only concerned with the higher level aspects of web development.\u00a0 I want to get things done fast, and ASP.NET<\/b> and JavaScript<\/b> libraries like Ext<\/b> and jQuery<\/b> make that possible.\u00a0 Some people cringe at JavaScript.\u00a0 I don’t claim to be an expert, but you don’t have to be a genius to use good JavaScript APIs.\u00a0 This article is aimed at those who would like to see greater things out of their presentation layers without having to write tremendous amounts of code to accomplish it.<\/p>\n

Practical Overview<\/h1>\n

Let me start by explaining the practical uses of Ext <\/b>and jQuery<\/b>. \u00a0The Ext <\/b>Framework, for the most part, is geared at creating stunning user interfaces in a browser or AIR application that interact with the user much like what you would expect to see in a Flash<\/b> or Silverlight <\/b>application.\u00a0<\/p>\n

\"614-image002.jpg\"<\/p>\n

\u00a0 The great thing about Ext<\/b> and jQuery<\/b> is that they run on the client, so any server side language can interact with them.\u00a0 ASP.NET can be used as a wrapper, like Coolite, which encapsulates the Ext<\/b> Framework and supplies developers a standard way to implement Ext, or it can be used simply as a mechanism to interact with the client to create a customizable user experience.\u00a0 Either way you decide to use Ext, you will immediately see the power in its implementation.\u00a0<\/p>\n

Like Ext<\/b>, jQuery<\/b> is a cross-browser JavaScript library that takes the strain out of doing complex procedures on the client.\u00a0 jQuery<\/b> is implemented in a way that most object oriented developers are familiar with, making it easy to learn and use.\u00a0 Every method in jQuery<\/b> returns the object itself, allowing you to chain methods together.\u00a0 In .NET, a simple chain could consist of turning an object into a string and then calling the substring method all within one line of code:<\/p>\n

objectA.ToString().Substring(0, 3).\u00a0<\/pre>\n
One advantage of both libraries is their awareness of page state. \u00a0Both Ext<\/b> and jQuery<\/b> use the document ready approach to ensure that page elements are ready to be manipulated before any calls are made.\u00a0 By using these two libraries, you immediately eliminate much of the time you would usually spend developing workarounds for common problems associated with DHTML and cross browser integration.\u00a0 You also give yourself a plethora of web 2.0 functions.<\/p>\n
Getting Started<\/h2>\n
To get started using Ext<\/b> and jQuery, download the latest versions:<\/p>\n
    \n
  1. Ext Framework SDK:<\/b>\u00a0 http:\/\/extjs.com\/products\/extjs\/download.php<\/a><\/li>\n
  2. jQuery:<\/b>\u00a0 http:\/\/docs.jQuery.com\/Downloading_jQuery<\/a> (Optional, Ext contains a version of jQuery already)<\/li>\n<\/ol>\n
    Create a directory in the root of your web application called resources and then create a subdirectory called jscript<\/b>.\u00a0 Copy the entire Ext Framework SDK folder into the jscript<\/b> subdirectory.\u00a0\u00a0 To reference these script files anywhere in your application you will need to run your application from a web server.\u00a0 In the example I share in this article, I created a web application in IIS called webportal<\/b>.\u00a0 So now, anywhere in my application I can reference Ext<\/b> and jQuery<\/b> by using the relative path of the application itself: \/webportal\/resources\/jscript\/.<\/b><\/p>\n
    Note:<\/b> Some Ext<\/b> examples in the SDK contain php code, so some samples will not work unless your server can serve php.<\/p>\n
    Including the Script Libraries<\/h2>\n
    Ext is a little more problematical to include in your applications and it has a bigger footprint than jQuery; however, there are options that will improve performance if you do not require the use of the entire library.\u00a0 For example, you can build your own version of Ext<\/b> using this wizard: http:\/\/extjs.com\/products\/extjs\/build\/.<\/p>\n
    Below I show how to include these libraries in your ASP.NET Master page.\u00a0 Please check out the source code to my example web portal as well for a more in depth view of the setup.\u00a0<\/p>\n
    At the time of this article the current version of Ext<\/b> was 2.2.\u00a0 If a new version of Ext<\/b> where to come out, all you would need to do is delete the old ext-2.2 directory and copy the new SDK in its place.\u00a0 You would then update the references below to the new version.\u00a0 Using ASP.NET you could retain the version in a settings file and reference that setting everywhere in your application.\u00a0 You will notice in my portal example that this is the approach I took.<\/p>\n
    Just below the script references are the style sheets for Ext.\u00a0 The first one is required.\u00a0 The second one is optional if you want to override the default theme with a custom theme.\u00a0 In this article I am using the slickness theme, which can be downloaded from the Ext<\/b> website.<\/p>\n
    <script type=\"text\/javascript\" src=\"\/webportal\/resources\/jscript\/ext-2.2\/adapter\/jQuery\/jQuery.js\"\r\n\u00a0 xml:space=\"preserve\">\r\n\u00a0 \/\/<![CDATA[jQuery LIBRARY\r\n\u00a0 \/\/]]>\r\n<\/script>\r\n\u00a0\r\n<script type=\"text\/javascript\" src=\"\/webportal\/resources\/jscript\/ext-2.2\/adapter\/jQuery\/ext-jQuery-adapter.js\"\r\n\u00a0 xml:space=\"preserve\">\r\n\u00a0 \/\/<![CDATA[EXT jQuery LIBRARY\r\n\u00a0 \/\/]]>\r\n<\/script>\r\n\u00a0\r\n<script type=\"text\/javascript\" src=\"\/webportal\/resources\/jscript\/ext-2.2\/ext-all.js\"\r\n\u00a0 xml:space=\"preserve\">\r\n\u00a0 \/\/<![CDATA[EXT FRAMEWORK\r\n\u00a0 \/\/]]>\r\n<\/script>\r\n\u00a0\r\n<link href=\"\/webportal\/resources\/jscript\/ext-2.2\/resources\/css\/ext-all.css\"\r\n\u00a0 rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<link href=\"\/webportal\/resources\/jscript\/ext-2.2\/resources\/css\/xtheme-slickness.css\"\r\n\u00a0 rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<\/pre>\n
    If you want to use the jQuery<\/b> library or any other library that comes with Ext<\/b> you will need to look at the INCLUDE_ORDER.txt file in the SDK.\u00a0 Notice that jQuery<\/b> is included first.<\/p>\n
    Looking at the Code<\/h1>\n
    My example web portal uses an ASP.NET Master Page consisting of a two column content layout with a header, body and footer.\u00a0 Ext<\/b> powers the entire layout.\u00a0\u00a0 Let’s examine the code.<\/p>\n
    \"614-image003.gif\"<\/p>\n
    And this is what it produces (minus the lightshow in the upper right hand corner J):<\/p>\n
    \"614-image006.gif\"<\/p>\n
    The layout has the north (BoxComponent)<\/b>, the west navigation panel, the center content panel and the south panel.\u00a0 The west and the south panel are collapsible.\u00a0 The viewport has the black slickness theme as defined in the xtheme-slickness stylesheet, which overrides the default look.\u00a0 You can download additional themes from the Ext<\/b> website, or you can create your own.<\/p>\n
    So how do we interact with the panels?\u00a0 Let’s say you want to collapse a panel using a button.\u00a0 Remember those global panel variables?\u00a0 Here is some jQuery<\/b> code:<\/p>\n
    <div class=\"northRegion\" style=\"position: absolute; top: 5px; right: 0%; z-index: 50000;\">\r\n<\/div>\r\n<input type=\"button\" value=\"North\" class=\"northRegionButton\" \/>\r\n<input type=\"button\" value=\"South\" class=\"southRegionButton\" \/>\r\n<input type=\"button\" value=\"West\" class=\"westRegionButton\" \/>\r\n<input type=\"button\" value=\"Center\" class=\"centerRegionButton\" \/>\r\n\u00a0\r\n<script type=\"text\/javascript\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n\u00a0 \/\/--------------------------------\r\n\u00a0 \/\/ jQuery Code\r\n\u00a0 \/\/--------------------------------\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n\u00a0 $(document).ready(function(){\r\n\u00a0\u00a0\u00a0 \/\/--------------------------------\r\n\u00a0\u00a0\u00a0 \/\/ Setup North Region\r\n\u00a0\u00a0\u00a0 \/\/--------------------------------\r\n\u00a0\u00a0\u00a0 $(\"div.northRegion\").hide();\r\n\u00a0\u00a0\u00a0 $(\"div.northRegion\").html(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"<div style='font-family: Tahoma; font-size: 11px; color: white; width: 800px; \" +\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"text-align: center;'><h1 style='font-family: Impact; font-size: 50px;'>North Region\" +\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"<\/h1>this is the Ext North Region\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 );\r\n\u00a0\u00a0\u00a0 \/\/--------------------------------\r\n\u00a0\u00a0\u00a0 \/\/ Events\r\n\u00a0\u00a0\u00a0 \/\/--------------------------------\r\n\u00a0\u00a0\u00a0 \/\/ North Region\r\n\u00a0\u00a0\u00a0 $(\"input.northRegionButton\").click(function(){ $(\"div.northRegion\").toggle(\"slow\"); \u00a0});\r\n\u00a0\u00a0\u00a0 \/\/ South Region (pSouth - Global Ext Panel defined in MasterPage)\r\n\u00a0\u00a0\u00a0 $(\"input.southRegionButton\").click(function(){ (pSouth.collapsed) ? pSouth.expand() : pSouth.collapse() });\r\n\u00a0\u00a0\u00a0 \/\/ West Region (pWest - Global Ext Panel defined in MasterPage)\r\n\u00a0\u00a0\u00a0 $(\"input.westRegionButton\").click(function(){ (pWest.collapsed) ? pWest.expand() : pWest.collapse() });\r\n\u00a0\u00a0\u00a0 \/\/ Center Region\r\n\u00a0\u00a0\u00a0 $(\"input.centerRegionButton\").click(function(){ \r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var $child = $(\"#center\").children();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var $page0 = \"\/webportal\/resources\/jscript\/ext-2.2\/examples\/samples.html\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var $page1 = \"\/webportal\/resources\/jscript\/ext-2.2\/examples\/collapsed.html\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 ($child[0].src.toLowerCase().match($page1) != null) ? $child[0].src = $page0 : $child[0].src = $page1; \r\n\u00a0\u00a0\u00a0\u00a0 });\u00a0\u00a0\u00a0 \r\n\u00a0\u00a0\u00a0 \/\/--------------------------------\r\n\u00a0 });\r\n\u00a0 \r\n<\/script> \r\n<\/pre>\n
    Inside the jQuery<\/b> document ready function I included a setup section where I set up my northRegion<\/i><\/b> div.\u00a0 Inside my northRegion<\/i><\/b> div I want to toggle in and out some words from the right hand portion of the screen in a swoop like fashion when the northRegionButton<\/i><\/b> is pushed.\u00a0 I setup the northRegion<\/i><\/b> div and then defined a jQuery<\/b> function for when the northRegionButton<\/i><\/b> is pushed:<\/p>\n
    $(\"input.northRegionButton\").click(function(){ $(\"div.northRegion\").toggle(\"slow\");\u00a0 });).<\/pre>\n
    Inside the click event is logic to toggle in the northRegion<\/i><\/b> div content.\u00a0 You can see at first I had to hide the northRegion<\/i><\/b>, and then I defined what it contains and I defined an event for it.\u00a0 The result is pretty cool considering all the JavaScript code in the background making it work that I didn’t have to write myself.\u00a0<\/p>\n
    Now what about those global Ext<\/b> panels?\u00a0 As mentioned previously, the south and west panels are collapsible.\u00a0 In the jQuery<\/b> script above I make a basic condition for the two buttons in their click events.\u00a0 For example, the south panel (pSouth) I say – If the south panel is collapsed then expand it, else collapse it.\u00a0 I did the same for the west panel (pWest).\u00a0 You can handle any global Ext<\/b> object with the same approach using jQuery.<\/p>\n
    The source of the project is here (a 7 Mb zip file)<\/a><\/p>\n
    Using Coolite \/ ASP.NET<\/h1>\n
    Don’t want to bother with JavaScript?\u00a0 Well Coolite is your answer.\u00a0 I like Coolite, but I also like JavaScript so it really boils down to your preference.\u00a0 There are advantages to both approaches.\u00a0 Coolite is good because you can drag and drop server controls on your web form and setup the properties in Visual Studio just like you would any other server control.\u00a0 Coolite is free unless you want the source code.\u00a0 The biggest disadvantage of Coolite is when Ext<\/b> upgrades.\u00a0 Because Ext<\/b> is encapsulated in Coolite you have to wait for Coolite to upgrade before you can take advantage of the new features and fixes of Ext.\u00a0 Also, when Coolite does upgrade, you have to upgrade all your projects to use the new version of Coolite.\u00a0 It can become very tedious doing this.\u00a0 Basically with Coolite, you get the latest version now and stick with it for the long run.\u00a0\u00a0 Another disadvantage is the extent to what Coolite implements.\u00a0 Not all the features of Ext<\/b> are available in Coolite controls.\u00a0 So with that said, don’t let my negativity dissuade you from checking out Coolite.\u00a0 It is very awesome and it continues to become more powerful as time goes on!<\/p>\n
    Links to consider<\/h1>\n
    The following will be helpful in your exploration of Ext<\/b> and jQuery.<\/p>\n