一些通用的ExtJS报错信息处理收集

转：http://www.vinylfox.com/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.

 

view plain copy to clipboard print ?

1. {<br />   
2.     columns: [{<br />   
3.         id: 'not_so_super_column_id',  // column id defined<br />   
4.         header: 'Super Duper',<br />   
5.         dataIndex: 'superduper'<br />   
6.     }],<br />   
7.     ...,<br />   
8.     autoExpandColumn: 'super_duper_column_id'  // wrong column id used - fail!<br />   
9. }  

{<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.

 

view plain copy to clipboard print ?

1. {<br />   
2.     xtype: 'formpanel'  // fail<br />   
3. },{<br />   
4.     xtype: 'form'  // win!<br />   
5. }  

{<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.

 

view plain copy to clipboard print ?

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

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'.

 

view plain copy to clipboard print ?

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

</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.

 

view plain copy to clipboard print ?

1. var myStore = new Ext.data.ArrayStore({<br />   
2.     fields: [{<br />   
3.         name:'fullname',<br />   
4.         type:'badass'<br />   
5.     }, {<br />   
6.         name:'first',<br />   
7.         type:'string'<br />   
8.     }]<br />   
9. });  

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.