Results 1 to 7 of 7

Thread: Using the build tool I get: Uncaught ReferenceError: Ext is not defined

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: Using the build tool I get: Uncaught ReferenceError: Ext is not defined

    Hi guys, I am currently trying to create a production build for my app.
    Doing my best to follow the steps in http://docs.sencha.com/touch/2-0/#!/guide/building
    (If i do follow it exactly, it breaks on the "sencha build" step because the app.js path in my generated app.jsb3 file is incorrect)
    First I go to the root directory of my app (where index.html is found) and run:

    Code:
    sencha create jsb -a http://localhost/touchcatalog/ -p app.jsb3
    Once the app.jsb3 file is created I have to edit the path entry for my app.js file:
    from:
    Code:
     {            "name": "Application - Production",
                "target": "app-all.js",
                "compress": true,
                "files": [
                    {
                        "path": "",
                        "name": "all-classes.js"
                    },
                    {
                        "path": "",
                        "name": "app.js"
                    }
                ]
            }
    to:
    Code:
     {            "name": "Application - Production",
                "target": "app-all.js",
                "compress": true,
                "files": [
                    {
                        "path": "",
                        "name": "all-classes.js"
                    },
                    {
                        "path": "app/",
                        "name": "app.js"
                    }
                ]
            }
    then I run:

    Code:
     sencha build -p app.jsb3 -d ./
    Here is my production index.html:
    Code:
    <!DOCTYPE html><html>
    <head>
        <title>Catalog</title>
        <link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
        <style>
            .productlistitem img{
                height: 60px;
            }
            .productpageitem img{
                height: 150px;
            }
            .productpagedetail img{
                height: 250px;
            }
            .animation_frame { width:100%; height:100%; }
            }
        </style>
        
        <script type="text/javascript" src="app-all.js"></script>
    </head>
    <body></body>
    </html>
    here is my app.js:

    Code:
    (function() {
    
      Ext.Loader.setConfig({
        enabled: true
      });
    
    
      Ext.Loader.setPath('Myapp', 'app');
    
    
      Ext.require(['Myapp.store.CategoriesStore', 'Ext.data.proxy.JsonP', 'Ext.TitleBar', 'Myapp.view.catalog.ProductPager', 'Myapp.store.ProductsStore', 'Myapp.Config', 'Myapp.view.ViewPort', 'Myapp.view.flyer.FlyerPager', 'Ext.field.Password', 'Myapp.store.VideoStore', 'Myapp.view.videos.VideoDetail', 'Ext.Video']);
    
    
      Ext.application({
        name: 'Myapp',
        controllers: ['Myapp.controller.MainController', 'Myapp.controller.catalog.MainCatalogController', 'Myapp.controller.catalog.ProductCatalogController'],
        models: ['CategoryModel', 'ProductModel'],
        stores: ['CategoriesStore', 'ProductsStore', 'Myapp.store.VideoStore'],
        views: ['ViewPort', 'Myapp.view.catalog.CategoryNestedList', 'Myapp.view.catalog.ProductView', 'Myapp.view.catalog.ProductViewToggle', 'Myapp.view.catalog.ProductList', 'Myapp.view.catalog.ProductPage', 'Myapp.view.catalog.ProductPanel', 'LoginForm', 'AuthenticationIndicator', 'Myapp.view.catalog.CatalogView', 'Myapp.view.flyer.FlyerPager', 'Myapp.view.videos.VideoDetail'],
        launch: function() {
          Ext.create('Myapp.view.ViewPort');
          return this.fireEvent('applaunch');
        }
      });
    
    
    }).call(this);
    When I hit it in my browser I get "Uncaught ReferenceError: Ext is not defined"
    Not sure how to get this working, any suggestions?

  2. You still need to reference sencha-touch.js

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    You still need to reference sencha-touch.js
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
      0  

    Default

    oh yeah... im using beta3 ,version 2 of the sdk tools, and sencha-touch-debug.js inside my development index.html file

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
      0  

    Default

    With sencha-touch.js included, I get this error:
    Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically.

  6. #5
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    That means not all your files made it into the build.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
      0  

    Default

    ahh! that makes sense. thx, i will go through my jsb3 file and try to figure it out.
    Any idea why the sencha create command would have missed something? Is there something I can do on my end to ensure that it doesn't?
    (Im going to start by re-organizing my dependencies.... try to move them out of app.js and get my "requires" in the files where they actually need to go)

  8. #7
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    You have to be very careful that you put all your classes in the requires or views or controllers config arrays. If you want to know what classes aren't being included you can use sencha-touch-debug.js which has Loader enabled and you can watch the network tab to see what classes are still being loaded and also use the app-all.js file not your app.js.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •