一、介绍
Extjs是一个功能非常强大的前端框架, 是浏览器里的桌面级UI库(类似WinformSwing)。作为曾经的企业级开发主流框架, 和目前流行的三大框架(React/Angular/Vue)不同的是, Extjs提供了一整套完整而强大的组件, 开发者可以只使用JavaScript, 也能够迅速的开发出强大美观的软件界面
优点：
1.开箱即用
2.节省时间，产品可以尽快上市
3.几乎不用考虑美工css，只需js功底
4.mvc、mvvm设计模式，面向对象编程思想
5.丰富且简洁的官方文档，各种idea的插件支持
6.非全开源，给钱可以维护（上海和北京有办事处）
缺点：
1.学习难度太大 ，培训时间过长
2.自定义样式比较难做
3.部分优秀的组件、功能收费
4.框架复杂度高，源码难看懂，遇到问题一卡就是好几天
5.不适合小型项目
6.国内使用人数太少，网上资料太少
7.版本更新太快
找工作的不建议入坑ext，没人要，HR不认识，不知道你说啥
二、安装
官网提供了三种生成Ext项目的方法：
1.npm方法
这种方法需要先去官网注册，获取npm为期30天的仓储使用权限
按照表单提示填写邮箱信息，过一会sencha会发送邮件到你的邮箱
以及下载方式和npm的登录用户名和密码
生成ext项目
Step 1: 登录到邮件回复提供的npm仓储
Use your trial or existing npm credentials to log into the npm repository with the @sencha scope.
npm login --registry=https://npm.sencha.com --scope=@sencha
Note: Your email is used for a username where the @ character switched to '..' two periods, for example [email protected] converts to name..gmail.com.
Step 2: 使用npm安装全局的ext-gen 命令
Install the Ext JS app generator CLI command tool ext-gen which will be used to generate the application.
npm install -g @sencha/ext-gen
Step 3: 生成
Generate the Ext JS application using the interactive walkthrough. Use ext-gen app -a to skip the interactive walkthrough.
ext-gen app -i
CLI Walkthrough
是否查看默认的package.json? (y/N)
If you select `yes`, ext-gen shows all defaults for package.json
Would you like to create a package.json file with defaults? (Y/n)
This creates a package.json with the defaults
What would you like to name your Ext JS app? (MyApp)
Type name of your app
What type of Ext JS template do you want? (Use arrow keys)
❯ make a selection from a list
type a folder name
What Ext JS template would you like to use?
classicdesktop
classicdesktoplogin
moderndesktop
moderndesktopminimal
universalclassicmodern
❯ universalmodern
Would you like to generate the Ext JS npm project with above config now? (Y/n)
Last question, will output the results.
Step 4: 使用npm运行新的项目
Start up the newly created application in the default browser with these commands.
cd ./npm start
Step 5: 编码你的项目
生成的项目使用webpack-dev-server. 你的代码变更会直接重新渲染浏览器
- Modify your source code.
- Then check the browser, it will auto reload and update with the new changes.
2.CMD方式
首先在sencha 官方下载最新的cmd （CMD7.0地址 ）
注：如果使用7.0以下的CMD是无法生成ext7.0以上的项目的
安装完成cmd 以后执行sencha 命令查看sencha 版本
>sencha
F:\sencha\demo\MobilDemo>sencha
Sencha Cmd v7.0.0.40
Sencha Cmd provides several categories of commands and some global switches. In
most cases, the first step is to generate an application based on a Sencha SDK
such as Ext JS or Sencha Touch:
sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp
Sencha Cmd supports Ext JS 4.1.1a and higher and Sencha Touch 2.1 and higher.
To get help on commands use the help command:
sencha help generate app
For more information on using Sencha Cmd, consult the guides found here:
http://docs.sencha.com/cmd/
在终端中执行>sencha help generate app 会有如下两条提示
F:\sencha\demo\MobilDemo>sencha help generate app
Sencha Cmd v7.0.0.40
sencha generate app
This command generates an empty application given a name and target folder.
The application can be extended using other sencha generate commands (e.g.,
sencha generate model).
Other application actions are provided in the sencha app category (e.g.,
sencha app build).
Sencha Cmd can also automatically download and extract a framework by
specifying the name of the framework as an argument:
sencha generate app -ext MyAppName ./MyAppPath
This will generate an application using the newest version available
for the specified framework.
For Ext JS 6, by default, this application will be a Universal Application.
To override this and select a particular toolkit, you can use either of
these variations:
sencha generate app -ext -classic MyAppName ./MyAppPath
sencha generate app -ext -modern MyAppName ./MyAppPath
Options
* --controller-name, -c - The name of the default Controller
* --library, -l - the pre-built library to use (core or all). Default: core
* --name, -n - The name of the application to generate
* --path, -p - The path for the generated application
* --refresh, -r - Set to false to skip the "app refresh" of the generated app
* --starter, -s - Overrides the default Starter App template directory
按照终端提示执行sencha generate app -ext -classic MyAppName ./MyAppPath创建桌面版的app
按照终端提示执行sencha generate app -ext -modern MyAppName ./MyAppPath创建手机端的app
debug 工程
sencha app watch //启动sencha 内置的jetty server ，观察代码变化并且重新渲染，此过程或build项目
build工程
cd <你的项目路径>
sencha app build //build的时候可以加debug参数查看详细的构建日志
三、first blood（Helloword）
因为ext的趋势是在往移动端发展，所以我创建一个移动端的项目
目录结构如下
.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
classic/ # Packages related to the Classic Toolkit
classic/ # Ext JS Classic Toolkit package
theme-neptune/ # Classic Toolkit Theme Package for Neptune
theme-triton/ # Classic Toolkit Theme Package for Triton
...
modern/ # Packages related to the Modern Toolkit
modern/ # Ext JS Modern Toolkit package
theme-neptune/ # Modern Toolkit Theme Package for Neptune
theme-triton/ # Modern Toolkit Theme Package for Triton
...
packages/ # Framework supplied packages
charts/ # Charts package
ux/ # Contents of "Ext.ux" namespace
...
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
workspace.json # Workspace JSON descriptor
build/ # The folder where build output is placed
执行sencha app watch