1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

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

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


    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:

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    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.


    Code:
    Ext.application({
        .....
    
        uses: [
            /*ant-generated-content-start*/ /*ant-generated-content-end*/
        ],
        .....
        }

    build.xml


    Code:
    <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>

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    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?

  5. #5
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    4
    Vote Rating
    1
    tguless is on a distinguished road

      0  

    Default Having the same issue...

    Having the same issue...


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

  6. #6
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    112
    Vote Rating
    7
    cmeans is on a distinguished road

      0  

    Default


    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

  7. #7
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    4
    Vote Rating
    1
    tguless is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    mono blaine will become famous soon enough

      0  

    Default


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

    Code:
    Ext.application({
    
        // ...
    
    
        requires: [
            "FH.view.*"
        ]
    
    
        // ...
    
    });