ExtJS | What Is ExtJS

shrinkWrap in ExtJS 4 and 5 Containers

ExtJS Containers and Panels are typically sized by their parent container’s layout. Traveling up the layout chain typically leads to a Viewport, which occupies the available screen space; i.e. (view in Sencha Fiddle):

Now what about those times when you want to use these beautiful panels as the actual content, rather than as holders of other content? In other words, how can we make the Panels size based on their content (rather than as dictated by their parent’s layout)? The end result might look something like this:

Read on to find out how its done and what caveats exist…

Continue reading shrinkWrap in ExtJS 4 and 5 Containers

Rating: 9.4/10 (7 votes cast)

ExtJS5 has 3 different scrolling systems?

Diving into ExtJS 5 and talking to some of the engineers behind it I’m forming the conclusion that there are 3 distinct scrolling systems being employed in ExtJS 5. What are they?

For traditional “mouse-only” desktops – using the native browser overflow: scroll
For mobile “touch-only” devices – using Sencha Touch’s kinetic “momentum” JS scrolling
For hybrids that have both mouse and touch support (i.e. MS Surface or Google Pixel) – using some sort of a hybrid of #1 and #2 where the JS kinetic scroller kicks in on tap-drag

I’d love to dissect this on an HTML level…

Rating: 8.4/10 (5 votes cast)

ExtJS vs. AngularJS

I’ve been meaning to say a few words about this for a long time: stop comparing ExtJS to AngularJS!

It’s like comparing a car to a tire:

One is not better than the other; it’s an invalid comparison
If you need a car, you probably shouldn’t buy just the tire
If you need just a tire, you probably shouldn’t buy an entire car

Consider this: minified version of ExtJS 4.2.2 is 1.4 MB (ext-all.js) and that’s not counting all the CSS and resources. By contrast, AngularJS 1.2.13 is just over 100 KB.

Now when I’m calling AngularJS a “tire” what I mean is that if you are building an app of any magnitude, you will probably be bundling it with some other libraries. I’m guessing many newer apps will have a bare minimum of AngularJS + jQuery + Bootstrap.

So, when would I chose one over the other, if I were equally proficient in both?

If an important objective is fast page load times (i.e. landing page), I would go with a lean stack on top of AngularJS
However, if I’m building an enterprise portal with a ton of UI and functionality, I would probably go with ExtJS
Now how about both? I’ve built apps that had a lean landing page with just jQuery that would then transition to the “app” in ExtJS; I think LastPass is an excellent example of that.

Rating: 10.0/10 (10 votes cast)

Illuminations for Chrome!

A few years ago I wrote about ExtJS4 Dev Tools of a Pro, where I mentioned a FireFox plugin called Illuminations. Since then I’ve switched to Chrome as my dev platform where I missed my cherished Illuminations plugin.

I believe only last week the creators of FF’s plugin have released a version for Chrome: https://chrome.google.com/webstore/detail/illuminations/hbhnkfhblakpfhcpepeoogmakimflibk

It doesn’t feel like a full port, but it does have the one feature I care most about: similar to how you can right-click on a page and “Inspect Element” to bring up dev tools and pinpoint the target in the DOM tree, you can now right-click and “Illuminate:”

At which point you will pinpoint the target in the Ext component tree:

Combined with Sencha Inspector for Chrome, the Chrome browser is now a powerhouse for ExtJS/Sencha Touch development!

Rating: 10.0/10 (3 votes cast)

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)