Sencha Ext JS 5.1 and Sencha Cmd

  1. Install Sencha Cmd and Ext JS 5.1
  2. Application architecture
  3. Controllers
  4. View models and data binding
  5. OOP concepts

Sencha resources...

  1. Sencha Ext JS v5
  2. Sencha Cmd v5


Install Sencha Cmd and Ext JS 5.1

  1. Read the Sencha FAQ

  2. Fill out license request

  3. Install Java Development Kit (JDK) v7 (1.7)

    Verify installation...

      $ cd c:/Program Files/Java/jdk1.7.0_60/bin
      $ ./java.exe -version
      java version "1.7.0_60"
      Java(TM) SE Runtime Environment (build 1.7.0_60-b19)
      Java HotSpot(TM) 64-Bit Server VM (build 24.60-b09, mixed mode)

    Verify PATH and JAVA_HOME variables have new JDK set. Go to...

      Start menu | Computer | System Properties | Advanced system settings | Advanced tab | Environment Variables | System Variables

    Make sure path to new JDK is at beginning of PATH statement.

  4. Download, unzip and execute Sencha Cmd installer:

      SenchaCmd-5.1.3.61-windows.exe

    For Installation directory:

      C:\Users\username\bin

    When asked, add the install directory path to your PATH environmental variable

  5. Download Ruby from rubyinstaller.org.

    Get the ".exe" file version of the Ruby software and install it.

  6. If you are using Cygwin, to set PATH...

      cd c:/users/mpareene/bin/Sencha/Cmd/5.1.3.61
      x=`pwd`
      PATH=$PATH:$x

  7. Download the Ext JS SDK and unzip into the document root of your IIS web server...

      c:/inetpub/wwwroot/

    A local copy can be found in SVN...

  8. Verify functionality by generating a sample application...

      $ cd c:/inetpub/wwwroot/ext-5.1.1
      $ mkdir workspace
      $ cd workspace
      $ sencha generate app MyApp MyApp
      Sencha Cmd v5.1.3.61
      [INF] Processing Build Descriptor : default
      [INF] Loading app json manifest...
      [INF] Appending content to C:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/bootstrap.js
      [INF] Writing content to C:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/bootstrap.json

    You can explicitly reference the Ext JS framework directory for SDK...

      sencha -sdk c:/inetpub/wwwroot/ext-5.1.1 generate app MyApp MyApp

    The generated myApp directory will contain...

      .sencha/                        # Sencha-specific files (primarily configuration)
          app/                        # Application-specific content
              sencha.cfg              # Application configuration file for Sencha Cmd
              Boot.js                 # Private, low-level dynamic loader for JS and CSS
              Microloader.js          # Loads app based on app.json content
              build-impl.xml          # Standard application build script
              *-impl.xml              # Implementations of various build phases
              defaults.properties     # Default values and docs for build properties
              ext.properties          # Build property values specific to Ext JS
              *.defaults.properties   # Build properties by environment (e.g. "testing")
              plugin.xml              # Application-level plugin for Sencha Cmd
              codegen.json            # Data for merging generated code during upgrade
          workspace/                  # Workspace-specific content (see below)
              sencha.cfg              # Workspace configuration file for Sencha Cmd
              plugin.xml              # Workspace-level plugin for Sencha Cmd
      
      ext/                            # A copy of the Ext JS SDK
          cmd/                        # Framework-specific content for Sencha Cmd
              sencha.cfg              # Framework configuration file for Sencha Cmd
          packages/                   # Framework supplied packages
              ext-theme-classic/      # Ext JS Theme Package for Classic
              ext-theme-neptune/      # Ext JS Theme Package for Neptune
              ...                     # Other theme and locale packages
          src/                        # The Ext JS source
          ...
      
      index.html                      # The entry point to your application
      app.json                        # Application manifest
      app.js                          # Launches the Application class
      app/                            # Your application's source code in MVC structure
          model/                      # Folder for application model classes
          store/                      # Folder for application stores
          view/                       # Folder for application view classes
              main/                   # Folder for the classes implementing the Main View
                  Main.js             # The Main View
                  MainModel.js        # The `Ext.app.ViewModel` for the Main View
                  MainController.js   # The `Ext.app.ViewController` for the Main View
          Application.js              # The `Ext.app.Application` class
      
      packages/                       # Sencha Cmd packages
      
      build/                          # The folder where build output is placed
      

  9. Build your sample app. From a "cmd" prompt...

      c:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp>sencha app build
      Sencha Cmd v5.1.3.61
      [INF] Processing Build Descriptor : default
      [INF] Loading app json manifest...
      [INF] Appending content to c:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/bootstrap.js
      [INF] Writing content to c:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/bootstrap.json
      [INF] Compressing data with YuiJavascriptCompressor
      [INF] merging 219 input resources into c:\inetpub\wwwroot\ext-5.1.1\build\production\MyApp\resources
      [INF] merged 0 resources into c:\inetpub\wwwroot\ext-5.1.1\build\production\MyAp p\resources
      [INF] merging 0 input resources into c:\inetpub\wwwroot\ext-5.1.1\build\production\MyApp
      [INF] merged 0 resources into c:\inetpub\wwwroot\ext-5.1.1\build\production\MyApp
      [INF] writing sass content to c:\inetpub\wwwroot\ext-5.1.1/build/temp/production/MyApp/sass/MyApp-all.scss.tmp
      [INF] appending sass content to c:\inetpub\wwwroot\ext-5.1.1/build/temp/production/MyApp/sass/MyApp-all.scss.tmp
      [INF] appending sass content to c:\inetpub\wwwroot\ext-5.1.1/build/temp/production/MyApp/sass/MyApp-all.scss.tmp
      [INF] writing sass content to c:\inetpub\wwwroot\ext-5.1.1/build/temp/production/MyApp/sass/config.rb
      [INF] executing compass using system installed ruby runtime create MyApp-all.css
      [INF] writing sass content to c:\inetpub\wwwroot\ext-5.1.1/build/temp/production/MyApp/slicer-temp/MyApp-example.scss.tmp
      [INF] writing sass content to c:\inetpub\wwwroot\ext-5.1.1/build/temp/production/MyApp/slicer-temp/config.rb
      [INF] executing compass using system installed ruby runtime create MyApp-example.css
      [INF] Writing content to c:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/sass/example/bootstrap.json
      [INF] Writing content to c:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/sass/example/bootstrap.js
      [INF] Capturing theme image
      [INF] Capture complete
      [INF] Slicing images...
      [INF] Slicing complete - generated 320 images
      [INF] Copying page resources to c:\inetpub\wwwroot\ext-5.1.1\build\production\MyApp
      [INF] Writing content to c:\inetpub\wwwroot\ext-5.1.1/build/production/MyApp/app.json
      [INF] Writing content to c:\inetpub\wwwroot\ext-5.1.1/build/production/MyApp/microloader.js
      [INF] Appending content to c:\inetpub\wwwroot\ext-5.1.1/build/production/MyApp/microloader.js
      [INF] Building output markup to c:\inetpub\wwwroot\ext-5.1.1/build/production/MyApp/index.html
      [INF] Writing content to c:\inetpub\wwwroot\ext-5.1.1/build/production/MyApp/index.html
      

  10. Start the Sencha web server using the app we just created...

      $ sencha app watch
      Sencha Cmd v5.1.3.61
      [INF] Processing Build Descriptor : default
      [INF] Loading app json manifest...
      [INF] Appending content to C:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/bootstrap.js
      [INF] Writing content to C:\inetpub\wwwroot\ext-5.1.1\workspace\MyApp/bootstrap.json
      [INF] merging 219 input resources into C:\inetpub\wwwroot\ext-5.1.1\build\development\MyApp\resources
      [INF] merged 219 resources into C:\inetpub\wwwroot\ext-5.1.1\build\development\MyApp\resources
      [INF] merging 0 input resources into C:\inetpub\wwwroot\ext-5.1.1\build\development\MyApp
      [INF] merged 0 resources into C:\inetpub\wwwroot\ext-5.1.1\build\development\MyApp
      [INF] writing sass content to C:\inetpub\wwwroot\ext-5.1.1/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
      [INF] appending sass content to C:\inetpub\wwwroot\ext-5.1.1/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
      [INF] appending sass content to C:\inetpub\wwwroot\ext-5.1.1/build/temp/development/MyApp/sass/MyApp-all.scss.tmp
      [INF] writing sass content to C:\inetpub\wwwroot\ext-5.1.1/build/temp/development/MyApp/sass/config.rb
      [INF] executing compass using system installed ruby runtime
         create MyApp-all.css
      [INF] Mapping http://localhost:1841/ to C:\inetpub\wwwroot\ext-5.1.1...
      [INF] ------------------------------------------------------------------
      [INF] Starting web server at : http://localhost:1841
      [INF] ------------------------------------------------------------------
      [INF] Waiting for changes...
      

  11. Open a web browser and go to Sencha web server...

  12. Pull up the app you just built...

    By default, only text in title tags is rendered. Add some text to body of index.html to render information in browser window.

  13. Enable Developer Tools in Chrome, Firebug for Firefox. Install Fiddler

  14. Watch some videos


See also

  1. docs.sencha.com
  2. Top 10 Ext JS Development Practices to Avoid


Home