Results 1 to 10 of 69

Thread: Architect + Sencha Cmd

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User Phil.Strong's Avatar
    Join Date
    Mar 2007
    Olney, MD
    Vote Rating

    Post Architect + Sencha Cmd

    UPDATED: 9/17/13 - new
    Adding a note about using charts w/ packaged or simulated build

    UPDATED: 4/17/13
    Info added about removing extra app.js file that cmd creates for ext js projects
    Info added about using 'app build native' for packaging apps
    Styling for readability

    UPDATED: 3/1/13
    more info added

    Note: The goal of this sticky is to provide a list of steps for users to follow as a stopgap until the Cmd and Architect team can resolve them. The expectation is that the 'Configure Cmd to work with your Architect project' section should eventually disappear.

    All your hard work is paying off and your app is ready for production or to be put on it's first device. Great! You're ready to use Sencha Cmd utility to build and/or package your app for distribution. In this sticky, I explain the steps required to do this for Architect 2.1 projects:
    1. Download the appropriate SDK and Sencha Cmd software
    2. Initialize Cmd for your Architect applications
    3. Configure Cmd to work with your Architect Project
    4. Build your application
    5. Package your app for production (Touch only)
    If you're building a Touch 2.1 project, Architect 2.1 includes a wizard that guides you through step 1 and 2; see here for more information. Step 3 (Configure Cmd...) must still be done as described below.

    Download the SDK and Sencha Cmd software

    Architect projects by default reference their SDK from the cloud. Cmd however requires the appropriate SDK to be installed locally on your system. You can dowload the SDKs from the following locations:

    Touch 2.1.x SDK

    Ext JS 4.1.xa or 4.2+ SDK
    Links to the sdk are at the end of this article. The a at the end of the version number indicates that this version works with Sencha Cmd.

    Unzip the SDK(s) you downloaded into a place you can find later e.g. C:\sencha\libs

    Architect 2.1 only supports Cmd build 250. Download and unzip the appropriate version for your operating system:

    However if you're comfortable at the command line I encourage you to use that with the latest version of Cmd

    Initialize Cmd for your Architect applications

    To initialize Cmd to work for your Architect applications, you'll need to run the sencha generate command from the directory where the Ext JS or Touch SDK is installed:
    open a fresh command line interface (terminal, iterm, cmd.exe, etc ...)
    $ cd path/to/sdk (not project)

    For the next command you need to specify the name you gave your project in Architect. The default is MyApp. To find out what name you've given it select the Application node in the inspector and find the name config.
    $ sencha generate app <projectName> path/to/project

    Note that this does not actually generate a new project but instead finds your project and adds the metadata required by Cmd.

    Note to users of the SDK Tools v2 utilities:
    If you have used the SDK Tools v2 utilities on this project, issue the following cmd to upgrade to Sencha Cmd:
    $ cd path/to/project
    $ sencha app upgrade path/to/sdk

    Configure Cmd to work with your Architect project

    Some changes will need to be made for your Architect project to work with Cmd. Find the section that corresponds to the project type you're working with below and follow the steps in order.
    Ext JS Projects

    Update your sencha.cfg file
    By default, Cmd expects Ext JS projects to have their app.js file located in the app/ directory. Architect saves that file instead at the root of the project. The sencha.cfg file defines this location in the following line:
    # .sencha/app/sencha.cfg
    For Architect Ext JS projects, modify this line in the sencha.cfg file to look like the following:
    # .sencha/app/sencha.cfg  
    Remove extra files - new
    Cmd will create 2 files that can be a real headache if you don't remove them
    app/app.js <-- this file will throw Cmd for a loop so be sure to remove it
    app/view/Main.js <-- only remove this one if you didn't have your own Main.js view

    del app/app.js
    rm app/app.js
    Update your index.html file
    Update your index.html file to define the locations of the .css and .js files, similar to the definitions given in the app.html file created by Architect. Note that the declarations for the .js source files should be located between the x-compile tags:
        <meta charset="UTF-8">
        <link rel="stylesheet" href=".res/default/app.css">
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app.js"></script>
        <!-- </x-compile> -->
    Touch Projects

    Update your index.html file
    Update your index.html file to define the locations of the .css and .js files, similar to the definitions given in the app.html file created by Architect.

    Also be sure it includes the microloader line
    <!-- The line below must be kept intact for Sencha Command to build your application -->
     <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>

    Building your app for production

    Use the following command to build your app for production:
    $ sencha app build production

    Note that this is not the same as the Build button in the Architect Toolbar. For more information about building and compiling applications see:
    Ext JS:!...and_app_single

    Packaging your app for production (Touch only)

    To package your app for devices you'll want to carefully configure your packager.json file either using a text editor or using Architect and the Cmd Wizard. Once you've done so you can run:

    $ sencha app build native


    I have no idea what went wrong after a sencha command - new
    Try using the debug flag

    $ sencha -debug blah blah blah

    This will give you extra output to figure out what's going on

    Too much output? Redirect it to a log file

    $ sencha -debug blah blah blah > log.txt

    Cmd can't find my javascript files?
    if you change your appFolder you'll need to make that change as well in the classpath of the sencha.cfg file. As there will be no files in app/ they will be in <appFolder>/

    White screen while simulating or installing on device when using Charts
    You'll need to add Ext.Chart.* to your Applications requires config. Select the top most node in the inspector and located the requires config in the config pane. Add Ext.chart.*

    Extra file Main.js
    Cmd's generate command can sometimes create an extraneous Main view (app/view/Main file); you can just delete this file.

    Error while simulating
    You may see the following error when using the iOS Simulator:
    {NSLocalizedDescription=iOS Simulator failed to install the application., DTiPhoneSimulatorUnderlyingErrorCodeKey=-1}
    To fix this, while in the simulator click
    iOS Simulator > reset content settings...
    Try your simulate again.

    White screen after building Ext JS app
    For some reason if your initial view isn't a Viewport, autocreateviewport setting on Application isn't working on a build app.

    a fix: Add a viewport and drag your current initial view into it. Mark the viewport as your initial view. Re-build and voila! I think this is a bug but this is a clear workaround.
    Attached Images Attached Images
    Phil Strong

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