一缝裤、介紹
Extjs是一個(gè)功能非常強(qiáng)大的前端框架, 是瀏覽器里的桌面級(jí)UI庫(kù)(類似WinformSwing)朴沿。作為曾經(jīng)的企業(yè)級(jí)開(kāi)發(fā)主流框架, 和目前流行的三大框架(React/Angular/Vue)不同的是, Extjs提供了一整套完整而強(qiáng)大的組件, 開(kāi)發(fā)者可以只使用JavaScript, 也能夠迅速的開(kāi)發(fā)出強(qiáng)大美觀的軟件界面
優(yōu)點(diǎn)：
1.開(kāi)箱即用
2.節(jié)省時(shí)間肤舞，產(chǎn)品可以盡快上市
3.幾乎不用考慮美工css熄守，只需js功底
4.mvc弊仪、mvvm設(shè)計(jì)模式跳芳，面向?qū)ο缶幊趟枷?br>
5.豐富且簡(jiǎn)潔的官方文檔膀钠，各種idea的插件支持
6.非全開(kāi)源掏湾，給錢可以維護(hù)（上海和北京有辦事處）
缺點(diǎn)：
1.學(xué)習(xí)難度太大 ，培訓(xùn)時(shí)間過(guò)長(zhǎng)
2.自定義樣式比較難做
3.部分優(yōu)秀的組件肿嘲、功能收費(fèi)
4.框架復(fù)雜度高融击，源碼難看懂，遇到問(wèn)題一卡就是好幾天
5.不適合小型項(xiàng)目
6.國(guó)內(nèi)使用人數(shù)太少雳窟，網(wǎng)上資料太少
7.版本更新太快
找工作的不建議入坑ext尊浪，沒(méi)人要，HR不認(rèn)識(shí)封救，不知道你說(shuō)啥
二拇涤、安裝
官網(wǎng)提供了三種生成Ext項(xiàng)目的方法：
1.npm方法
這種方法需要先去官網(wǎng)注冊(cè)，獲取npm為期30天的倉(cāng)儲(chǔ)使用權(quán)限
按照表單提示填寫郵箱信息誉结，過(guò)一會(huì)sencha會(huì)發(fā)送郵件到你的郵箱
以及下載方式和npm的登錄用戶名和密碼
生成ext項(xiàng)目
Step 1: 登錄到郵件回復(fù)提供的npm倉(cāng)儲(chǔ)
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 name@gmail.com 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
是否查看默認(rèn)的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運(yùn)行新的項(xiàng)目
Start up the newly created application in the default browser with these commands.
cd ./<your-app-name>npm start
Step 5: 編碼你的項(xiàng)目
生成的項(xiàng)目使用webpack-dev-server. 你的代碼變更會(huì)直接重新渲染瀏覽器
- 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是無(wú)法生成ext7.0以上的項(xiàng)目的
安裝完成cmd 以后執(zhí)行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/
在終端中執(zhí)行>sencha help generate app 會(huì)有如下兩條提示
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
按照終端提示執(zhí)行sencha generate app -ext -classic MyAppName ./MyAppPath創(chuàng)建桌面版的app
按照終端提示執(zhí)行sencha generate app -ext -modern MyAppName ./MyAppPath創(chuàng)建手機(jī)端的app
debug 工程
sencha app watch //啟動(dòng)sencha 內(nèi)置的jetty server 鹅士，觀察代碼變化并且重新渲染，此過(guò)程或build項(xiàng)目
build工程
cd <你的項(xiàng)目路徑>
sencha app build //build的時(shí)候可以加debug參數(shù)查看詳細(xì)的構(gòu)建日志
三惩坑、first blood（Helloword）
因?yàn)閑xt的趨勢(shì)是在往移動(dòng)端發(fā)展掉盅，所以我創(chuàng)建一個(gè)移動(dòng)端的項(xiàng)目
目錄結(jié)構(gòu)如下
.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
執(zhí)行sencha app watch
