PDA

View Full Version : Compiled application all-classes.js is empty



plum
31 Oct 2012, 2:48 AM
Hi,

I have problem with compilation my application. I improved my app files that have no more errors in compilation time but result file: all-classes.js have only comment:



//@tag page-C:\wamp\www\cbi_extjs\index.html


Used:
Sencha Cmd:


Sencha Cmd v3.0.0.230

C:\wamp\www\cbi_extjs>sencha compile -classpath=app.js,app,ext/src,ext/ux,ext/top page -in=index.html -out=build/index.html
Sencha Cmd v3.0.0.230
[INFO ] Compiling page null
[INFO ] Processing classPath entry : C:\wamp\www\cbi_extjs\sencha-compile-temp-dir
[INFO ] Processing classPath entry : app.js
[INFO ] Processing classPath entry : app
[INFO ] Processing classPath entry : ext\src
[INFO ] Processing classPath entry : ext\ux
[INFO ] Processing classPath entry : ext\top
[INFO ] Processing class inheritance graph
[INFO ] Processing instantiation refereces to classes and aliases
[INFO ] Processing source dependencies
[INFO ] Concatenating output to file C:\wamp\www\cbi_extjs\build\all-classes.js


Sencha Extjs version:


Extjs 4.1.1a


What more infromation can I provide to detect problem?

dongryphon
31 Oct 2012, 2:41 PM
What command(s) are you running to do the build and what does your html file contain? Did you create an x-compile and x-bootstrap section? See these guides for some pointers on that:

http://docs.sencha.com/ext-js/4-1/#!/guide/command_app

http://docs.sencha.com/ext-js/4-1/#!/guide/command_app_single

mysticav
5 Nov 2012, 1:33 AM
Hi Plum,

How did you resolve your problem ?

plum
5 Nov 2012, 2:28 AM
Hi,

Sorry, I have short free days in work.
After reading documentation. I added "compilation" sencha cmd lines that now my index.html file look like:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CBI application</title>


<link rel="stylesheet" type="text/css" href="styles/loader.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="styles/style.css"/>


<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<!-- </x-bootstrap> -->

<script type="text/javascript" src="app.js"></script>
<!-- </x-compile> -->
</head>
<body>
<div id="loading-mask">
<div id="loading">
<span>Loading application ...</span>
</div>
</div>
</body>
</html>


Now is generating my all-classes.js but it is not generated properly.
I think this is related to the structure of my application.

Log from Chrome console:


Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/cbi_extjs_build/proxy/rest.js?_dc=1352111011486
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/cbi_extjs_build/Cbi/model/PomiarModel.js?_dc=1352111011509
...


Where e.g. PomiarModel.js file is in
./app/model/PomiarModel.js

App.js file:


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


Ext.JSON.encodeDate = function(o){
return o.dateFormat("Y-m-d H:i:s.u");
};


Ext.Loader.setPath('Ext.app', 'app/view/portal/classes');
Ext.Loader.setPath('Ext.ux', 'ext/ux');
Ext.Loader.setPath('Top', 'ext/top');


Ext.Loader.loadScript('ext/top/top.overrides.js');
Ext.Loader.loadScript('ext/top/top.grid.extension.js');
Ext.Loader.loadScript('ext/top/top.methods.js');
Ext.Loader.loadScript('ext/ext-lang-pl.js');


Ext.application({
requires: [
'Top.window.Notification'
],


views: [
'MyViewport',
'LoginWindow'
],
controllers: [
'MainController',
'AgentController',
'AlertController',
'ParametrController'
],
autoCreateViewport: false,
name: 'Cbi',


launch: function() {
var loaderMask = Ext.get("loading-mask");


loaderMask.fadeOut({
opacity: 0,
easing: 'easeOut',
duration: 500,
remove: true
});


var loader = Ext.get("loading");
loader.fadeOut({
opacity: 0,
easing: 'easeOut',
duration: 1500,
remove: true
});
Cbi.app = this;


Ext.Ajax.on('requestexception', this.exceptionHandlerMethod);
Ext.Ajax.on('beforerequest', this.beforeRequestHandler);


Ext.create('Cbi.view.Viewport');
},
// Error request handling from web service
exceptionHandlerMethod: function(connection, response, requestOptions, listenerOptions) {
if (response.status == 404) {
Ext.create('Top.window.NotificationError', { html: response.statusText }).show();
}
if (response.status == 500) {
Ext.create('Top.window.NotificationError', { html: response.statusText }).show();
}
if (response.status == 503) {
Ext.create('Top.window.NotificationError', { html: response.statusText }).show();
}
},
// Before every request set Basic Auth
beforeRequestHandler: function(connection, options, eOpts) {
// Avoid changing headers options if was set by developer
if (!options.headers) {
options.headers = {
'Content-Type' : 'application/json',
'Accept' : 'application/json'
}
}
}
});

dongryphon
5 Nov 2012, 11:22 AM
@plum -

This line:





Ext.Loader.setPath('Ext.app', 'app/view/portal/classes');



is probably not so good... it is redirecting a framework namespace (Ext.app) that will break MVC. If you are not using MVC, this *may* not break anything for you.

The loadScript calls should probably be added to index.html:



<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<!-- </x-bootstrap> -->

<script src='ext/top/top.overrides.js' type='text/javascript'></script>
<script src='ext/top/top.grid.extension.js' type='text/javascript'></script>
<script src='ext/top/top.methods.js' type='text/javascript'></script>
<script src='ext/ext-lang-pl.js' type='text/javascript'></script>

<script type="text/javascript" src="app.js"></script>
<!-- </x-compile> -->


These will then be included in your compiled all-classes.js ahead of app.js. Obviously they will also be loaded after ext-all.js in dev mode as well.

Looking at those paths, however, I am concerned that you may be adding files to the Ext JS framework tree... this is not a safe way to go as framework upgrades can be very problematic as a result. I would highly recommend keeping the Ext JS framework folder unchanged as much as possible and organize your application code outside that folder tree. Perhaps looking at how Sencha Cmd would organize your code may help (even if you cannot reorganize your app, it is a helpful example).

Hopefully this will help get you over some issues you may be having.

plum
5 Nov 2012, 11:48 AM
Thanks for reply. I guessed that Ext.Loader will cause problems for Sencha Cmd. I will make project from scratch using Sencha cmd commands and then I will try to remake my project to apply this rules.

mysticav
5 Nov 2012, 4:23 PM
Guys,

Do you think is better to rely on the bootstrap.js generated by Cmd rather than Ext.Loader ?

As far as I know, using the bootstrap.js, you don't need the Ext.Loader enabled anymore.
Is that right ?

Let me know the right direction.

dongryphon
5 Nov 2012, 7:19 PM
As far as I know, using the bootstrap.js, you don't need the Ext.Loader enabled anymore.
Is that right ?

Let me know the right direction.

This post has a helpful comment on that: http://www.sencha.com/forum/showthread.php?246340-SenchaCmd-3.0.0.190-issues-with-Ext.Loader&p=907948&viewfull=1#post907948

The role of bootstrap is to provide the Loader with path information, similar to Ext.Loader.setPath. What can cause issues with Cmd is making direct calls to Loader to load scripts. This is not something that Cmd can safely remove for you so it does not do so. If you are using this simply to deal with dependencies, then using "requires" and "uses" statements in your class declaration is much better from the perspective of builds.