View Full Version : ExtJS 4 - starting out

2 Oct 2013, 4:54 AM
Hi guys,

I work for a leading data management company in the oil industry and I am looking from some advice from experienced ExtJS programmers/architects on the best way to start out coding what is going to be a very large single page intranet based data management solution. The service/database layer already exists and is coded in Java, Iím using Tomcat as the server and the clients are all going to be using IE 8+. I started out writing the first part of the app using jQuery and a bunch of different plugins (jQuery Layout, jQuery ui, dynatree & wijmo complete for widgets/charts/grids) but soon came to the conclusion that all the different plugins and APIs were making my app frankenstein-esque and it was going to become a maintenance nightmare. I need a more consistent, substantial, flexible and modular framework.

After some research, I ended up here. I considered DOJO, but I was put off by the default themes (their buttons remind me of Apple in 2001) and broken demos. Try this one out.. Click ďnew messageĒ.. Seriously, why is this on their website? http://demos.dojotoolkit.org/demos/mail/demo.html
This is also brokenÖ http://demos.dojotoolkit.org/demos/parserAutoRequire/demo.html
Anyway, Over the next week, Iím going to be evaluating ExtJS and trying to build a basic app, starting with a lazy loading tree and a configuration panel inside a complex layout rather like this one:
I am looking at initially buying one commercial license moving up to 2 or 3 within the next year. Iím also looking at premium support and going on the next online training course which I believe starts November 4th.

I have a number of quersions:
What is the best IDE to use? As the back end is Java and I have all the source code available to me, I have been using Eclipse thus far. Itís pretty pathetic at handling Javascript in itís default guise, but Iíve heard Aptana can help. Iíve also tried Webstorm which I like, but then Iím going to need to use both it and Eclipse together which sounds like a pain. Suggestions?
How easy is it to create a lazy loading tree? Are there any guides around that demonstrate it? This is crucial.
If I wanted to write a custom component at some point and use entirely my own html/css for it, is this possible in ExtJS? (And if I did, where would I store the CSS/html?)
I have read through some architecture guides online like the Pandora example Ė http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt1 - Itís good but is trivial compared to what I need to build. Any advice here?
Debugging.. I have seen there is a Firefox plugin I think called Illumination, which sounds useful. I currently use Chromeís debugger which is my favourite. Is anything available for Chrome or IE like Illumination
Any general tips for someone starting out?
A cheeky question hereÖ But when does extjs 5 come out and how different will it be compared to 4? Iím expecting to get no answer to this but it was worth a try J


2 Oct 2013, 5:49 AM
1) Everyone has their own preference. Personally I use Aptana. You may also want to look at Sencha Architect, especially if you're just starting out.

2) Yeah, it's trivial to do so. As you expand a node, the client sends the node id to the server expecting the children. Example: http://docs.sencha.com/extjs/4.2.2/#!/example/build/KitchenSink/ext-theme-neptune/#tree-reorder

3) This is too vague to say anything definitive. You can certainly extend components and have custom css, there are several of these under /examples/ux in the SDK download.

4) The MVC architecture essentially stays the same. Just split up your views/controllers into logical parts, it scales pretty well in terms of architecture and maintainability.

5) Not AFAIK, pretty sure Illuminations is the only Ext specific debugger type tool. I prefer Chrome Dev Tools over FireBug.

6) The learning curve is probably a bit steeper than other frameworks, mostly due to the size & scope of what you can do. Don't be afraid to pop open the source files and have a look around.


When: Later
What: Will include a puppy machine

But really... See: http://www.sencha.com/blog/ext-js-on-tap/ as an example. There will be other stuff.

2 Oct 2013, 10:16 AM
My five cents:
1. You can use IntelliJ IDEA (fully unlocked platform, that Webstorm is basing on) for both. :)
3. Components under ux aren't usually defined according to best practices. App structure, provided by Sencha Cmd is often better.