What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

2Nov/160

Declarative Listeners vs. Control

Back in ExtJS 5 Sencha rolled out a rather cool concept of declarative listeners, where you could write something like this:

{
    xtype: 'button',
    handler: 'onButtonClick'
}

...note that onButtonClick is a string, rather than a function reference. The idea here is that the actual function would be resolved at runtime and will be located somewhere in the ViewController world. It was described well by Don Griffin in his blog post: https://www.sencha.com/blog/using-viewcontrollers-in-ext-js-5/.

However, what was omitted in this blog post and the guides, is the potentially powerful and risky "up the component tree" resolution of the ViewController. Read on to learn more with a Sencha Fiddle example...

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
9Jun/150

ExtJS 6: the best IE8-Modern Web Apps

Recently I wrote about my dissatisfaction with ExtJS 6 for being an "ExtJS 5 + Sencha Touch in disguise".

However, I came to realize that the beloved IE8 browser is essentially what's paying my bills. IE9 as well. It is easy to make jokes about how bad the browser is (compared to the latest and greatest):

one does not simply debug ie8

ie8 and open source bad time

You can do these all day long; just hit up image search for "ie8 meme".

However, let's address this one:

its 2015 who still uses ie8

VN:F [1.9.22_1171]
Rating: 9.0/10 (9 votes cast)
12May/150

Layout Renders Partially – How To Fix

Last year I wrote in-depth about ExtJS "heavy" JavaScript layout system in Sencha's blog: http://www.sencha.com/blog/exploring-the-layout-system-in-ext-js-5-and-sencha-touch

Recently I discovered a rather interesting "issue" that all big ExtJS apps will hit eventually: the app will start "misbehaving" in a sense that very complex sections will sometimes render only partially and the UI will become unresponsive. This one will be extremely painful to figure out, as this is actually a result of a "silent failure" by the ExtJS layout system, due to a pre-emptive assumption of "if you're running too much layout, you probably did something wrong" by the framework. Read on for an easy fix...

VN:F [1.9.22_1171]
Rating: 7.6/10 (8 votes cast)
23Aug/140

ExtJS 4 and 5 vs. IE 6 thru 11

Get a neck stretch and a clear picture of legacy through modern IE support in ExtJS 4 and 5:

ExtJS 4 & 5 vs. IE 6 thru 11

Note that the Neptune theme, which shipped in an ExtJS 4 dot release, does not support IE6. It makes use of transparent PNGs, which aren't supported in IE6.

One of the greatest advantages of the ExtJS framework is how far back it supports IEs. The interesting thing here is the "adaptive markup" that it generates, say for a framed panel with gradient headers:

  • Pre-IE9: a "heavy" table frame with every edge and corner having a sliced image of the frame
  • IE9 (introduced round corners): still a bit of framing for the header gradient image if used with rounded corners
  • IE10 & 11: minimal markup utilizing CSS3 effects
VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)
31Jul/140

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):

sample viewport

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:

sample panel shrinkWrap

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

VN:F [1.9.22_1171]
Rating: 9.3/10 (6 votes cast)
Page 1 of 212