ExtJS | What Is ExtJS

Sencha Inspector for Chrome

I wanted to share a really cool tool that my colleague released just today. It’s called App Inspector for Sencha and it’s a Chrome extension that fans of FireFox’ Illuminations for Developers will recognize instantly.

It’s the first release, so functionality is limited, but it does have some very useful features already. Particularly, being able to pin-point an ExtJS component when browsing DOM:

Also, it lets you browse the ExtJS component tree in general:

As far as I could tell, it doesn’t work for Sencha Touch yet, but I hope that will be added soon.

Rating: 9.7/10 (3 votes cast)

fiddle.sencha.com for ExtJS & Touch

Sencha folks have been working on an awesome new tool. It’s called fiddle.sencha.com:

If you’re familiar with jsfiddle.net, it’s essentially the same concept, but targeted at ExtJS and Sencha Touch, with some tasty features thrown in, i.e. performance analysis:

Even though it’s in beta, I’ve been using it for sometime now without much issue. Fiddle away!

Rating: 9.8/10 (5 votes cast)

ExtJS 4.2 Plugin Example

I’ve enjoyed the 4.2 ExtJS release since it came out; especially the new theme and grids. I recently wanted to “puff in” a Panel for some eyecandy, but I quickly realized it’s a bit trickier than you might think.

Components don’t have slideOut or fadeIn methods like Elements do.

It’s not a problem in case of “hiding” actions (i.e. slideOut or puff), which you can accomplish by something like component.getEl().slideOut().

However, in the case where you want to “show” a hidden panel (i.e. slideIn), in a case of deferred rendering (i.e. when creating and showing a new panel on the fly), the getEl() doesn’t have a DOM element to show yet, until the panel has been rendered.

The fadeIn method is achieved by showing a panel with CSS opacity 0% and then animating it back to 100%.

I ended up solving this via means of a plugin. Can you think of a more elegant solution?
Continue reading ExtJS 4.2 Plugin Example

Rating: 7.4/10 (19 votes cast)

ExtJS4+ “IntelliSense” in Eclipse :)

On Tuesday Sencha announced “Complete” and “Complete: Team” bundles, where of particular interest to me was the Eclipse “IntelliSense” Plugin (see Sencha’s excellent video).

I tried it for myself – it’s a pretty standard Eclipse plugin install:

There’s an Eclipse tutorial for how to setup a project; it took me about 5 minutes. I got stuck in a few spots, but figured it out. I plugged in a basic Fieldset extension and look at the depth of auto-complete – it recognizes ExtJS object hierarchy in great depth:

There’s also Eclipse help covering the great range of features. Overall, I was very impressed.

I use Notepad++, but this just might sway me to use Eclipse. Although, the $995 for the cheapest bundle option, is rather stingy. I really wish Sencha would offer this as a stand-alone product.

Rating: 7.4/10 (7 votes cast)

ASP.NET MVC3 & ExtJS4 Errors

In my previous post I presented an example of a basic ASP.NET MVC3 controller connecting to an ExtJS4 data store and passing some data in XML format via store’s load method.

So far I’ve run into just one issue with this setup – clean error handling. By default, ASP.NET MVC will spit out any exceptions in clear text (with <html> tags and everything), which is not very useful when building a quality web application. Here’s what I want on my errors:

Continue reading ASP.NET MVC3 & ExtJS4 Errors

Rating: 9.4/10 (7 votes cast)