Getting started with webapp-skel

0000aaaaa.rst

About

With minimal invasion I tried to get up and running with webapp-skel and found this problem:

The website generated for production tries to load ExtJS sources not from the static directory but from 3rdparty/ExtJS/src/app/Application.js (See the file ErrorinChromebrowser below).

The only thing I did was commenting in the app.js file (see index.diff) and adding a simple ExtJS to js/YourApp/app.js (see app.js).

If I add an Ext.require('Ext.Application') at the top of app.js I get this error during make production:

... 0.009 secs: loadAssets resolvers.extJS4Dir: Skipping Application.js (not found) 1.739 secs: populate ...

I would be glad if somebody can help me figure out how I can make my Application work with webapp-skel and how to maybe include my own custom JS files in e.g. app.js.

Thank you in advance! Konrad

EDIT:

I found this place in http-pub/index.html.template:

/* Set loader to false when switching to production build */ Ext.Loader.setConfig({ enabled: true, paths: { Ext: '3rdparty/ExtJS/src' } });

When I set enabled to false and leave my app.js untouched, I get this error in Chrome:

Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.app.Application f208c8ba4b.js:1 Object f208c8ba4b.js:1console.trace() Ext.apply.logf208c8ba4b.js:1 Ext.Error.Ext.extend.statics.raisef208c8ba4b.js:1 Loader.Ext.Loader.requiref208c8ba4b.js:1 (anonymous function)f208c8ba4b.js:1 Ext.applicationf208c8ba4b.js:1 (anonymous function)f208c8ba4b.js:1 f208c8ba4b.js:1Uncaught Ext.Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.app.Application

So how do I get ExtJS classes loaded-in dynamically or how can the dependency to this class be resolved?

app.js

Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: {
                html: 'My App'
            }
        });
    }
});

directorylayout

kleine@mrburns:~/dev/webapp-skel$ find http-pub | grep -v http-pub/3rdparty/ExtJS/
http-pub
http-pub/index.html.template
http-pub/index.html
http-pub/3rdparty
http-pub/3rdparty/ExtJS
http-pub/index.html.template.orig
http-pub/js
http-pub/js/YourApp
http-pub/js/YourApp/app.js

ErrorinChromebrowser

In Chrome I get this error, when navigating to http://localhost/~kleine/webapp-skel/http-pub-production/index.en_US.html

Failed to load resource: the server responded with a status of 404 (Not Found)
efe5acb4b0.js:1Failed loading '3rdparty/ExtJS/src/app/Application.js', please verify that the file exists
efe5acb4b0.js:1
Object
efe5acb4b0.js:1console.trace()
Ext.apply.logefe5acb4b0.js:1
Ext.Error.Ext.extend.statics.raiseefe5acb4b0.js:1
Loader.Ext.Loader.onFileLoadErrorefe5acb4b0.js:1
(anonymous function)efe5acb4b0.js:1
Loader.Ext.Loader.loadScriptFile.lefe5acb4b0.js:1
Loader.Ext.Loader.injectScriptElement.hefe5acb4b0.js:1
efe5acb4b0.js:1Uncaught Ext.Error: Failed loading '3rdparty/ExtJS/src/app/Application.js', please verify that the file exists

index.diff

diff --git a/http-pub/index.html.template b/http-pub/index.html.template
index 1a3a6ec..4618477 100644
--- a/http-pub/index.html.template
+++ b/http-pub/index.html.template
@@ -30,6 +30,6 @@
             Ext.BLANK_IMAGE_URL = one.getStaticUrl('3rdparty/ExtJS/resources/themes/images/access/tree/s.gif');
         </script>
       
-        <!--<script src="js/YourApp/app.js"></script>-->
+        <script src="js/YourApp/app.js"></script>
     </body>
 </html>

makefileoutput

kleine@mrburns:~/dev/webapp-skel$ make production
rm -fr http-pub-production
buildProduction \
		--cssimports \
		--root http-pub \
		--outroot http-pub-production \
		--locale en_US \
		--label Ext:extJs4Dir=http-pub/3rdparty/ExtJS/src --label extsdk=http-pub/3rdparty/ExtJS/build/sdk.jsb3 \
		http-pub/index.html
0.009 secs: registerLabelsAsCustomProtocols
0.008 secs: loadAssets
1.938 secs: populate
0.000 secs: stripDevelopmentModeFromOneBootstrapper
0.003 secs: removeRelations
0.000 secs: inlineJavaScriptGetOneText
0.003 secs: convertCssImportsToHtmlStyles
0.001 secs: removeAssets
0.002 secs: externalizeRelations
0.007 secs: mergeIdenticalAssets
0.003 secs: spriteBackgroundImages
0.000 secs: postProcessBackgroundImages
0.073 secs: bundleAssets
0.011 secs: bundleAssets
0.694 secs: compressJavaScript
0.034 secs: cloneForEachLocale
0.001 secs: runJavaScriptConditionalBlocks
0.000 secs: removeAssets
0.001 secs: minifyAssets
0.301 secs: inlineRelations
0.035 secs: moveAssets
0.036 secs: moveAssetsToDirectory
0.487 secs: renameAssetsToMd5Prefix
0.107 secs: writeAssetsToDisc
0.107 secs: parallel
       Gif 249 349.1 KB   
       Png  10   7.5 KB   
       Css   1 186.2 KB   
JavaScript   1 154.3 KB   
      Html   1   246 bytes
    Total: 262 697.4 KB   
0.001 secs: stats