View Full Version : ExtJs3 to ExtJs4 Migration

1 Mar 2011, 1:14 AM

I want try ExtJs4 in my application but when I launch my application with ExtJs4, I have many errors and my application is stoped.

uncaught exception: Attempting to extend from a class which has not been loaded on the page.


[Ext.ClassManager.parseNamespace] namespace must be a string

In my application, I extend Ext.Button and many other component and I think there is those classes that the error message talk

Can you help me ?

In my header, I load :

<script type="text/javascript" src="js/ext-js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="js/ext-js/resources/css/ext4.css" />


1 Mar 2011, 2:02 AM
Your includes sound ok, just the bootstrap and CSS needed.

Sounds to me like you may be missing a requires element in your class, and are possibly not using the class name as a string.

Your classes should look something like:

Ext.define('MyButton', {
extend: 'Ext.Button',
requires: [

If you're not using the new application architecture then you may need to create your namespaces, if relevant, before your class.

Just some thoughts off the top of my head.


1 Mar 2011, 7:31 AM
Hi, thanks for your answer.

I have an other problem with my ExtJS migration.
I use the Ext4 preview r2 and I have this error on firebug :

"uncaught exception: Attempting to extend from a class which has not been loaded on the page."

When I go to the file at the line who launch this error, I see :

Ext.ux.form.AGrid = Ext.extend(Ext.grid.EditorGridPanel, {
blabla: 'test'

But Ext.grid.EditorGridPanel doesn't exist on ExtJS4 !
When I put a break point and I try to look the Ext.grid content, I see missing many classes.
For example :

Ext.grid.Column or Ext.grid.ActionColumn...

Why ? Do you have an idea ?

May be I don't load all the component ?

1 Mar 2011, 8:02 AM
I believe standard grids support editing now, through the model linked to through their store.

I'd generally try and avoid migrating user extensions initially; you may not need them anymore, and won't know until you see what the new Ext framework provides.

Sounds like you have a huge job on your hands, especially since having trouble at the first stages.

Good luck with it though :)

1 Mar 2011, 5:18 PM
Ext.ux.form.AGrid = Ext.extend(Ext.grid.EditorGridPanel, {
blabla: 'test'

Try using the new Ext.define. If you are using the dynamic loading, you need to use define with extend: 'someclass'. That way the dynamic loader will make sure to load the class you are extending first.

Alternately you could just use ext-all.js and do it the old way.