Генеруємо додаток:
Подивимось як можна розширити наш додаток. Подивимось допомогу до sencha generate:
Генеруємо контролер:
sencha build шукає файли додатку орієнтуючись на зміст опції classpath у файлі app.json:
За матеріалами http://docs.sencha.com/cmd/5.x/touch/cmd_app.html
Переходимо у додаток: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
Збираємо додаток:Стартуемо Sencha Web Server для перевірки зібраного додатку: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
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 Architect.sencha generate view -base Ext.tab.Panel osbb.Thing
Генеруємо контролер:
Властивості додатку можна подивитись у app.json, каталогу проекту. Також додаткові властивості можна знайти у файлах .sencha/app/*.properties. Конфігураційні опції можна подивитись у .sencha/app/sencha.cfg.olden@olden:~/public_html/web/app$ sencha generate controller Central Sencha Cmd v5.1.2.52
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
