初试Ext JS 6.6的NPM版(一)

从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 startnpm run desktop命令在浏览器打开应用程序了,可看到如下图所示的效果。

这里写图片描述

从图中可以看到,Ext JS 6.6提供了一个新的应用程序模版,看还去还好,不过不是笔者想要的,还是修改回管理模版比较好。

今天先到这了。

猜你喜欢

转载自blog.csdn.net/tianxiaode/article/details/81333086