What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

29Jun/170

Implicit ViewModel 2-Way Data Bindings

I've come across a rather interesting... let's call it "feature" of ExtJS ViewModel and data binding system. Turns out it is possible to establish "implicit" two-way data binds between parent & child view model data (within same component hierarchy) by setting the data of "lower" view model to "undefined", so long as the view models both define that data property with the same name. Picture the following simple hierarchy:

  • Parent Panel

    • Child Panel

Now imagine that both of the panels define their own ViewModels (implicit or not doesn't matter) that both define the same two properties, like so:

  • Parent Panel

    • undefinedText: "default Parent text"
    • definedText: "default Parent text"
  • Child Panel

    • undefinedText: undefined
    • definedText: "default Child text"

This is what the default rendering of these panels would look like:
Screen

Read on for a walk through of various scenarios and a Sencha Fiddle...

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
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 (2 votes 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)
Page 1 of 212