Some Common ExtJS Error Messages Explained

Its Monday morning, and it truly feels like it today. My coffee is not even finished yet, and I already found myself making a dumb mistake and spending too much time troubleshooting it, so I thought I would share with you a few common errors that we might run across when writing ExtJS applications. With any luck, these will stick to the inside of your cranium - and hopefully mine as well.

this.config[col] is undefined

The autoExpandColumn feature of the ColumnModel accepts an 'id' as the argument, this 'id' needs to match the 'id' given to the Column configuration.

{<br /> columns: [{<br /> id: 'not_so_super_column_id', // column id defined<br /> header: 'Super Duper',<br /> dataIndex: 'superduper'<br /> }],<br /> ...,<br /> autoExpandColumn: 'super_duper_column_id' // wrong column id used - fail!<br /> }

Another thing to keep in mind, is that while it works sometimes, the value for autoExpandColumn should NOT be a column index - the id of the column should always be used.

types[config.xtype || defaultType] is not a constructor (b[d.xtype || e] is not a constructor)

This happens when trying to instantiate (create) a component that does not exist, the most common reason is a typo or spelling error. For instance, using 'gridpanel' as the xtype instead of 'grid' - which is a mistake I make often myself. Sometimes we can forget a level of namespacing, like using Ext.FormPanel instead of the proper Ext.form.FormPanel.

{<br /> xtype: 'formpanel' // fail<br /> },{<br /> xtype: 'form' // win!<br /> }

Another one I always run into is typing 'combobox' instead of the correct 'combo' for the xtype - a list of xtypes can be found in the ExtJS documentation under Ext.Component.

this.addEvents is not a function

This is not a new problem (you like that pun?) but unfortunately the error message sends us off in the wrong direction. When this message appears it sounds like its an event related problem, but what it simply means is that we have forgotten to preface a constructor with the 'new' operator.

Ext.form.TextField({}); // fail<br /> new Ext.form.TextField({}); // win!

el is null

So with this one, its a little easier to figure out what went wrong just from the error message. In shorthand variable naming, a couple of letters are picked out of a longer word that phonetically make sense, and do not spell something else or sound like other commonly used words. So in this case 'el' is short for ELement. As the error message says 'el is null', which if we translate from geek speak to English it says 'html element does not exist'.

</p> <div id="sweet_dude"></div> <p>new Ext.Button({<br /> text: 'Clicky',<br /> renderTo: 'dude_sweet' // does not match the id!<br /> });

f.convert is not a function

This one is not so common, but still happens every once and a while. It means that your data reader was trying to read the data you passed to your store with a particular data type that did not exist. Thats allot to take in, so lets take a look at this example.

var myStore = new Ext.data.ArrayStore({<br /> fields: [{<br /> name:'fullname',<br /> type:'badass'<br /> }, {<br /> name:'first',<br /> type:'string'<br /> }]<br /> });

In this example the 'fullname' column has a datatype of 'badass', which does not exist. On the flip side, the datatype for 'first' of 'string' does exist.

Summary

Now if we can just keep these in our memory, we might be able to have a productive day -or just drink more coffee and see how that pans out.