Results 1 to 3 of 3

Thread: Sencha Touch How to build for Prodcution Version ? & How to use production Version ?

  1. #1

    Default Sencha Touch How to build for Prodcution Version ? & How to use production Version ?

    Hi ,
    i tried to use "sencha app build production" from my app folder. production version is created in "workspace/build/production/appFolder".

    But i don't know how to use the production version.

    Is any configuration need to change like :
    • change appFolder path
    • How to use globel files to load before Ext.onReady in app.js
    • need to change build.properties file
    build.options.production=-debug\=true
    build.options.testing=
    build.resources.dir=${build.dir}/resources
    • we need to create all-classes.js file for production ? If yes, how to create that file ?
    thanks in advance

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    When you run the "sencha app build" command, it will create the production build meaning it will concat and minify your JavaScript and will compile the SASS into CSS. That means, everything in the workspace/build/production/appFolder will be able to run, that directory is what you deploy to your server. There isn't anything else needed.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    thanks mitchell, i used a file called commonFun.js and gridFun.js both js files are common files to all controllers. If i created production build and run in browser, i'm getting error. because in app.js .

    Just assume like that :

    commonFun.js

    Code:
    function deviceDetails()
    {
        var device = [];
        
        device['Type'] = Ext.os.deviceType;
        device['Name'] = Ext.os.name;
        device['Version'] = Ext.os.version;
        
        return device;
    } 
    
    function pageUrl ()
    {
           return window.location.protocol+"//"+window.location.hostname+"/";
    }
    
    function getPath ()
    {
            ........
            ........
    }
    .......
    .......
    In app.js :

    Code:
    Ext.onReady(function()
    {
             var path = getPath();
             var arrSplit = path.split( '/' );
             var len = arrSplit.length - 1;
             ........
             ........
             var formName = 'login';
    
             Ext.Ajax.request({
                    method : 'POST',
                    url : pageUrl () + 'mycontroller/index/login',
                    loadMask : 'please wait...',
                    success : function(response) 
                   {
                             if (isJson(response.responseText))
                             {
                                        result = Ext.decode(response.responseText);
    
                                        .........
                                        .........
    
                                        Ext.Loader.setConfig({ disableCaching: false });
    
                                        Ext.application({
                                                name : 'myapp',
    
                                                requires: [
                                                       'Ext.MessageBox',
                                                       'Ext.Ajax',
                                                       'Ext.device.Camera',
                                                       'Ext.device.Device'],
    
                                               controllers : ['myapp.controller.auth'],
    
                                               views : ['myapp.view.formLogin'],
    
                                               isIconPrecomposed: true,
    
                                               appFolder : pageUrl() + 'js/touchworkspace/build/production/myapp/app',
    
                                               launch: function()
                                               {
                                                        this.getController('login');
    
                                                        Ext.Viewport.add(
                                                                 Ext.create('Ext.Container', {
                                                                        fullscreen : true,
                                                                        layout : 'vbox',
                                                                        items : [{ xtype : 'formlogin', flex : 1 }]
                                                                 })
                                                         );
                                                 }
                                       });
                              }
                              else
                              {
                                         sessionexpired();
                               }
                     }
           })
    });
    In app.json :

    Code:
    .........
    .........
    
    "builds": {
              "web": {"default": true},
              "native": {
                     "packager": "cordova",
                     "cordova" : {
                     "config": {
                            // Uncomment the line below and add the platforms you wish to build for
                           "platforms": "android",
                           "id": "com.mycompany.myapp",
                           "name": "myapp"
                     }
               } 
          }
    },
    
    ........
    ........
    
    "js": [
    {
               "path": "cordova.js",
               "remote": true
    },
    {
                "path": "../common/src/commonfun.js"
    },
    {
                 "path": "../common/src/gridfun.js"
    },
    {
                 "path": "../touch/sencha-touch-all.js",
                 "x-bootstrap": true
    },
    {
                  "path": "bootstrap.js",
                  "x-bootstrap": true
    },
    {
                   "path": "app.js",
                   "bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
                   "update": "delta"
    }
    ],
    
    .........
    .........
    
    "css": [
    {
                "path": "resources/css/touch.css"
    },
    {
                "path": "resources/css/app.css",
                "update": "delta"
    }
    ],
    
    ........
    ........
    
    "resources": [
                "config.xml",
                "resources/images",
                "resources/icons",
                "resources/startup"
    ],
    
    ..........
    ..........

    and i didn't any extra codes in index.html file.


    my project is server based applicaiton. So when app.js file running it will call few methods in common files. So after i build for production when i run in mobile browsers that function getting undefined error. Could you help out this ?

    My App structure like :
    Code:
        + touchworkspace 
                   + build
                           + production
                                       + myapp
                                                - app.js
                                                - app.json
                                                - index.html
                                                - cache.apache
                                                + common
                                                            - commonFun.js 
                                                            - gridFun.js
                                                + resources
                                                             - css
                                                + achive
                   + common
                                 - commonFun.js
                                 - gridFun.js
                   + myapp
                              + app
                              - app.js
                              - app.json
                              - index.html
                              + resources

    thanks in advance

Similar Threads

  1. [FIXED] Warning when build a ST app production version
    By davide.peri in forum Sencha Cmd
    Replies: 2
    Last Post: 28 Jan 2015, 3:58 PM
  2. Sencha Build: Production version causes error, Testing version works fine
    By parky128 in forum Sencha Touch 2.x: Discussion
    Replies: 10
    Last Post: 18 Feb 2013, 3:33 AM
  3. Sencha Build: Production version causes errors
    By sim4life in forum Sencha Touch 2.x: Discussion
    Replies: 5
    Last Post: 14 Jun 2012, 4:17 AM
  4. How to know JS dependency and build a custom version of Sencha Touch
    By hello2008 in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 7 Nov 2010, 9:28 PM

Tags for this Thread

Posting Permissions

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