隨着Ext JS 7的發佈, 快速模版也需要進行升級了。由於社區版只提供現代工具包,因而在新的快速模版,只能使用現代工具包來開發桌面應用程序。不過,不用太過於擔心,因爲現在的現代工具包已經很強大了,用來開發桌面應用程序是一點問題沒有的。如果還執着於支持IE瀏覽器,那還是使用6.2版的快速模版比較合適。在目前Angluar、Vue和React快一統江湖的年代,再考慮兼容IE這樣的事情,筆者覺得有點脫離時代了,所以筆者在未來的實際開發中,也基本是採用現代工具包,不再考慮經典工具包了。
在開始創建項目前,需要熟讀一下Ext JS 7 CE版的文檔,尤其是《Getting Started with Ext JS using npm》這一節。在這一節內,可以找到CE版的註冊地址。
註冊完成後,就可根據文檔所描述的,在以下地址登錄CE版:
npm login --registry=https://sencha.myget.org/F/community/npm/ --scope=@sencha
總有不少讀者問我,怎麼下載CE版的框架文件?其實,這些都是GPL版本遺留的問題。在CE版已經不再提供框架文件了,因爲CE版是使用NPM來創建應用程序的,是通過NPM來下載框架文件的,不再需要下載框架文件了。
登錄成功之後,就要使用命令安裝ext-gen
:
npm install -g @sencha/ext-gen
如果安裝時出現等待很久沒反應或者返回Not Found錯誤,那就要登錄https://www.myget.org/網站,並修改密碼再試。這裏一定要注意,修改密碼不能通過forget passwrod重置的方式來修改,而必須在myget網站內的配置裏修改。筆者和另外一個Sencha Mvp研究了很久才發現還有這個問題,最終順利安裝ext-gen。都說淚啊!
安裝好ext-gen
,最後使用以下命令把@sencha/cmd
先安裝了,不然在創建應用程序的時候,又可能因安裝cmd
出問題:
npm install -g @sencha/cmd
cmd
安裝完成之後,有兩個選擇,使用ext-gen
或使用cmd
來創建應用程序。如果只是創建單個應用程序或單個通用應用程序,不需要共享模型(model)、存儲(store)等公共類,建議使用ext-gen
命令來創建。尤其是單個通用應用程序,使用ext-gen
創建基於npm的應用程序,在開發和生成上,比使用cmd
創建的方便多了。如果要開發的應用程序多於2個以上,建議使用cmd
來創建,這樣,就可以通過cmd
先創建一個工作區(workspace)來共享公共類,不需要通過複製粘貼的方式來共享公共類。
不知道是不是因爲npm的原因,使用
ext-gen
創建的應用程序, 不能引用工作區的類,只能在應用程序的packages文件夾內創建共享包,而這些包需要在另外的應用程序使用時,就得使用複製粘貼的方式來引用,非常的不方便。
爲了演示如何使用工作區,快速模版將使用cmd
來創建應用程序。使用cmd
創建通用應用程序會使用經典工具包來創建桌面應用程序,並不是快速模版所需要的,因而,只能將桌面和移動應用程序分開來創建。
創建工作區
可使用以下命令創建一個工作區:
sencha gen workspace --path ./workspace
命令執行後,會創建一個名爲workspace
的文件夾,並在文件夾內生成.gitignore
和workspace.json
兩個文件。其中,.gitignore
用來定義git
中不需要提交的文件和文件夾的,而workspace.json
是工作區的定義文件。
創建應用程序
使用cd
命令進入workspace命令,然後使用以下命令創建一個桌面應用程序:
sencha gen app -ext -modern Desktop ./Desktop
將以上命令中的Desktop
修改爲Phone
,然後執行它創建一個移動應用程序。
創建公共包
應用程序創建以後,還要創建應用程序所需的功能包,這需要使用到以下命令:
Sencha Cmd v7.0.0.40
sencha generate package
This command generates a new Sencha Cmd Package. A package is in many ways like
an application in that it contains any of the following pieces:
* JavaScript source
* SASS styles
* Arbitrary resources
All of these are integrated by a build process using sencha package build.
For example:
sencha generate package foo
If this command is run from an application directory, the package will be added
automatically to the requires array in the "app.json" file. To avoid this use
the -require switch:
sencha generate package -require foo
To use this package in other applications (or packages), you just add the name
of the package to the requires array in the "app.json" or "package.json"
file:
requires: [
'foo'
]
All packages reside in the "./packages" folder of the workspace (which is
often the same folder as your application).
Options
* --extend, -e - The theme (package) to extend from (For theme type packages on Ext JS 4.2+ only)
* --framework, -fr - The framework this package will use (i.e., "ext" or "touch")
* --name, -name - The name of the package to generate
* --namespace, -names - The namespace of the package to generate
* --require, -r - Whether to automatically add the generated package to the current app (for non-theme packages only)
* --theme, -th - The theme (package) this package will use (i.e., "ext-theme-classic", "ext-theme-crisp", "ext-theme-neptune", etc.)
* --toolkit, -to - The toolkit this theme will use (For theme type packages on Ext JS 6.x+ only)
* --type, -ty - The type of the package to generate (i.e., "code" or "theme")
Supported Values:
* CODE : A library of code
* EXTENSION : An extension to Sencha Cmd
* FRAMEWORK : A framework
* THEME : A user interface theme or skin
* TEMPLATE : A library of one or more templates
* TOOLKIT : A library of components / widgets
* LOCALE : Localization overrides / styling
* OTHER : Unspecified type
Syntax
sencha generate package [options] name
依次執行以下命令先創建5個公共包:
sencha gen pack --type CODE --name Common.Data
sencha gen pack --type CODE --name Common.Desktop
sencha gen pack --type CODE --name Common.Phone
sencha gen pack --type CODE --name Common.Shared
sencha gen pack --type CODE --name Locale
執行以上命令後,可在workspace\packages\local
文件夾內看到放置5個公共包文件的目錄。這5個包的作用如下:
- Common.Data:用於定義應用程序所共享的模型和存儲
- Common.Desktop:用於共享桌面應用程序所需的類和組件
- Common.Phone:用於共享移動應用程序所需的類和組件
- Common.Shared: 用於共享桌面應用程序和應對應用程序所需的類和組件
- Locale: 用於共享本地化文件
由於使用材料主題(theme-material),所有輸入框都只有底部邊框,並不適用於桌面應用程序,因而需要從材料主題派生一個自定義主題來修改邊框等適用於桌面的樣式。
使用以下命令創建一個自定義主題:
sencha gen pack --extend theme-material --type THEME --name ModernDesktopTheme
包創建完成後,可以測試下是否能正確引用包。打開桌面應用程序的app.json
文件,把theme
修改爲新創建的主題ModernDesktopTheme
,在requires
中加入Common.Data
、Common.Desktop
、Common.Shared
和Locale
的引用,然後運行以下命令生成一次應用程序:
sencha app build -dev
如果生成過程順利,沒有錯誤, 說明應用程序和包都已經創建成功了。