Wednesday, April 10, 2013

ExtJS debug version: there it is - but useless

This is a follow-up post to my last week's "ExtJS: desperately need a debug version".
A user comment pointed me to the "-dev" version. Apparently there is such a file now containing some lines of error checking (not too many):

See  http://www.diffnow.com/?report=ahx86 for the diff. I compared http://cdn.sencha.io/ext-4.2.0-gpl/ext-debug.js with http://cdn.sencha.io/ext-4.2.0-gpl/ext-dev.js (My Chrome browser crashed a couple of times with these large files at DiffNow and similar online diff tools.)

A download of the latest version 4.2 contains, among many other files:

ext-all.js 1'402 KB
ext-all-debug.js 3'262 KB
ext-all-debug-w-comments.js 6'052 KB
ext-all-dev.js 6'109 KB

So what Sencha needs to do now is to update this page http://www.sencha.com/learn/debugging-ext-js-applications and recommend to include ext-all-dev.js instead of ext-all-debug.js, while keeping ext-all.js for production.

And, does it help?

A couple days forward and I upgraded my app (still in development) from ExtJS 4.1 to 4.2. All seemed fine. There were not too many backward-incompatible changes this time. Plus, I have the dev version now which would alert me of problems right?

A screen using 4.1:

The same screen with 4.2:
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all-gray.css"/>
<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>


The search field on the toolbar is missing. Just gone. Nothing in the console. The grid search extension is from here but that is irrelevant.

Another week passed by, and another case cost me 15 minutes of searching: I've created a new form panel with just one field, copy-pasted from an official example.

{
    fieldLabel: 'My field',
    name: 'myField',
    allowBlank: false
}

Loading it in the browser, but the panel remains empty (except for the button bar). No error or warning output of course. What's wrong? Something with the panel dimensions? The panel has no width or height? (ExtJS developers will know...) Trying all kinds of combinations. Turns out the problem is very, very basic. I forgot to specify what kind of field it is (xtype: 'textfield'). The example had it configured in the parent object as 'defaultType', and I did not copy that. So ext was supposed to render an element to the screen, but it was not informed about what kind of element it is. What does it do? Apparently nothing... How about at least logging a warning?

Conclusion

Nothing has changed for me. Making mistakes or upgrading ExJS means digging.

3 comments:

  1. I have the same problem with the grid search plugin. Did you ever find a solution to getting it to work with 4.2?

    ReplyDelete
  2. Yes, as always, with digging and trial and error. I had found the solution here: https://gist.github.com/aghuddleston/3297619 at the end of the page florian-network describes how to make it work in extjs 4.2.0. (replace attachEvents method with init method).

    ReplyDelete
  3. Ext containers have a default xtype for their children. The default xtype for a toolbar is 'button', and since the text property was not specified in your configuration object, it created a button with no text. Since the default style of a button shows only the text/icon in the toolbar, you saw nothing. So it didn't output an error because there was no error to output. It created a button for you and you didn't see it. If you hovered over the area, you likely would have seen the hover class.

    The grid-search plugin is third party. Third party plugins often break between versions, especially if they override private methods. Most of them do. Whether Ext provides a useful error for them is luck and I wouldn't hold that against the framework.

    The -dev version, while not perfect, does provide much better errors than without. You make it sound much worse off than it really is.

    ReplyDelete