快速模版（社区版本7.0）——创建模版

Posted 2022-12-04 上将军

随着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

如果生成过程顺利，没有错误， 说明应用程序和包都已经创建成功了。

源代码：https://github.com/tianxiaode/qTemplate-ExtJSCE7