如何在ExtJS 6中使用Fashion美化应用程序

编译主题

Ext

JS应用程序的主题使用的是SASS，它是一种动态编写CSS代码的方法。例如，可以在样式表中使用变量和运算。浏览器并不了解SASS，它只知道CSS，隐藏，这些SASS主题需要被编译为浏览器能理解的，生产用的CSS代码。在Ext

JS应用程序中可以通过在Sencha Cmd运行以帆庆下命令来编译主题：

sencha app build [development]

或

sencha app watch [toolkit]

两者的区别在于watch会通过轮询来了解更新，并理解进行编译，而build编译只能手动执行一次。

在旧版本的Ext JS或Sencha Touch，SASS样式是在Ruby中编译的。在Windows，需要使用管理员权限来安装Ruby。一旦安装完成镇轿亩，就可以开始编译主题了。不过，在有大量代码库和高级主题的时候，就要花费大量的编译时间。

为了编译高级主题，有时候需要花费一分钟。然后，你不得不刷新浏览器窗口来测试主题以确保已正确设置SASS变量。之后还要一次次的重复此过程。要知道，这个过程是相当耗时间的。这也是为什么对Fashion感到高兴的原因。

Sencha Fashion是使用javascript来编译主题的，可以说这是超级的快。当在左边的显示器修改一行代码后，就可以右边的显示器看到变化了，就是这么快。不再需要等等编译（在服务器开始），也不再需要刷新浏览器窗口。

由于Fashion使用的是javascript，因而有更多优点。例如，可以在Fashion之上进行扩展并创建自己的样式功能（类似SASS功能），还能调试样式表代码。

不过，最大的得益还是可以在开发机器上设计主题。要实现这个，只需要在命令行运行sencha app watch并在URL中添加以下参数：

?platformTags=fashion:true

开始编译

下面来尝试下使用Fashion来编译一个主题。首先，下载Ext JS 6。这已经包含了SDK。还需要下载Sencha Cmd 6。

安装好命令行工具后，在机器上解压Ext JS 6框架包（zip）。打开命令行提示符并通过命令行导航到框架文件夹。在Ext6文件夹，输入以下命令来创建第一个sencha通用应用程序：

ext>sencha generate app MyApp ../指定的项目路径

在IDE或编辑器中打开新的应用程序项目。要注意classic和modern这两个新的文件夹。这是用来区分工具包的文件夹。共享代码要放在app文件夹内。classic工具包文件夹包含了旧版本（桌面）视图，而modern工具包文件夹则包含了现代touch的视图。对于两个工具包来说，DOM是不同的，因而样式也会有些许不同。这也是为什么工具包文件夹会有一个src子文件夹用来放置javascript代码，会有一个sass文件夹来放置指定的样式的原因。

打开app.json文件并滚动到“builds”配置：

"builds": {

"classic": {

"toolkit"御森: "classic",

"theme": "theme-triton"

},

"modern": {

"toolkit": "modern",

"theme": "theme-neptune"

}

},12345678910111234567891011

要注意这里的每一个build配置，他们都有自己的工具包和主题。对于classic配置，将使用新的海卫一（Triton）主题，而modern工具包将使用海王星（Neptune）主题（原名是Sencha Touch默认主题）。

现在不需要对这个进行修改。下面来创建两个新文件：

classic/sass/var/Application.scss

modern/sass/var/Application.scss

现在，打开Sencha本地Web服务器，并让Sencha轮询样式表的改变。

在通用应用程序的文件夹中，运行以下命令：

项目文件夹>sencha app watch classic

如果Cmd安装正确，该命令会正确运行。现在内置的sencha服务器将等待更新。应用程序默认可通过http://localhost:1841来访问。

sencha touch被合并到extjs6里面，extjs6可以开发桌面端、移动端、甚至通用的web app（针对不同设备类型自动显示不同的页面），相同的代码可以共用，比如桌面端和移动端假如只是界面不同，像model和controller那些如果相同的话可以共用，即便是有些区别也可以写个父类，然后移动端和桌面端的代码分别继承该类并添加额外功能。

另外，extjs6也支持MVVM了，利用官方文档的最佳实践MVVM+MVC混合来开发，真的令人很愉悦。

当然我们只是开发移动端的，下面介绍下怎样做。extjs6引入了toolkit概念，做移动端的toolkit是modern，桌面端的是classic，我们将用它的modern toolkit来开发。

创建一个app：sencha –sdk (sdk目录) generate app –modern (app名称) (生成的目录)

例如：sencha –sdk G:\lib\JavaScript\extjs\ext-6.0.0-gpl\ext-6.0.0 generateapp –modern Test my-test

如果不加“-modern”的话它会自动生成一个通用app，有app、classic和modern三个目录存放源代码，app为共用代码目录，classic和modern分别握告物为桌面端和移动端的不共用段液代码。但我们只是做移动端的，所友毁以存放源码的就一个app目录。

---