PDA

View Full Version : Subclass working, Subclass of Subclass Bombing



Eric.Sencha
18 Jan 2012, 12:54 PM
The following renders ok:
===========================================================


Ext.ns('TestingNamespace');

Ext.require( 'Ext.container.Viewport' );

Ext.define('TestingNamespace.MyPanel',
{
extend: 'Ext.Panel',
alias: 'widget.panel-my',
requires:['Ext.Panel'],
});

Ext.application(
{
name: 'TestingNamespace.TestingApplication',
launch: function()
{
Ext.create('Ext.container.Viewport',
{
id: 'viewport',

layout:
{
type: 'fit'
},

items:
[{
id: 'viewportInner',
region: 'center',
xtype: 'panel',
margins: '5',

layout:
{
type: 'fit'
},

items:
[{
id: 'panel',
xtype: 'panel-my',
bodyStyle: {'border-width': '1', 'background-color': 'lemonchiffon'}
}]
}]
})
}
});

When i add the following everything bombs with no error messages:
===========================================================

Ext.define('TestingNamespace.MySubPanel',
{
extend: 'TestingNamespace.MyPanel',
alias: 'widget.panel-my-sub',
requires:['TestingNamespace.MyPanel'],
});

The following does not render ok:
===========================================================

Ext.ns('TestingNamespace');

Ext.require( 'Ext.container.Viewport' );

Ext.define('TestingNamespace.MyPanel',
{
extend: 'Ext.Panel',
alias: 'widget.panel-my',
requires:['Ext.Panel'],
});

Ext.define('TestingNamespace.MySubPanel',
{
extend: 'TestingNamespace.MyPanel',
alias: 'widget.panel-my-sub',
requires:['TestingNamespace.MyPanel'],
});

Ext.application(
{
name: 'TestingNamespace.TestingApplication',
launch: function()
{
Ext.create('Ext.container.Viewport',
{
id: 'viewport',

layout:
{
type: 'fit'
},

items:
[{
id: 'viewportInner',
region: 'center',
xtype: 'panel',
margins: '5',

layout:
{
type: 'fit'
},

items:
[{
id: 'panel',
xtype: 'panel-my',
bodyStyle: {'border-width': '1', 'background-color': 'lemonchiffon'}
}]
}]
})
}
});

===========================================================
Does anyone have an idea what is wrong with the subclass of a subclass in this particular example?

I'm stuck :P

Thanks.

-Eric

skirtle
18 Jan 2012, 8:27 PM
Please use [CODE] tags when posting code.

You don't need the Ext.ns, that's done automatically by Ext.define.

You also don't need to use requires to specify the superclass, that's implicit. Remove that from both of your classes.

If that doesn't fix it...

What ExtJS version are you using?

Which JS file are you using? Dynamic loading on or off? Where is MySubPanel defined relative to the other code you've posted?

Eric.Sencha
19 Jan 2012, 9:16 AM
In response to Skirtle's Questions:

Q: What ExtJS version are you using?


A: ExtJS version: 4.0.7 in FireFox v9.0.1 (Apache 2.2.21 running on localhost)

- httpRoot <http root folder for apache running on localhost>



- app <folder>



- Testing.html
- Testing.js



- extjs <folder>



Q: Which JS file are you using?


A: I have attached the files (.js and .html) in a .zip file to the original posting.



Q: Dynamic loading on or off?


A: I am not familiar with ExtJS dynamic loading yet (one of my next topics to tackle) however i believe i am not using dynamic loading (please see files now attached to original posting).


Q: Where is MySubPanel defined relative to the other code you've posted?


A: Directly below the definition for MyPanel (please see files now attached to original posting).



Thanks for any help you can offer - i am missing something fundamental about handling classes in ExtJS I believe.

-Eric

skirtle
19 Jan 2012, 1:17 PM
Using your code I get an error message in both Firefox and Chrome:


"NetworkError: 404 Not Found - http://localhost/TestingNamespace/MyPanel.js?_dc=1327006980149"

This is an attempt to dynamically load the file MyPanel. You're using ext-debug.js, which uses dynamic loading.

However, it's not entirely clear to me why this doesn't work. It may be a bug.

It is easily remedied if you switch from using ext-debug.js to ext-all-debug.js. You can switch back to using ext-debug.js once you're comfortable with dynamic loading and have files laid out accordingly.

mankz
20 Jan 2012, 12:16 AM
The following does not render ok:
===========================================================

Ext.ns('TestingNamespace');

Ext.require( 'Ext.container.Viewport' );

Ext.define('TestingNamespace.MyPanel',
{
extend: 'Ext.Panel',
alias: 'widget.panel-my',
requires:['Ext.Panel'],
});

Ext.define('TestingNamespace.MySubPanel',
{
extend: 'TestingNamespace.MyPanel',
alias: 'widget.panel-my-sub',
requires:['TestingNamespace.MyPanel'],
});

Ext.application(
{
name: 'TestingNamespace.TestingApplication',
launch: function()
{
Ext.create('Ext.container.Viewport',
{
id: 'viewport',

layout:
{
type: 'fit'
},

items:
[{
id: 'viewportInner',
region: 'center',
xtype: 'panel',
margins: '5',

layout:
{
type: 'fit'
},

items:
[{
id: 'panel',
xtype: 'panel-my',
bodyStyle: {'border-width': '1', 'background-color': 'lemonchiffon'}
}]
}]
})
}
});



-EricThe above renders fine for me, a lemon colored body is what I get. A few weird things about the code though.

No need to use 'requires' together with 'extend'. Ext knows it has to load the 'extend' class, so remove your 'requires'.

You use layout 'fit' and specify 'region', seems like copy paste garbage?

Eric.Sencha
6 Feb 2012, 10:56 AM
If I include :
TestingNamespace.MySubPanel


everything fails to render.

if i subtract:

TestingNamespace.MySubPanel

everything renders - i never see any error messages....

…totaly stymied