从Ext JS 6.6开始,Ext JS也支持使用nmp来进行辅助开发了。为什么要选择nmp来辅助开发呢?之前使用Sencha Cmd也挺好的。Cmd确实也不错,但唯一的缺点就是不能确定最新版的Cmd是否适合适合你现在项目的版本,笔者一直在用Ext JS 6.2的GPL版本,也一直没去升级Cmd的版本,就是为了避免出问题。使用nmp可以减少这样的麻烦,而且使用npm来进行辅助开发是目前的发展潮流,为了跟上潮流,也应该尝试一下,说不定会喜欢上这种开发模式。
在使用前先根据《Getting Started with Ext JS Open Tooling》里的说明安装好ext-get
。安装好ext-gen
以后,在命令提示符窗口输入ext-gen --help
来查看一下创建应用程序的方式,命令执行后会显示如下输出:
Sencha ExtGen v0.0.194 - The Ext JS code generator
Quick Start: ext-gen -a
ext-gen app (-h) (-d) (-i) (-t 'template') (-m 'moderntheme') (-c 'classictheme') (-n 'name') (-f 'folder')
-h --help show help (no parameters also shows help)
-d --defaults show defaults for package.json
-i --interactive run in interactive mode (question prompts will display)
-t --template name for Ext JS template used for generate
-c --classictheme theme name for Ext JS classic toolkit
-m --moderntheme theme name for Ext JS modern toolkit
-n --name name for Ext JS generated app
-f --folder folder name for Ext JS application (not implemented yet)
-v --verbose verbose npm messages (for problems only)
Examples:
ext-gen app --template universalclassicmodern --classictheme theme-graphite --moderntheme theme-material --name CoolUniversalApp
ext-gen app--template classicdesktop --classictheme theme-graphite --name CoolDesktopApp
ext-gen app --interactive
ext-gen app -a --classictheme theme-graphite -n ClassicApp
ext-gen app -a -t moderndesktop -n ModernApp
Templates:
You can select from 4 Ext JS templates provided by Sencha ExtGen
classicdesktop (default)
This template is the default template in ext-gen. It contains 1 profile, configured to use the classic toolkit of Ext JS for a desktop application
moderndesktop
This template is similar to the classicdesktop template. It contains 1 profile, configured to use the modern toolkit of Ext JS for a desktop application
universalclassicmodern
This template contains 2 profiles, 1 for desktop (using the classic toolkit), and 1 for mobile (using the modern toolkit)
universalmodern
This template contains 2 profiles, 1 for desktop and 1 for mobile. Both profiles use the modern toolkit.
Theme Names:
classic themes: theme-classic, theme-neptune, theme-neptune-touch, theme-crisp, theme-crisp-touch theme-triton, theme-graphite
modern themes: theme-material, theme-ios, theme-neptune, theme-triton
在帮助信息的Examples
一节,我们可以看到生成通用应用程序、经典桌面应用程序、交互模式、使用石墨主题的经典应用程序和现代桌面应用程序等5个示例代码。
笔者要尝试的是经典桌面应用程序,还是使用海卫一主题,那个石墨主题的色调要自己重新调,还是算了。在命令行中输入以下命令来创建应用程序:
ext-gen app -c theme-triton -n Admin
由于经典模版是默认模版,因而不需要去指定模版,在命令中只需要指定主题和项目名称就可以的了。比较遗憾的是f选项居然还没实现,不能指定文件夹。
等待创建操作完成后,会在命令行窗口看到以下输出:
type "cd admin" then "npm start" or "npm run desktop"
to run the development build and open your new application in a web browser
根据提示先执行命令cd admin
进入项目文件夹,然后执行npm start
或npm run desktop
命令在浏览器打开应用程序了,可看到如下图所示的效果。
从图中可以看到,Ext JS 6.6提供了一个新的应用程序模版,看还去还好,不过不是笔者想要的,还是修改回管理模版比较好。
今天先到这了。