Розборки з Sencha ExtJS 5. Використання Sencha Cmd з Ext JS 5.

Генеруємо додаток:

olden@olden:~/public_html/web$ sencha -sdk /home/olden/public_html/web/ext-5.1.0 generate app OSBB /home/olden/public_html/web/app 
Sencha Cmd v5.1.2.52
[INF] Processing Build Descriptor : default
[INF] Loading app json manifest...
[INF] Appending content to /home/olden/public_html/web/app/bootstrap.js
[INF] Writing content to /home/olden/public_html/web/app/bootstrap.json

Переходимо у додаток:

olden@olden:~/public_html/web$ cd app/
olden@olden:~/public_html/web/app$

На цей час маємо наступну структуру каталогів (розбираємо до третього рівня):

olden@olden:~/public_html/web/app$ tree -d -L 3 --noreport 
.
├── app
│   ├── model
│   ├── store
│   └── view
│       └── main
├── build
│   └── temp
│       └── development
├── ext
│   ├── build
│   ├── cmd
│   ├── licenses
│   ├── overrides
│   │   ├── app
│   │   ├── dom
│   │   ├── event
│   │   └── plugin
│   ├── packages
│   │   ├── ext-aria
│   │   ├── ext-charts
│   │   ├── ext-locale
│   │   ├── ext-theme-aria
│   │   ├── ext-theme-base
│   │   ├── ext-theme-classic
│   │   ├── ext-theme-classic-sandbox
│   │   ├── ext-theme-crisp
│   │   ├── ext-theme-crisp-touch
│   │   ├── ext-theme-gray
│   │   ├── ext-theme-neptune
│   │   ├── ext-theme-neptune-touch
│   │   ├── ext-theme-neutral
│   │   ├── ext-touch-sizing
│   │   ├── ext-ux
│   │   ├── sencha-amf
│   │   ├── sencha-charts
│   │   ├── sencha-core
│   │   └── sencha-soap
│   └── src
│       ├── app
│       ├── button
│       ├── container
│       ├── dashboard
│       ├── dd
│       ├── dom
│       ├── event
│       ├── flash
│       ├── form
│       ├── fx
│       ├── grid
│       ├── layout
│       ├── menu
│       ├── panel
│       ├── picker
│       ├── plugin
│       ├── resizer
│       ├── rtl
│       ├── selection
│       ├── slider
│       ├── sparkline
│       ├── state
│       ├── tab
│       ├── tip
│       ├── toolbar
│       ├── tree
│       ├── util
│       ├── ux
│       ├── view
│       └── window
├── overrides
├── packages
├── resources
└── sass
    ├── etc
    ├── example
    ├── src
    └── var

.sencha/                   # Sencha‐specific files (primarily configuration)
app/                       # Application‐specific content
  sencha.cfg               # Application configuration file for SenchaCmd
  Boot.js                  # Private, low‐level dynamic loader for JSand 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 ExtJS
  *.defaults.properties    # Build properties by environment (e.g."testing")
  plugin.xml               # Application‐level plugin for SenchaCmd
  codegen.json             # Data for merging generated code during upgrade
workspace/                 # Workspace‐specific content (see below)
  sencha.cfg               # Workspace configuration file for SenchaCmd
  plugin.xml               # Workspace‐level plugin for SenchaCmd
ext/                       # A copy of the ExtJS SDK
  cmd/                     # Framework‐specific content for SenchaCmd
    sencha.cfg             # Framework configuration file for SenchaCmd
  packages/                # Framework supplied packages
    ext‐theme‐classic/     # ExtJS Theme Package for Classic
    ext‐theme‐neptune/     # ExtJS Theme Package for Neptune
    ...                    # Other theme and locale packages
  src/                     # The ExtJS 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/                  # SenchaCmd packages

build/                     # The folder where build output is placed

Збираємо додаток:

olden@olden:~/public_html/web/app$ sencha app build
Sencha Cmd v5.1.2.52
[INF] Processing Build Descriptor : default
[INF] Using GPL Version of Ext JS version 5.1.0.107 from /home/olden/public_html/web/app/ext.
[INF] The implications of using GPL version can be found here (http://www.sencha.com/products/extjs/licensing).
[INF] Loading app json manifest...
[INF] Appending content to /home/olden/public_html/web/app/bootstrap.js
[INF] Writing content to /home/olden/public_html/web/app/bootstrap.json
[INF] Compressing data with YuiJavascriptCompressor
[INF] merging 219 input resources into /home/olden/public_html/web/app/build/production/OSBB/resources
[INF] merged 219 resources into /home/olden/public_html/web/app/build/production/OSBB/resources
[INF] merging 0 input resources into /home/olden/public_html/web/app/build/production/OSBB
[INF] merged 0 resources into /home/olden/public_html/web/app/build/production/OSBB
[INF] writing sass content to /home/olden/public_html/web/app/build/temp/production/OSBB/sass/OSBB-all.scss.tmp
[INF] appending sass content to /home/olden/public_html/web/app/build/temp/production/OSBB/sass/OSBB-all.scss.tmp
[INF] appending sass content to /home/olden/public_html/web/app/build/temp/production/OSBB/sass/OSBB-all.scss.tmp
[INF] writing sass content to /home/olden/public_html/web/app/build/temp/production/OSBB/sass/config.rb
[INF] executing compass using system installed ruby runtime
   create OSBB-all.css 
[INF] writing sass content to /home/olden/public_html/web/app/build/temp/production/OSBB/slicer-temp/OSBB-example.scss.tmp
[INF] writing sass content to /home/olden/public_html/web/app/build/temp/production/OSBB/slicer-temp/config.rb
[INF] executing compass using system installed ruby runtime
   create OSBB-example.css 
[INF] Writing content to /home/olden/public_html/web/app/sass/example/bootstrap.json
[INF] Writing content to /home/olden/public_html/web/app/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 /home/olden/public_html/web/app/build/production/OSBB
[INF] Writing content to /home/olden/public_html/web/app/build/production/OSBB/app.json
[INF] Writing content to /home/olden/public_html/web/app/build/production/OSBB/microloader.js
[INF] Appending content to /home/olden/public_html/web/app/build/production/OSBB/microloader.js
[INF] Building output markup to /home/olden/public_html/web/app/build/production/OSBB/index.html
[INF] Writing content to /home/olden/public_html/web/app/build/production/OSBB/index.html

Стартуемо Sencha Web Server для перевірки зібраного додатку:

olden@olden:~/public_html/web/app$ sencha web start
Sencha Cmd v5.1.2.52
[INF] Mapping http://localhost:1841/ to ....
[INF] ------------------------------------------------------------------
[INF] Starting web server at : http://localhost:1841
[INF] ------------------------------------------------------------------

Як бачимо, тепер додаток присутній за url http://localhost:1841

Подивимось як можна розширити наш додаток. Подивимось допомогу до sencha generate:

olden@olden:~/public_html/web/app$ sencha help generate
Sencha Cmd v5.1.2.52
sencha generate

This category contains code generators used to generate applications as well
as add new classes to the application.

Commands
  * app - Generates a starter application
  * controller - Generates a Controller for the current application
  * form - Generates a Form for the current application (Sencha Touch Specific)
  * model - Generates a Model for the current application
  * package - Generates a starter package
  * profile - Generates a Profile for the current application (Sencha Touch Specific)
  * theme - Generates a theme page for slice operations (Ext JS Specific)
  * view - Generates a View for the current application (Ext JS Specific)
  * workspace - Initializes a multi-app workspace

Генеруємо нову модель:

olden@olden:~/public_html/web/app$ sencha generate model User id:int,name,email
Sencha Cmd v5.1.2.52

Генеруємо бачення:

olden@olden:~/public_html/web/app$ sencha generate view osbb.Thing
Sencha Cmd v5.1.2.52

Також можна згенерувати бачення ґрунтуючись на іншому базовому класі:

sencha generate view -base Ext.tab.Panel osbb.Thing

але ця опція не підтримується при використанні Sencha Architect.

Генеруємо контролер:

olden@olden:~/public_html/web/app$ sencha generate controller Central
Sencha Cmd v5.1.2.52

Властивості додатку можна подивитись у app.json, каталогу проекту. Також додаткові властивості можна знайти у файлах .sencha/app/*.properties. Конфігураційні опції можна подивитись у .sencha/app/sencha.cfg.

sencha build шукає файли додатку орієнтуючись на зміст опції classpath у файлі app.json:

olden@olden:~/public_html/web/app$ grep -C5 classpath app.json 
     * Comma-separated string with the paths of directories or files to search. Any classes
     * declared in these locations will be available in your class "requires" or in calls
     * to "Ext.require". The "app.dir" variable below is expanded to the path where the
     * application resides (the same folder in which this file is located).
     */
    "classpath": "${app.dir}/app",

    "overrides": "${app.dir}/overrides",

    /**
     * The Sencha Framework for this application: "ext" or "touch".

За матеріалами http://docs.sencha.com/cmd/5.x/touch/cmd_app.html