Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: How to include external JS libs/files

  1. #1

    Default How to include external JS libs/files

    I would like to include other libraries, such as Underscore.js -

    What is the recommended way that I can do this so it consistently works with 'sencha web start' and 'sencha app build'?

    It seems I have two options:

    1. I can follow the steps like the following: from stackoverflow
    (add the path under the js with 'skipFrameworkFile':true, and then include
    //@require resources/js/util/underscore_1.5.2.js in my app.js file)

    This includes the file and allows for production minification, but doesn't work with 'sencha web start' or any local web server

    2. Or 2, I can add leave the simple { "path":"..." } items without the skipFrameworkFile and include <script src='...' /> tags

    This works in both, but doesn't allow for minification/combining.

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    I take it you have the underscore.js file as a local resource on your computer at the time of the build?

  3. #3

    Default

    Yes. I have it downloaded locally.

    I was hoping to avoid a mix up of two build processes (like sencha/brunch)

  4. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    If you have it as a resource on your local machine you should be able to link to it inside of the x-compile section (but outside of the x-bootstrap section) of your Cmd generated index.html page.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>SmallApp</title>
        <!-- <x-compile> -->
            <script src="../path/to/underscore.js"></script>
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="../ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body></body>
    </html>
    Any local scripts in the x-compile section will be minified into the output app.js file along with the Sencha framework and your application classes.

  5. #5

    Default

    Thanks for the reply.

    I think that I'm missing something, so I apologize - I don't see <x-compile> or <x-bootstrap> comments in the generated index file. Did you add those?

    This is the index file I'm seeing (cmd version: )

    Code:
    <!DOCTYPE HTML>
    <html manifest="" lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>timeLogger</title>
        <style type="text/css">
             /**
             * Example of an initial loading indicator.
             * It is recommended to keep this as minimal as possible to provide instant feedback
             * while other resources are still being loaded for the first time
             */
            html, body {
                height: 100%;
                background-color: #1985D0
            }
    
    
            #appLoadingIndicator {
                position: absolute;
                top: 50%;
                margin-top: -15px;
                text-align: center;
                width: 100%;
                height: 30px;
                -webkit-animation-name: appLoadingIndicator;
                -webkit-animation-duration: 0.5s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: linear;
            }
    
    
            #appLoadingIndicator > * {
                background-color: #FFFFFF;
                display: inline-block;
                height: 30px;
                -webkit-border-radius: 15px;
                margin: 0 5px;
                width: 30px;
                opacity: 0.8;
            }
    
    
            @-webkit-keyframes appLoadingIndicator{
                0% {
                    opacity: 0.8
                }
                50% {
                    opacity: 0
                }
                100% {
                    opacity: 0.8
                }
            }
        </style>
        <!-- The line below must be kept intact for Sencha Command to build your application -->
        <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
    </head>
    <body>
        <div id="appLoadingIndicator">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
    </html>

  6. #6
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    If you look at the index.html file created by the "sencha generate app" do you see something like:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>SmallApp</title>
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="../ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body></body>
    </html>

  7. #7

    Default

    Nope. The index generated was what I pasted above.

    I realized I didn't put the cmd version: Sencha Cmd v4.0.0.203
    (it seems to be the latest version from the website -
    http://www.sencha.com/products/sencha-cmd/download )

  8. #8
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Is what you posted from "sencha app build"? Or the dev file from "sencha generate app"?

  9. #9

    Default

    I see, that was the index from generate app. (I didn't think we'd want to make changes to the index generated since you'd need to do that each time it was generated, right?)

    To avoid a really long post, the index from 'sencha app build' is the following:
    http://d.pr/n/jSDj
    but I dont see either the words compile or bootstrap in there either.

  10. #10
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Yeah, you won't see it in the index.html file generated by sencha app build. You should only do the sencha generate app the one time so no worries about overwriting anything you put in the originally generated index.html file.

    But, to answer your question, in the index.html file generated by the sencha generate app page above/below the x-compile section is where you'd put any local resource you want linked in the production output, but not concatenated with the app.js build. Or, if you want it concatenated you'd put it inside the x-compile, but outside the x-bootstrap section.

Page 1 of 2 12 LastLast

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
  •