The Problem with Extjs these days

I really like Extjs. But I have found myself struggling with Extjs in recent times and questioning the overall philosophy and direction of the framework.

Configuration over convention?

There is this sense to me that Extjs is becoming too over-configurable. I feel the more Extjs becomes configurable, the less control a developer has in debugging any problems, navigating the code flow, and generally understanding what the hell is going on.

It seems that Extjs is pushing for less to be done programatically, and more to be done via configuration parameters. This is a double edged sword. On the one hand this allows for elegant one line solutions to complex issues, and on the other hand provides an unbearable debugging experience for developers.

Along with the thousands of configuration options there is also wizz bang magic like ‘refs’. If you ever had the misfortune of using refs with Extjs4.x global controllers (ie. ‘’) you will know what i mean. Global controllers, ie ‘’, are probably the worst Extjs idea ever. If you combine them with ‘refs’ you will find your generated ‘getter’ methods pulling back unexpected components; particularly if you have multiple instances of a dialog type.

Store proxies have also allowed AJAX calls to become highly configurable. With the exception of a few situations, proxies have mostly caused me a lot of pain due to the lack of transparency in what is going on. How I miss the days of the simple AJAX call!

Meaningful Errors..

In my opinion, the developers of Extjs have done a poor job in implementing appropriate exception handling.

Quite often I get an error being thrown, deeply embedded in some for-loop close to extjs’ core, that looks like this :

Uncaught TypeError: Cannot read property ‘substring’ of undefined(…) in parseNamespace()

It took me hours to figure out what the problem was.

My ‘items’ config object in one of my components was referencing another xtype which doesn’t exist or was accidently misspelled.

items : {
xtype: ‘myComponennt’ //misspelled!!

I have had this same error on at least 3 other occasions, and each time i have been stumped for at least an hour. Sometimes its because of a misspelling, or sometimes its because I forgot to add it to the requires.

But seriously, how hard can it be to implement extjs so that it throws an error like : Error: ‘myComponennt’ does not exist as an xtype ?

And this is what really annoys, these useless errors that extjs delivers. There is a complete sense of laziness in the extjs code error handling. Common programming mistakes and typos should be intercepted quickly and an exception thrown before it stumbles over some ‘undefined’ deep in some nest of loops.

It’s the kind of stuff that is probably scaring a lot of new developers away from Extjs. Imagine a newbie who forgets a ‘require’ or mistypes an ‘xtype’, and think of how offputting it must be for this newbie to be trawling deep through extjs code, when all he/she wants is to see a meaningful error like ‘Error : xtype : abc could not be found ’.

Almost every extjs developer has almost been on the verge of tears when getting this error :

Uncaught TypeError: Cannot read property ‘added’ of undefined(…)

which is thrown from some onAdded() function deep at Extjs’ core. What could it possible mean? What is it trying to tell you?

What it is trying to tell you is that you did not call addParent() at the end of you initComponent function. This is so frustrating and so common. Can’t they bake it into the extjs code that addParent() is called implicitly?

Anyway, I needed to have this rant. I have been back on an extjs4.x project for a while now, maybe on extjs5/6 they have fixed up some of these issues.

Posted in extjs | Tagged , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">