Hybrid View

  1. #1
    Sencha User daubman's Avatar
    Join Date
    Jul 2010
    Location
    Massachusetts
    Posts
    34
    Answers
    1
    Vote Rating
    2
    daubman is on a distinguished road

      0  

    Question Answered: Proper way to bundle an Ext JS 4 App?

    Answered: Proper way to bundle an Ext JS 4 App?


    I saw the recently announced SenchaSDKTools-2.0.0-Beta. All of the documentation for it so far is very iOS App Store specific. If I just want to bundle the ext classes for my _web_ (not iOS) app, should I be using the SenchaSDKTools-2.0.0-Beta or the older SDK Tools?
    Last edited by daubman; 10 Nov 2011 at 1:36 PM. Reason: clarified that I am targeting web and not iOS

  2. All,

    Please note that you DO NOT have to hand-craft the require statements in order to create the jsb3 file with the SDK. I'm not sure what changed, but the SDK finally started working for me WITHOUT specifying any require statements (fully using the dynamic loading).

    Here is my designer.html:
    Code:
    <!DOCTYPE html><!-- Auto Generated with Ext Designer -->
    <!-- Modifications to this file will be overwritten. -->
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LaunchEventWindow.xds</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="designer.js"></script>
    </head>
    <body></body>
    </html>
    Here is my designer.js:
    Code:
    /*
     * File: designer.js
     * Date: Mon Nov 21 2011 12:54:22 GMT-0500 (EST)
     *
     * This file was generated by Ext Designer version 1.2.2.
     * http://www.sencha.com/products/designer/
     *
     * This file will be auto-generated each and everytime you export.
     *
     * Do NOT hand edit this file.
     */
    
    Ext.Loader.setConfig({
        enabled: true
    });
    
    Ext.application({
        name: 'LaunchEventWindow',
    
        stores: [
            'lewStore'
        ],
    
        launch: function() {
            Ext.QuickTips.init();
    
            var cmp1 = Ext.create('LaunchEventWindow.view.MyViewport', {
                renderTo: Ext.getBody()
            });
            cmp1.show();
        }
    });
    Here is the output from 'sencha create jsb':
    Code:
    % sencha create jsb -a http://127.0.0.1:8080/LaunchEventWindow/designer-local.html -p lew.jsb3
    % cat lew.jsb3 
    {
        "projectName": "Project Name",
        "licenseText": "Copyright(c) 2011 Company Name",
        "builds": [
            {
                "name": "All Classes",
                "target": "all-classes.js",
                "options": {
                    "debug": true
                },
                "files": [
                    {
                        "path": "extjs/src/data/",
                        "name": "Association.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "IdGenerator.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Observable.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "validations.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "HashMap.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Filter.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Connection.js"
                    },
                    {
                        "path": "extjs/src/data/writer/",
                        "name": "Writer.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "ResultSet.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Memento.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Sorter.js"
                    },
                    {
                        "path": "extjs/src/fx/",
                        "name": "CubicBezier.js"
                    },
                    {
                        "path": "extjs/src/panel/",
                        "name": "Proxy.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "Template.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Operation.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "KeyMap.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "ZIndexManager.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "ComponentQuery.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "KeyNav.js"
                    },
                    {
                        "path": "extjs/src/fx/target/",
                        "name": "Target.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Floating.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "Color.js"
                    },
                    {
                        "path": "extjs/src/dd/",
                        "name": "StatusProxy.js"
                    },
                    {
                        "path": "extjs/src/layout/",
                        "name": "Layout.js"
                    },
                    {
                        "path": "extjs/src/layout/container/boxOverflow/",
                        "name": "None.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Offset.js"
                    },
                    {
                        "path": "extjs/src/fx/",
                        "name": "Queue.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "AbstractContainer.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "SortTypes.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "TextMetrics.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "ClickRepeater.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Animate.js"
                    },
                    {
                        "path": "extjs/src/state/",
                        "name": "Provider.js"
                    },
                    {
                        "path": "extjs/src/app/",
                        "name": "EventBus.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "AbstractManager.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "ModelManager.js"
                    },
                    {
                        "path": "extjs/src/app/",
                        "name": "Controller.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "AbstractMixedCollection.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "ComponentManager.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Types.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Field.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "Ajax.js"
                    },
                    {
                        "path": "extjs/src/data/writer/",
                        "name": "Json.js"
                    },
                    {
                        "path": "extjs/src/data/reader/",
                        "name": "Reader.js"
                    },
                    {
                        "path": "extjs/src/data/reader/",
                        "name": "Json.js"
                    },
                    {
                        "path": "extjs/src/data/proxy/",
                        "name": "Proxy.js"
                    },
                    {
                        "path": "extjs/src/data/proxy/",
                        "name": "Server.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Sortable.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "MixedCollection.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "StoreManager.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Errors.js"
                    },
                    {
                        "path": "extjs/src/data/proxy/",
                        "name": "Ajax.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Model.js"
                    },
                    {
                        "path": "extjs/src/fx/",
                        "name": "Easing.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "XTemplate.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "FocusManager.js"
                    },
                    {
                        "path": "extjs/src/fx/target/",
                        "name": "Sprite.js"
                    },
                    {
                        "path": "extjs/src/fx/target/",
                        "name": "Element.js"
                    },
                    {
                        "path": "extjs/src/fx/target/",
                        "name": "CompositeElement.js"
                    },
                    {
                        "path": "extjs/src/fx/target/",
                        "name": "CompositeSprite.js"
                    },
                    {
                        "path": "extjs/src/fx/target/",
                        "name": "Component.js"
                    },
                    {
                        "path": "extjs/src/fx/",
                        "name": "Manager.js"
                    },
                    {
                        "path": "extjs/src/fx/",
                        "name": "Animator.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "Draw.js"
                    },
                    {
                        "path": "extjs/src/fx/",
                        "name": "PropertyHandler.js"
                    },
                    {
                        "path": "extjs/src/fx/",
                        "name": "Anim.js"
                    },
                    {
                        "path": "extjs/src/layout/component/",
                        "name": "Component.js"
                    },
                    {
                        "path": "extjs/src/layout/component/",
                        "name": "AbstractDock.js"
                    },
                    {
                        "path": "extjs/src/layout/component/",
                        "name": "Dock.js"
                    },
                    {
                        "path": "extjs/src/layout/component/",
                        "name": "Tip.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Region.js"
                    },
                    {
                        "path": "extjs/src/dd/",
                        "name": "DragDropManager.js"
                    },
                    {
                        "path": "extjs/src/layout/container/boxOverflow/",
                        "name": "Scroller.js"
                    },
                    {
                        "path": "extjs/src/dd/",
                        "name": "DragDrop.js"
                    },
                    {
                        "path": "extjs/src/dd/",
                        "name": "DD.js"
                    },
                    {
                        "path": "extjs/src/dd/",
                        "name": "DDProxy.js"
                    },
                    {
                        "path": "extjs/src/dd/",
                        "name": "DragSource.js"
                    },
                    {
                        "path": "extjs/src/panel/",
                        "name": "DD.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "Container.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "Auto.js"
                    },
                    {
                        "path": "extjs/src/menu/",
                        "name": "Manager.js"
                    },
                    {
                        "path": "extjs/src/layout/component/",
                        "name": "Button.js"
                    },
                    {
                        "path": "extjs/src/state/",
                        "name": "Manager.js"
                    },
                    {
                        "path": "extjs/src/state/",
                        "name": "Stateful.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "AbstractComponent.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "Component.js"
                    },
                    {
                        "path": "extjs/src/container/",
                        "name": "AbstractContainer.js"
                    },
                    {
                        "path": "extjs/src/container/",
                        "name": "Container.js"
                    },
                    {
                        "path": "extjs/src/panel/",
                        "name": "Header.js"
                    },
                    {
                        "path": "extjs/src/toolbar/",
                        "name": "Fill.js"
                    },
                    {
                        "path": "extjs/src/button/",
                        "name": "Button.js"
                    },
                    {
                        "path": "extjs/src/toolbar/",
                        "name": "Item.js"
                    },
                    {
                        "path": "extjs/src/toolbar/",
                        "name": "Separator.js"
                    },
                    {
                        "path": "extjs/src/layout/container/boxOverflow/",
                        "name": "Menu.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "Box.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "VBox.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "HBox.js"
                    },
                    {
                        "path": "extjs/src/toolbar/",
                        "name": "Toolbar.js"
                    },
                    {
                        "path": "extjs/src/panel/",
                        "name": "AbstractPanel.js"
                    },
                    {
                        "path": "extjs/src/panel/",
                        "name": "Panel.js"
                    },
                    {
                        "path": "extjs/src/tip/",
                        "name": "Tip.js"
                    },
                    {
                        "path": "extjs/src/tip/",
                        "name": "ToolTip.js"
                    },
                    {
                        "path": "extjs/src/tip/",
                        "name": "QuickTip.js"
                    },
                    {
                        "path": "extjs/src/tip/",
                        "name": "QuickTipManager.js"
                    },
                    {
                        "path": "extjs/src/app/",
                        "name": "Application.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Batch.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Point.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "PluginManager.js"
                    },
                    {
                        "path": "extjs/src/layout/component/",
                        "name": "Auto.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Request.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "LoadMask.js"
                    },
                    {
                        "path": "extjs/src/resizer/",
                        "name": "Resizer.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "CSS.js"
                    },
                    {
                        "path": "extjs/src/menu/",
                        "name": "Item.js"
                    },
                    {
                        "path": "extjs/src/menu/",
                        "name": "CheckItem.js"
                    },
                    {
                        "path": "extjs/src/menu/",
                        "name": "KeyNav.js"
                    },
                    {
                        "path": "extjs/src/menu/",
                        "name": "Separator.js"
                    },
                    {
                        "path": "extjs/src/dd/",
                        "name": "DragTracker.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "ElementLoader.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "AbstractFit.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "CompositeSprite.js"
                    },
                    {
                        "path": "extjs/src/layout/component/",
                        "name": "Draw.js"
                    },
                    {
                        "path": "extjs/src/panel/",
                        "name": "Tool.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "Layer.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "Grouper.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "AbstractStore.js"
                    },
                    {
                        "path": "extjs/src/util/",
                        "name": "ComponentDragger.js"
                    },
                    {
                        "path": "extjs/src/window/",
                        "name": "Window.js"
                    },
                    {
                        "path": "extjs/src/layout/container/",
                        "name": "Fit.js"
                    },
                    {
                        "path": "extjs/src/menu/",
                        "name": "Menu.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "ComponentLoader.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "Surface.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "Component.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "Store.js"
                    },
                    {
                        "path": "extjs/src/data/",
                        "name": "ArrayStore.js"
                    },
                    {
                        "path": "extjs/src/resizer/",
                        "name": "ResizeTracker.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "Matrix.js"
                    },
                    {
                        "path": "extjs/src/data/proxy/",
                        "name": "Client.js"
                    },
                    {
                        "path": "extjs/src/data/reader/",
                        "name": "Array.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "SpriteDD.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "ShadowPool.js"
                    },
                    {
                        "path": "extjs/src/data/proxy/",
                        "name": "Memory.js"
                    },
                    {
                        "path": "extjs/src/draw/",
                        "name": "Sprite.js"
                    },
                    {
                        "path": "extjs/src/draw/engine/",
                        "name": "Vml.js"
                    },
                    {
                        "path": "extjs/src/draw/engine/",
                        "name": "Svg.js"
                    },
                    {
                        "path": "extjs/src/",
                        "name": "Shadow.js"
                    },
                    {
                        "path": "app/store/",
                        "name": "lewStore.js"
                    }
                ]
            },
            {
                "name": "Application - Production",
                "target": "app-all.js",
                "compress": true,
                "files": [
                    {
                        "path": "",
                        "name": "all-classes.js"
                    },
                    {
                        "path": "",
                        "name": "app.js"
                    }
                ]
            }
        ],
        "resources": []
    }
    I'm still a little confused as to why it didn't include the MyViewport.js files from view/ or view/ui/, but this is a lot of progress.

    Just wanted to provide some working examples of code that plays nicely with the SDK tools. Hope this helps somebody else.

    Thanks all!
    Aaron

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    The SDK tools are still able to build your app
    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. #3
    Sencha User daubman's Avatar
    Join Date
    Jul 2010
    Location
    Massachusetts
    Posts
    34
    Answers
    1
    Vote Rating
    2
    daubman is on a distinguished road

      0  

    Question Is there some configuration that needs to be done, then - it does not work for me?

    Is there some configuration that needs to be done, then - it does not work for me?


    Here's what I get when running on OS 10.7.2 (64-bit Java is default - is that a problem? are there any docs on how to USE the SDK tools correctly?):

    Code:
    % sencha create jsb -a http://127.0.0.1:8080/LaunchEventWindow/designer.html -p lew.jsb3% cat lew.jsb3 
    {
        "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": []
    }
    This is pointing at the Designer 1.2.2-48 export. I tried with no modifications as well as attempting to replace ext-all-debug.js with ext.js and allowing dynamic loading - both resulted in the above empty/worthless jsb3 file.

    What am I doing wrong? Are the correct steps for running the SDK against a designer-created app documented anywhere? (I wanted to get this part at least to work before adding in custom code, assuming, apparently incorrectly, that the two Sencha tools would play better together.)

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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  
    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.

  6. #5
    Sencha User daubman's Avatar
    Join Date
    Jul 2010
    Location
    Massachusetts
    Posts
    34
    Answers
    1
    Vote Rating
    2
    daubman is on a distinguished road

      0  

    Question Link does not provide info to determine why sencha create jsb is not working

    Link does not provide info to determine why sencha create jsb is not working


    mitchellsimoens, the link you posted is what I've been using to determine how to use the SDK tools to attempt to generate the jsb3 file. Unfortunately, it does not address any of my questions (how to troubleshoot why 'sencha create jsb' is essentially generating an empty jsb for me, what a correct setup looks like).

    Moreover, that link really doesn't even provide the minimum information necessary to get started with the SDK tools.

    e.g. sections 2.2 and 2.3 (begin) to describe the different ways you could structure your index.html. Section 3 then does not say which way will work with the SDK tools, nor what config options must be included in your JS for the tools to work as designed.

    Having a full working example would be the first step. Describing what in that example is:
    1. Required for the tools to work
    2. Just best practice
    3. Optional, with description of alternates

    Would go so much further.

    This is the documentation I am looking for (or at least a pointer as to why I may be getting the empty/worthless .jsb3 file).

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    Guides are always going to be a work in progress and I do agree. The only think I can think of is did you use the requires/uses throughout your application 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.

Thread Participants: 2

Tags for this Thread