ExtJS6.0开发培训解析.docx

EXT5ext5的主题是用SASS（点击进入）和Compass（点击进入）编写的。在ext5中，仅仅通过更改SASS的变量值，就可以将几乎所有的组件样式定制了，包括颜色，字体，边框，背景。本文介绍了如何创建一个在多应用中可分享的定制化主题。环境要求Sencha Cmd 5这是一个命令行工具，用于部署Ext JS应用，创建一个Ext JS 5主题，你必须拥有Sencha Cmd 5 或更高版本注意：Sencha Cmd 5 已经预安装了SASS和Compass，如果你的电脑已经安装了，请卸载掉自己的。Ruby安装ruby环境（点击进入）?用1.9.3版本Ext JS如果你本地有Ext JS SDK，解压后在本地路径下执行Cmd命令就行。不过我们已经不用下载Ext JS 了，你可以用“-ext”命令来自动下载必威体育精装版版的Ext JS 5！我们这次就用这个命令来做。创建自定义主题如上所述你需要安装ruby，cmd工具，就可以开始制作主题了创建一个工作空间第一步是用Sencha Cmd创建一个你自己的工作空间[ruby]?view plaincopyprint?cd?/d?E:\ext??sencha?generate?workspace-ext?my-workspace??如果你想使用一个下载好的SDK或本地的一个SDK副本，在命令前面加上你解压的Ext JS SDK的路径就可以了[ruby]?view plaincopyprint?sencha?-sdk~/sencha-5.0.0?generate?workspace?my-workspace??1.sencha -sdkC:\Users\zj\Desktop\ext-5.1.0-gpl\ext-5.1.0 generate workspace D:\EXT\Sencha\Cmd5\Sencha\Cmd\work\ZJ生成的工作空间将利用脚手架生成一个Sencha目录，让我们进去看看[ruby]?view plaincopyprint?cd?my-workspace??如图：“ext” ---?包含了Ext JS SDK“packages” --- EXT JS语言环境和主题包生成一个App来测试主题我们来生成一个App，在这个基础上来制作主题，在“my-workspace”路径下，用下面的命令来生成一个Ext JS应用的骨架：[ruby]?view plaincopyprint?sencha?-sdk?ext?generate?app?ThemeDemoApp?theme-demo-app??1.sencha -sdk ext generate app ZJEXT ZJEXT现在，我们生成了一个名字为ThemeDemoApp的应用，路径（也就是文件夹）为theme-demo-app。这个应用将用ext文件夹下的js文件作为引用源。现在的结构为theme-demo-app里面的结构为进入后用下面的命令启动app服务器用网页查看[ruby]?view plaincopyprint?cd?theme-demo-app??sencha?app?watch??这里有两种方式查看你的app：1.开发模式打开my-workspace/theme-demo-app/index.html方便调试，代码未压缩，我们的教程用的是这个模式。2.生产模式运行命令[ruby]?view plaincopyprint?sencha?app?build??构建后，你可以用浏览器在下面的路径找到你的应用my-workspace/build/production/ThemeDemoApp/index.html使用压缩后的源文件，性能更好生成自定义主题包在?theme-demo-app?文件夹下，运行[ruby]?view plaincopyprint?sencha?generate?theme?my-custom-theme??它告诉senchacmd?生成一个名字为my-custom-theme的主题包就在my-workspace\packages路径下l?package.json ---?包属性文件，它告诉?Sencha Cmd?这个包的一些信息，如包名，版本，依赖（本包对其他包的依赖）等l?sass/?---?所有的主题SASS文件，里面分三部分：n?sass/etc/ ---额外的工具函数或混入mixinsn?sass/src/? --- SASS规则和调用定义在“sass/var/”中的变量的UI mixinn?sass/var/?--- SASS变量sass/var/?和?sass/src是结构化的，也就是说，是按照你编写样式组件的类路径方式来匹配的。举个例子，更改Ext.panel.Panel外观的变量