1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    56
    Vote Rating
    2
    korax is on a distinguished road

      1  

    Default Using the SDK tools

    Using the SDK tools


    After a couple of unsuccessful starts using the SDK, I managed to pinpoint the issues I was having. Most of my issues had to do with appropriate use of Ext.Loader.require() and the class config option "uses" in my classes. I found that when these were utilized correctly, the SDK was easy to use.

    I apologize for the long post, but I thought this might help beginners with the sencha command, like me, with getting started quickly.
    1. Write your application using the recommended architecture outlined in the Getting Started Guide. For best practices, the directory structure you use should reflect that shown in the guide under section 2.1, "Basic Structure".

    2. The entry point index file (typically "index.html" in the root directory of your app) will contain one script tag to load the ExtJS framework file, and one to load the file containing your application logic. Before building with the SDK, your entry point index file "index.html" might look like this:

      Code:
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>My App</title>
          <style type="text/css">
            @import url('extjs/resources/css/ext-all-gray.css');
          </style>
      
          <script src="extjs/ext-debug.js" type="text/javascript"></script>
          <script src="app.js" type="text/javascript"></script>
        </head>
      
        <body>
        </body>
      </html>
      It's very important to use the correct ExtJS framework file before you build your minified application. You can use ext-all-debug.js while writing your application and class files and testing your app, but before building, you must use ext-debug.js, or the relevant framework class files will not be included when you create your jsb3 file.

      Your application logic file "app.js" will typically consist of calls to the loader, calls to Ext.require(), and a call to Ext.application() to create an instance of Ext.app.Application. The application instance will load all the required class files for the models, stores, views, and controllers you've written.

      The logic file might look like this.

      Code:
      // Set up loader
      Ext.Loader.setConfig({ enabled: true });
      Ext.Loader.setPath('MyApp', 'app');
      
      // Required source files
      Ext.Loader.require('MyApp.view.Viewport');
      
      Ext.application({
        name: 'MyApp',
        controllers: [...],
      
        launch: function() {
          // Code to execute after launch
        }
      });
      One issue I found was that it was not possible to subclass Ext.app.Application and create it using Ext.create() inside a call to Ext.onReady(). The SDK did not include any of the relevant classes needed during the build when this was the case. Use Ext.application() in your logic file to initiate your app.

      In order to correctly load files required by your application, you may need to use Ext.require(). In my case, a call to Ext.Loader.setPath() was needed to tell the loader how to parse the namespaces used by my classes before the call to Ext.application(). In this way, I was able to load, for example, MyApp.view.Viewport, ensuring its class file's inclusion in the build.

      I also found that in my viewport's class definition, I had to utlize the "uses" config option to include ExtJS's border layout class:

      Code:
      uses: ['Ext.layout.container.Border']
      If this was not done, the relevant ExtJS class file was not loaded, and the SDK build would not include it. The result was that ExtJS attempted to load the class file separately on running the app, which will not work in the production environment. I similarly had to "uses" other ExtJS classes in my other class definitions, such as "Ext.form.field.Radio".

    3. In the directory for your app, run the "sencha create jsb" command according to the examples given in the documentation. For example:

      Code:
      sencha create jsb -a index.html -p app.jsb3
      where index.html is your app entry file, and app.jsb3 is the jsb3 file to output. If your directory structure deviates from the recommended one, the SDK seems to assume that your application is "built on top of a dynamic server-side language" according to the docs, whether or not that's actually the case. You will then need to prepend index.html with its URL path:

      Code:
      sencha create jsb -a http://localhost/app/index.html -p app.jsb3
      Your jsb3 is now created. It includes the directory paths and file names for all the ExtJS and custom classes your app uses. You may need to globally edit the paths, especially if you did not prepend your entry point index.html file with its URL. In my tests, the SDK did not seem to handle directory paths with spaces well, and seemed to add too many ".." directory traversals.

    4. Once the jsb3 file is created, run the "sencha build" command:

      Code:
      sencha build -p app.jsb3 -d .
      This will build all-classes.js, which contains all framework and custom classes needed to run your app, and app-all.js, which will build your production-ready minified JavaScript file. You are then ready to use it in production. Replace the script tags in your app's index entry file with the following:

      Code:
      <script src="extjs/ext.js" type="text/javascript"></script>
      <script src="app-all.js" type="text/javascript"></script>
      Note that the framework file you need to use in production is ext.js.

    The result is a much smaller payload than you would have using ext-all.js with a minified file containing just your classes. However, in my version of app-all.js, there were included classes that were not used by my application, such as Ext.layout.component.ProgressBar. Unless this class is used by the layout in a way that isn't obvious, it seems the resulting app-all.js is not as efficient as it could be. However, it is still more efficient than using ext-all.js.

  2. #2
    Sencha User
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
    neonshark is on a distinguished road

      0  

    Default


    Great, thank you for your job!

    Next time I will try to overcome SDK Tools from Sencha, I will try to do it with your solution!

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    Italy
    Posts
    80
    Vote Rating
    0
    spillo491 is on a distinguished road

      0  

    Default


    Sorry Korax, I have a problem with building. Please, are my require statements correct ?

    http://www.sencha.com/forum/showthre...-watch-my-code

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    6
    Vote Rating
    0
    mhuber@clickmotive.com is on a distinguished road

      0  

    Default


    +1, this post should be stickied. It covers all of the basic problems I've run into in the last few days messing with the sdk tools. Great post, thanks.

  5. #5
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    134
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default


    Despite the forum posts, (weak) documentation, and my own trial and error, I am still having issues with this.

    My MVC app works fine in development. I have built the empty jsb3 file and filled in the files part to include everything. When I deploy and run it, it complains about missing stores/models/views. Coincidentally, every one of those stores/models/views are in the FIRST listed controller in my app.js Ext.Application controllers: [] section.

    So that tells me that this controller is loading, but all the inner classes (stores/models/views) are not being found.

    I figured when you ran "sencha create jsb" that it would start at your index.html and drill in to all the dependent files and build a jsb3 file that includes everything needed to build. Perhaps that's what it SHOULD be doing, but all I get is the skeleton jsb3 file, which is not useful.

  6. #6
    Sencha User
    Join Date
    Sep 2009
    Posts
    14
    Vote Rating
    0
    marogalli is on a distinguished road

      0  

    Default


    Thanks you for the post! It shoul be included in the documentation !

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    131
    Vote Rating
    -2
    YomeKitsuma has a little shameless behaviour in the past

      0  

    Default Great !

    Great !


    Thanks for this post !

    I've never, and will never, figure out how to WELL BUILD A PROD package !

    But, one thing we have to notice there :

    Why Sencha Dev team does not give a REAL and functional documentation and "How To" to do this ?

    I'am a "supported user" (not with that pseudo/user), we, at my office, buy the 40 tickets for support, and do we have to use one of those tickets to have this kind of "procedure" ?

    So, to the Sencha Team : You have produced a real real good framework (not perfect, but really awesome), why the documentation is so weak, poor, not well explained ?
    I think it is time for you to push into the good direction that's missing : Documentation !

    This will put you on the top of JS framework, which is the "future" of dev on the web !

    Thanks


    ps : all works really fine using the "uses" config !

    pps : Now i'am getting a 720ko all-in-one JS file (app-all.js) where i've got, before, a 50ko file plus 3,3MB loading dependencies ;-)

  8. #8
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    The whole "uses" versus "requires" is a pain! requires feels more natural, but uses is way more important.

  9. #9
    Sencha User
    Join Date
    Jul 2009
    Posts
    8
    Vote Rating
    0
    anwarmalik is on a distinguished road

      0  

    Default I am Unable to build the jsb3 file.

    I am Unable to build the jsb3 file.


    I have created the jsb3 file but, sencha build command is not generating app-all.js file... can you help me

    here is the jsb3 file

    Code:
    {    "projectName": "Project Name",
        "licenseText": "Copyright(c) 2011 Company Name",
        "builds": [
            {
                "name": "All Classes",
                "target": "all-classes.js",
                "options": {
                    "debug": true
                },
                "files": []
            },
            {
                "name": "Application - Production",
                "target": "app-all.js",
                "compress": true,
                "files": [
                    {
                        "path": "",
                        "name": "all-classes.js"
                    },
                    {
                        "path": "",
                        "name": "app.js"
                    }
                ]
            }
        ],
        "resources": []
    }

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi