资源描述：
《如何在extjs中使用fashion美化应用程序》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、如何在ExtJS6中使用Fashion美化应用程序在ExtJS6,一个最大的改变就是框架合并，使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的最好应用程序，他还带来了一种美化应用程序的新方式。在本文,重点是SenchaFashion。1•编译主题ExtJS应用程序的主题使用的是SASS，它是一种动态编写CSS代码的方法。例如，可以在样式表中使用变量和运算。浏览器并不了解SASS，它只知道CSS,隐藏，这些SASS主题需要被编译为浏览器能理解的，生产用的CSS代码。在ExtJS应用程序中通
2、过SenchaCmd运行一下命令来编译主题：Senchaappbuild[development]或senchaappwatch[toolkit]两者的区别在于watch会通过轮询来了解更新，并理解进行编译，而build编译只能手动执行一次。在旧版本的ExtJS或SenchaTouchzSASS样式是在Ruby中编译的。在Windows,需要使用管理员权限来安装Rubyo一旦安装完成,就可以编译主题了。不过，在有大量代码库和高级主题的时候，就要花费大量的编译时间。为了编译高级主题，有时候需要花费分钟
3、。然后，你不得不刷新浏览窗口来测试主题以确保以正确设置SASS变量。之后还要一次次的重复此过程。要知道,这个过程是相当耗时间的。这也是为什么对Fashion感到高兴的原因。SenchaFashion是使用javascript来编译主题的,可以说是超级得快。当在左边的显示器修改一行代码后，就可以右边的显示器看到变化了,就是这么快。不再需要等等编译（在服务器开始）r也不再需要刷新浏览器窗口。由于Fashion使用的是javascript,因而有更多优点。例如，可以在Fashion之上进行扩展并创建自己的
4、样式功能（类似SASS功能）,还能调试样式表代码。不过，最大的得益还是可以在开发机器上设计主题。要实现这个，只需要在命令行运行senchaappwatch并在URL中添加以下参数：?platformTags=fashion:true2•开始编译下面来尝试使用Fashion来编译一个主题。首先，下载ExtJS6O这已经包含了SDK。还需要下载SenchaCmd6。安装好命令行工具后，在机器上解压ExtJS6框架包（才p）。打开命令行提示符并通过命令行导航到框架文件夹。在Ext6文件夹，输入以下命令来创
5、建第一个sencha通用应用程序:ext>senchagenerateappMyApp../扌旨定的路径在IDE或编辑器中打开新的应用程序项目。要注意classic和modern这两个新的文件夹。这是用来区分工具包的文件夹。共享代码要放在app文件夹内。classic工具包文件夹包含了旧版本（桌面）视图，而modern工具包文件夹则包含了现代touch的视图。对于两个工具包来说，DOM是不同的,因而样式也会有些许不同。这也是为什么工具包文件夹会有一个src子文件夹用来放置javascript代码，会
6、有一个sass文件夹来放置指定的样式的原因。打开appjson文件并滚动到"builds"配置：〃builds〃:{"classic":{"toolkit":"classic","theme":"theme-triton"},"modern":{"toolkit":〃modern","theme":"theme-neptune"}},要注意这里的每一个build配置，他们都有自己的工具包和主题。对于classic配置z将使用新的海卫一（Triton）主题,而modern工具包将使用海王星（Neptu
7、ne）主题（原名是SenchaTouch默认主题）。现在不需要对这个进行修改。下面来创建两个新文件：classic/sass/var/Application.scssmodern/sass/var/Application.sass现在，打开Sencha本地Web服务器，并让Sencha轮询样式表的改变。在通用应用程序的文件夹中，运行以下命令：项目文件夹〉senchaappwatchclassic如果Cmd安装正确,该命令会正确运行。现在内置的sencha服务器将等待更新。应用程序默认可通过http:
8、//localhost:1841来访问。假如运行的端口是1841,则在浏览器输入以下地址来打开应用程序：http:〃localhost:1841/?pla廿ormTaqs二fashion:true等待应用程序加载完成。主题第一次编译，需要一点时间。一旦看到应用程序,在编辑器打开以下文件:classic/sass/var/Application.scss如果有两个显示器，将浏览器窗口拖到其他显示器，让编辑器在一个显示器,而浏览器在另一个显示器。接下来将样式表的总体样式修
