如何在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文件夹来放置指定的样式的原因。

打开appjson文件并滚动到“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/Applicationscss

modern/sass/var/Applicationscss

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

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

项目文件夹> sencha app watch classic

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

假如运行的端口是1841，则在浏览器输入以下地址来打开应用程序：

http://localhost:1841/platformTags=fashion:true

等待应用程序加载完成。主题第一次编译，需要一点时间。一旦看到应用程序，在编辑器打开以下文件：

classic/sass/var/Applicationscss

如果有两个显示器，将浏览器窗口拖到其他显示器，让编辑器在一个显示器，而浏览器在另一个显示器。

接下来将样式表的总体样式修改为黑色。编写以下全局变量：

$base-color: #000;

等一会，就可以在浏览器中看到更改后的样式了。不仅标题已更改为黑色，其他扩展自全局基本颜色的样式都已经变成黑色了。，例如，双击网格，会看到告警窗口也已经改变了。

修改$base-color的值，试一下其他颜色效果。例如20%变亮的红色：

$base-color: lighten(red, 20%);

{aligncenter}

当然，现在也可以使用这种方式来修改modern工具包的主题。运行以下命令：

sencha app watch modern

在浏览器打开以下url将打开modern工具包：

http://localhost:1841/toolkit=modern&platformTags=fashion:true

修改以下文件：

modern/sass/var/Applicationscss

这相当快！这就是Fashion，编译是在Javascript下运行的。所有的效果都是在这个引擎下产生的。Sencha

Cmd在后台运行的是PhantomJS。它是一个没有显示的浏览器，可以在命令行中运行。它可以运行应用程序，编译主题，以及将它推送给一个大的javascript函数。每一次修改，都会让javascript去修改DOM中的样式。

敬请期待未来的主题教程。请把你们对于Fashion的想法告诉我们。这个可以在Ext JS 6论坛中提交你的问题。

作者： Lee Boonstra

Lee is a sales engineer at Sencha in Europe She’s located in

Amsterdam and has experience in both front-end and back-end development

Lee spends her spare time developing web and mobile apps She also

wrote a book for O’Reilly: Hands-on Sencha Touch 2

不要去看视频，javascript 是很简单的脚本语言，去w3cschool学最标准的js，无非就是一些简单的逻辑和一些经验而已，但如果你要往深了学，这个也是一门学问，这玩意儿很讲究性能，要考虑浏览器兼容性，要考虑js文件的大小和压缩率，要考虑代码的维护。新手不建议一上来就学一些成熟的框架，比如jquery 、extjs 等，懂得原生的js之后，再来学这些优秀的框架，上手会很快，一个小时就知道怎么用。 其实最好的学习方式就是去一个样式复杂的网页，然后看它的源文件。理解了，再模仿，再创新。

jQuery是一套独立的javascript框架,里面包含了ajax功能的封装

传统的只说ajax,更多的指使用xmlHttpRequest对象进行纯ajax操作

所以,jQuery>ajax

<<基于ASPNET和AJAX的博客>>

01_选材设计搭建母版avi

02_当前活动菜单定位处理avi

03_使用AuthenticationService实现登录avi

04_使用AuthenticationService实现注销和状态管理avi

05_使用RoleService实现角色管理avi

06_使用ProfileService实现Profile管理avi

07_使用jQuery插件实现用户注册(上)avi

08_使用jQuery插件实现用户注册(下)注册细节调整_功能实现avi

09_管理日志分类_tabs插件使用avi

10_HTML编辑器插件及发表日志avi

11_使用jPage_AJAX获得分布数据avi

12_使用jBind绑定数据及细节完善avi

13_显示日志和评论列表avi

14_发表评论avi

15_发表评论及细节完善avi

16_按分类查看日志列表_友情链接实现avi

17_日志的编辑和删除avi

18_删除评论_存档记录avi

19_搜索功能_关于作者_站点地图_总结avi

xtype

:

'combo',

emptyText

:

'请选择年份^',//下拉框初始显示字段

fieldLabel

:

'年份选择',

store

:

new

ExtdataStore(

{

proxy

:

new

ExtdataHttpProxy(

{

url

:

'info/infoMovie!getAllInfodo'//提交到某action的某方法

}),

reader

:

new

ExtdataJsonReader(

{},

[

'movieYear'

]),//需要显示的数据实体字段

autoLoad

:

true

}),

displayField

:

'movieYear',

//显示文本字段

hiddenName

:

'infoMoviemovieYear',//真正提交此combo时的name

valueField

:

'movieYear',

//值字段

triggerAction

:

'all',

//设置为”all”,否则默认

为”query”的情况下，

//你选择某个值后，再此下拉时，只出现匹配选项，

//如果设为”all”的话，每次下拉均显示全部选项

editable

:

false,

allowBlank

:

false

}