Sencha ExtJS and jQuery, Intellisense and getting started
It's probably been quite a while since I blogged anything really useful. So I have been working for the past few months at a company called AgilityNOW, making some modifications, adding new features, and learning the framework architected by the two business entrepreneurs. Their framework is designed around ExtJS, Microsoft ASP.NET with ASP.NET WebMethods for web services. The mainly JavaScript based ExtJS front end consumes said web services and the ASPX pages/server side is mostly for serving up the data and CRUD operations. I have been learning about ExtJS, which has a pretty steep learning curve and I wanted to begin sharing some of my experiences about getting started with ExtJS and their controls in this type of environment. Since I have been doing server side ASP.NET using the ASP.NET UI controls for such a long time, it is especially hard for me to step away from the ASP.NET framework and begin using 100% JavaScript based UI that consumes web services. There are some benefits to doing it this way, and elimination of the postbacks and viewstate is nice but I still was very reluctant to go down this path if it weren't required by the company. My experience for the past few months have been exclusive to ExtJS, since jQuery is not allowed (from my understanding of the reasons why, it is that mixing the frameworks will cause confusion without a standard framework and there is a valid point there). I have a lot of positive experience with jQuery and I still think it is easier to use, but I will write about my experience with ExtJS to help others who are having the same difficult time learning how to use it. I've also been trying to decide on what kind of Testing framework to suggest to be used here, I've used a few that could be helpful but ExtJS adds its own complexity to the testing situation.
First off, ExtJS and jQuery were from my limited understanding, originally frameworks used for difference purposes. Originally jQuery started out as a DOM manipulation framework and not really trying to provide heavy functional controls. The jQuery UI was released a while after jQuery started, sometime in 2007. ExtJS from my understanding was really built from the ground up to be UI centric and provide controls that are used to build full featured UI from. ExtJS has a good object oriented design / architecture and their UI controls are meant to be used together to create great looking, theme-able UIs. Every UI framework, including ASP.NET, has their own ways of doing things and once you understand them the pieces start to fall together and you can progress more easily building great UI. The difficult part is getting started and making sure that you have a solid foundation to begin with.
And so my first helpful tip on working with ExtJS will be adding Intellisense support to your web pages if you are working with Visual Studio 2010. There are patches and updates that get the Intellisense to work under VS 2008, and I will post that in a later article but for now I show you the simplest method for enabling it.
Adding JavaScript Intellisense with ExtJS revolves around making sure that your ExtJS code is separated out into ".js" files. This is just good programming practice but a lot of developers may get used to entering their JavaScript inline to the web pages. To use the Intellisense hints below, they must be at the top of a ".js" file for Visual Studio to recognize them. I know that they do not work on ASPX pages for obvious reasons, but I haven't tried using them on ".html" or other file types yet.
/// <reference path="~/scripts/ext/adapter/ext/ext-base.js" />
/// <reference path="~/scripts/ext/ext-all.js" />
You can also add more of your own .js references, and have one .js file reference another for Intellisense purposes, for instance:
/// <reference path="~/scripts/ext/adapter/ext/ext-base.js" />
/// <reference path="~/scripts/ext/ext-all.js" />
/// <reference path="~/scripts/HomePage.js" />
/// <reference path="~/scripts/AboutUsPage.js" />
Ext.onReady(function() {
… initialize your controls here …
});
For simplicity I used web page naming conventions for our JavaScript includes and assuming we have a HomePage.aspx or HomePage.html we would have a corresponding HomePage.js include file. When working with ExtJS, you will want to use fully qualified namespace naming conventions or class naming conventions for the files names. If you are designing UI components with ExtJS, many times you will have classes that are reusable and do not necessarily have to be tied to a page.
The last tip you will need to know is that you must press CTRL-SHIFT-J to manually tell Visual Studio to reload your JS references. If there are javascript warnings or errors (quite possible) in your javascript references, they will be shown on the Output window in Visual Studio.
Unfortunately, the Intellisense does not give you insight into the many class properties that you have to initialize when you are building the controls, but it does help for some of the simpler dom manipulations. Sencha has updated the ExtJS documentation site recently, and it has a great autocomplete/suggestion search box format that really helps find things quickly (the old version of the doc site was not so good).
Here is a link to the Sencha Ext JS docs for any versions of their framework:
http://docs.sencha.com/