Sencha | What Is ExtJS

Interview with Atanas Popov

I started this blog because I wanted to learn ExtJS better and I tend to grasp things easier if I write them out twice (once in my codebase, then again on this blog). I cannot believe it was 7 years ago. My son is now 9 years old. What part of my life have I given to this technology, instead of him?

I’ve been writing less and less because I feel like I’ve grasped ExtJS to a deep enough extent for my purpose. Maintaining this WordPress blog has become a pain, so any further writing I will continue via the Medium platform.

This is the last post I will make on this blog. I invite you to read interview I did yesterday with Sencha’s new GM:

https://medium.com/@IvanJouikov/state-of-sencha-interview-with-atanas-popov-f80f3dde770e

Rating: 10.0/10 (3 votes cast)

Layout Run Error: Case of Toolbar

Last year I wrote about the rather grim approach to troubleshooting ExtJS 4 (or 6 Classic) “Layout Run Error” issues:

Debugging ExtJS “Layout Run Error”

Now I came across a scenario now with a rather simple and unexpected fix. Consider this scenario where a panel specifies defaults for the “collapsible” behaviors of its child panels, but also has a toolbar as a child:

{
    title: 'Floating Footer',
    autoScroll: true,
    defaults: {
        xtype: 'panel',
        collapsible: true,
        collapsed: true,
        titleCollapse: true,
        margin: '0 30 0 30'
    },
    items: [{
        title: 'Panel 1',
        margin: '30 30 0 30',
        html: 'Panel content!'
    },{
        title: 'Panel 2',
        html: new Array(1000).join('Lorem ipsum '),
        collapsed: false
    },{
        title: 'Panel 3',
        html: 'Panel content!'
    },{
        xtype: 'toolbar',
        margin: '30 30 30 30',
        items: [{text: 'Back'}, '->', {text: 'Next'}]
    }]
}

A seemingly harmless configuration, this would throw “Layout Run Error” all day long with ExtJS 4.2. Why? Because apparently the “collapsible” configurations in the defaults somehow affect the toolbar (who while not a panel, but is a container). Easy fix – negate those configurations on the toolbar:

{
    xtype: 'toolbar',
    margin: '30 30 30 30',
    collapsible: false,
    collapsed: false,
    titleCollapse: false,
    items: [{text: 'Back'}, '->', {text: 'Next'}]
}

Rating: 4.7/10 (21 votes cast)

ExtJS 6 vs. Responsive

A few weeks ago I was at SenchaCon 2015 and majority of the sessions I attended revolved around ExtJS6 and Sencha’s responsive strategy. In summary: an effort has been made to converge ExtJS5 and Sencha Touch 2, but ultimately you will still be building a separate ExtJS and a separate Touch app. You do not end up with truly “one framework”, which is what I hoped for. Read on for details…

Continue reading ExtJS 6 vs. Responsive

Rating: 8.1/10 (13 votes cast)

Old Versions of Sencha CMD

Sencha CMD is a must-have if you’re doing any professional ExtJS or Sencha Touch app development. You can always get the latest version from Sencha’s product page, but what if you wanted to get an older version? Sure, upgrading to the latest version is an option, but we all know how smooth those upgrades can go (or not, especially if you messed with the build scripts).

TLDR
Older versions with release notes are available via this URL pattern:

http://cdn.sencha.com/cmd/x.x.x.xxx/release-notes.html

For instance:

http://cdn.sencha.com/cmd/3.1.2.342/release-notes.html
http://cdn.sencha.com/cmd/5.0.3.324/release-notes.html

So, the caveat is that you have to know the exact version which you’re after!

Rating: 9.0/10 (6 votes cast)

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:

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

Rating: 10.0/10 (4 votes cast)