"build production" compiles fine, but app tries to load classes dynamically still?

[hallikpapa]

So I have an app that works fine in dev mode, dynamically loading. All of the files I created, ~140 of them, are in a requires array somewhere in the app, so there are no warnings about lazy loading.

When I ran sencha app build production, it completed fine and created an all-classes file. When I load the generated html file in the production folder in my browser, it throws about 7 404 errors. It appears it is still trying to lazy load my classes. Here is an example:

http://dev.localsite/js/desktop/build/FH/production/FH/view/MyTabPanel.js?_dc=1360625855681 404 (Not Found)

When I do a search in the all-classes.js file, my FH.view.MyTabPanel file is defined and included in there. The same for the other 5 classes it tries to dynamically load and throws a 404 error on. What am I doing wrong when building or in setup?

I basically did this:

ran "sencha -sdk <path to 4.1.1> generate app FH ."
removed the current app folder
put the app folder I had already built in the same location as the default generated one
ran "sencha app build production" //No errors or warnings here
loaded http://dev.localsite/js/desktop/buil...ion/index.html in browser
got 404 errors

Not sure if the docs are out of date, or something incorrect is happening, but I see references to an app.json file in the docs, but that isn't being generated on my end. Did a search for that file name as soon as did generate app.


Using Sencha Cmd v3.0.0.250

[hallikpapa]

Updated my build.xml file via helpful user on stackoverflow. It works now, but getting different errors. That may be a setup thing I am going to investigate further separately.

Ext.application({
    .....

    uses: [
        /*ant-generated-content-start*/ /*ant-generated-content-end*/
    ],
    .....
    }

build.xml

<target name="-before-build">

        <echo message="Collecting all views in application class property ... "/>
        <fileset id="app_views" dir="${app.dir}/app/view" casesensitive="yes">
            <include name="**/*.js"/>
        </fileset>
        <pathconvert pathsep="," property="app_view_names" refid="app_views" targetos="unix">
            <chainedmapper>
                <globmapper from="${app.dir}/app/*" to="${ant.project.name}/*" casesensitive="no" handledirsep="yes"/>
                <chainedmapper>
                    <regexpmapper from="^(.*)\.js$$" to='"\1"'/>
                    <filtermapper>
                        <replacestring from="/" to="."/>
                        <replacestring from="\" to="."/>
                    </filtermapper>
                </chainedmapper>
            </chainedmapper>
        </pathconvert>
        <echo message="Collected views: ${app_view_names}"/>

        <echo message="Injecting into app.js ..."/>
        <replaceregexp file="${app.dir}/app/app.js"
                       match="/\*ant-generated-content-start\*/(.*)/\*ant-generated-content-end\*/"
                       replace="/*ant-generated-content-start*/ ${app_view_names}  /*ant-generated-content-end*/"
                       byline="true"
                />
    </target>

    <target name="-after-build">
        <echo message="Reverting to original app.js ..."/>
        <replaceregexp file="${app.dir}/app/app.js"
                       match="/\*ant-generated-content-start\*/(.*)/\*ant-generated-content-end\*/"
                       replace="/*ant-generated-content-start*/ /*ant-generated-content-end*/"
                       byline="true"
                />
    </target>

[mitchellsimoens]

That would mean you haven't required all the classes that you need to. The ones that are trying to be loaded, you need to require in your app classes.

[hallikpapa]

The ones that were receiving 404 errors were required in parent classes that used them. But I did not have a long requires list of views in app.js. That would become a maintenance nightmare.

I double checked though. Each file that was throwing a 404, I:

1) Looked at it's parent view it was being included in. The parent view had that class in its requires array
2) I checked the final compiled all-classes.js file, and yes, those classes were in there defined properly.

The above build.xml was the only way I could get it to work, but I am satisfied with it.



One thing I am trying to figure out though, is after all the compiling & compression of the all-classes.js is done, can I tell the build.xml to move the all-classes.js to another folder and rename it?

[tguless]

It would be good to get an response to why this might be happening from the Sencha team.

[cmeans]

I had a similar issue w/4.1.3 & Sencha Cmd 3.0.2.288, but I was able to track it down to the store I was creating for a Tree.

The solution for me was to add a requires array to that store definition and explicitly list my model (even though I already had the model property set, and listed it in my apps models array).

-Chris

[tguless]

From:
http://docs.sencha.com/extjs/4.1.3/#...and_app_single
Compiling Your Page

The first job of the compiler is to examine and parse the JavaScript source code and analyze its dependencies. These dependencies are expressed in code using Ext.define and the requires (or uses) directives. Also, base classes and mixins are considered to be dependencies in the same way as requires.
The application requires its own code (in the "js" folder) as well as some of the framework (in the "ext" folder). The goal is to create a single JavaScript file that contains all of the code needed from both folders and exclude any code that is not used.
Since most build processes create the production build in a separate folder, let's use the "build" folder to hold the outputs and thereby avoid overwriting any source code.


And from:
http://docs.sencha.com/extjs/4.1.3/#...code-section-4

The compiler understands the "keywords" of this declarative language:
· requires
· uses
· extend
· mixins
· statics
· alias
· `singleton
· override
· alternateClassName
· xtype

In either case, there is no mention of the compiler parsing “controllers”, “models”, or “stores” properties to determine dependency hierarchy.

So yes, apparently you have to supply with Ext.requires before creating your Ext.Application, and adding the "requires" property into your classes wherever necessary.

Our big problem is this documented feature not working:

From:
http://docs.sencha.com/extjs/4.1.3/#!/guide/command

Errors While Resolving Dependencies
The sencha app build command works by reading your index.html and scanning for required classes. If your application does not properly declare the classes it requires, the build usually completes but will not contain all the classes needed by your application.
To ensure that you have all required classes specified, always develop with the debugger console enabled ("Developer Tools" in IE/Chrome, FireBug in FireFox and Web Inspector in Safari) and resolve all warnings and error messages as they appear.
Whenever you see a warning like this:
[Ext.Loader] Synchronously loading 'Ext.foo.Bar'; consider adding 'Ext.foo.Bar' explicitly as a require of the corresponding class
Immediately add 'Ext.foo.Bar' inside the requires array property of the class from which the dependency originates. If it is a application-wide dependency, add it to the requires array property inside Ext.application(...) statement.

We were not getting "Synchronously loading 'Ext.foo.Bar'; consider adding 'Ext.foo.Bar' explicitly as a require of the corresponding class" messages, so finding out that our model class needed the following requires:

requires: [
'Ext.data.proxy.Rest',
'Ext.data.proxy.Memory',
'Ext.data.reader.Json',
'Ext.data.writer.Json'
],

Took setting a breakpoint at our failed class definition in all-classes.js (Ext.define line), and then stepping through the Ext.Classmanager.isCreated code.

This is a major bug with 4.1.3 that makes using Sencha CMD Compile nearly impossible - not sure if it has been addressed with later releases.

I should also mention that before we knew which Ext.define to set our breakpoint, we had to:

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

So that it would generate an error like:

Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: xxxx all-classes.js:1 Executing script on home page.

[mono blaine]

You might try this if including all the classes in your app's namespace is not a problem:

Ext.application({

    // ...


    requires: [
        "FH.view.*"
    ]


    // ...

});