PDA

View Full Version : Problem sharing classes between files?



bryan10
7 Feb 2012, 12:37 AM
Hello,
I am having problems sharing classes between files.
I'm using ext js 4.0.7.


In the code below, is defined a Viewport with 3
panels. northpanel and southpanel are defined in
different files within Ext.onReady(function() {...,
but these are not being recognised - If I place the
definitions of northpanel and southpanel in the same file
as where they're referenced, the application works.


When I run the application, the following error
is obtained:
GET http://localhost:9003/southpanel.js?_dc=1328602754217
404 (Not Found)
and
Uncaught TypeError: Cannot call method 'substring' of
undefined (for the northpanel).


I have included southpanel.js and northpanel.js within index.html.
Have also tried Ext.require..., and setting the application name
/appFolder.


I think it's probably a simple question - would you please assist
me to resolve?




Thank you,
bryan





Ext.Loader.setConfig({enabled:true});


Ext.define('MyViewport', {
extend: 'Ext.container.Viewport',
height : 700,
layout: 'border',

initComponent: function() {


this.items = [{
xtype: 'northpan',
region: 'north',
height: 33,
layout: 'fit',
},
{ region: 'center',
xtype: 'panel',
split: true
},
Ext.create('southpanel',
{
region: 'south',
height: 60,
layout: 'fit',
})
]
this.callParent();
}

});


Ext.application({


launch: function() {


var v = new MyViewport();


v.show();
}
});




// northpanel.js -
Ext.onReady(function() {


Ext.define('northpanel', {
extend: 'Ext.panel.Panel',
width : 1365,
height : 33,
alias: 'widget.northpan',
items:
[{
html: 'north'
}]
});


});


// southpanel.js -
Ext.onReady(function() {


Ext.define('southpanel', {
extend: 'Ext.panel.Panel',
width : 1365,
height : 33,
alias: 'widget.southpan',
itemId: 'southpanel_id',
items:
[{
html: 'south'
}]
});

tvanzoelen
7 Feb 2012, 1:12 AM
Do not put class definitions in the onReady function. So take onReady out of southpanel and northpanel. js because they must be loaded first.

vietits
7 Feb 2012, 1:26 AM
Below is my suggestion:

app.js


Ext.Loader.setConfig({enabled:true});


Ext.define('MyViewport', {
extend: 'Ext.container.Viewport',
height : 700,
layout: 'border',
requires: ['northpanel', 'southpanel'],

initComponent: function() {
this.items = [{
xtype: 'northpan',
region: 'north',
height: 33,
layout: 'fit',
},{
region: 'center',
xtype: 'panel',
split: true
},{
xtype: 'southpan',
region: 'south',
height: 60,
layout: 'fit',
}]
this.callParent();
}
});

Ext.application({
launch: function() {
var v = new MyViewport();
v.show();
}
});


northpanel.js


Ext.define('northpanel', {
extend: 'Ext.panel.Panel',
width : 1365,
height : 33,
alias: 'widget.northpan',
items:[{
html: 'north'
}]
});

southpanel.js


Ext.define('southpanel', {
extend: 'Ext.panel.Panel',
width : 1365,
height : 33,
alias: 'widget.southpan',
itemId: 'southpanel_id',
items: [{
html: 'south'
}]
});

bryan10
7 Feb 2012, 2:28 AM
Hello,
Thank you for your reply.
I have tried exactly as specified in the reply - following occurs:


GET http://localhost:9003/northpanel.js?_dc=1328610129395 404 (Not Found)



GET http://localhost:9003/southpanel.js?_dc=1328610129395 404 (Not Found)

Might you know how to resolve?

Thank you
bryan

bryan10
7 Feb 2012, 2:32 AM
Thank you for your reply.
I have tried exactly as specified in the reply - following occurs:


GET http://localhost:9003/northpanel.js?_dc=1328610129395 404 (Not Found)
GET http://localhost:9003/southpanel.js?_dc=1328610129395 404 (Not Found)


Would you know how to resolve?

Thank you,
bryan

tvanzoelen
7 Feb 2012, 2:40 AM
You can skip the use of require I think and just load the files with a scripttag. Be sure that the src points the the location of the js files. And don not put defined classes in the onReady function.

And if you user require you could try to set the correct path in the Loader. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Loader

vietits
7 Feb 2012, 3:07 AM
If you skip requires and use script tag instead then you will loose the power of Ext. I have checked with the code I replied in my previous post and it worked well. I include here the source files that I have checked.

31436

bryan10
7 Feb 2012, 7:18 AM
Hello,
Thank you all for your replies - greatly appreciated!
I have managed to resolve this by removing requires and using script tag.
I am not sure why the 'vietits' example is not working - may be to do with
location of app.js?
When I tried the example, the app was not able to locate the north/south panels.

I'd be interested to know what was meant by:

If you skip requires and use script tag instead then you will loose the power of Ext.

Thank you,
bryan

Ex_Soft
7 Feb 2012, 7:45 AM
May be north/south panels aren't loaded yet?

vietits
7 Feb 2012, 5:01 PM
Hi Bryan,

1. How do I run the example:
a. Copy all files (index.html, app.js, northpanel.js, southpanel.js) from the Zip to the same directory on webserver. Suppose the directory used is 'test'.
b. On webserver, create an alias /ext points to ext directory
c. Open browser (I use Chrome)
d. Access the http://webserveraddress/test/index.html

That's it and everything work well.

2. 'requires' lists of classes that have to be loaded before instantiating the class you defined and this will be done automatically by Ext.Loader. It also reminds you what classes do you need for this class. If you remove this config and use SCRIPT tag instead then you have to remember many things and have to include your script files manually. This can be done when your application is small but when your application become larger it will become unable to manage. Also, when you do as what Sencha suggests, you can use Sencha SDK to pack all the need classes for your application in one script file easily.

Some thoughts to share with you.