人力资源-ExtJS60开发培训VIP专享VIP免费

一、EXT5ext5的主题是用SASS（点击进入）和Compass（点击进入）编写的。在ext5中，仅仅通过更改SASS的变量值，就可以将几乎所有的组件样式定制了，包括颜色，字体，边框，背景。本文介绍了如何创建一个在多应用中可分享的定制化主题。1.环境要求SenchaCmd5这是一个命令行工具，用于部署ExtJS应用，创建一个ExtJS5主题，你必须拥有SenchaCmd5或更高版本注意：SenchaCmd5已经预安装了SASS和Compass，如果你的电脑已经安装了，请卸载掉自己的。Ruby安装ruby环境（点击进入）用1.9.3版本ExtJS如果你本地有ExtJSSDK，解压后在本地路径下执行Cmd命令就行。不过我们已经不用下载ExtJS了，你可以用“-ext”命令来自动下载最新版的ExtJS5！我们这次就用这个命令来做。2.创建自定义主题如上所述你需要安装ruby，cmd工具，就可以开始制作主题了创建一个工作空间第一步是用SenchaCmd创建一个你自己的工作空间[ruby]viewplaincopyprint?1.cd/dE:\ext2.senchagenerateworkspace-extmy-workspace如果你想使用一个下载好的SDK或本地的一个SDK副本，在命令前面加上你解压的ExtJSSDK的路径就可以了[ruby]viewplaincopyprint?1.sencha-sdk~/sencha-5.0.0generateworkspacemy-workspace1.sencha-sdkC:\Users\zj\Desktop\ext-5.1.0-gpl\ext-5.1.0generateworkspaceD:\EXT\Sencha\Cmd5\Sencha\Cmd\work\ZJ生成的工作空间将利用脚手架生成一个Sencha目录，让我们进去看看[ruby]viewplaincopyprint?1.cdmy-workspace如图：“ext”---包含了ExtJSSDK“packages”---EXTJS语言环境和主题包生成一个App来测试主题我们来生成一个App，在这个基础上来制作主题，在“my-workspace”路径下，用下面的命令来生成一个ExtJS应用的骨架：[ruby]viewplaincopyprint?1.sencha-sdkextgenerateappThemeDemoApptheme-demo-app1.sencha-sdkextgenerateappZJEXTZJEXT现在，我们生成了一个名字为ThemeDemoApp的应用，路径（也就是文件夹）为theme-demo-app。这个应用将用"ext"文件夹下的js文件作为引用源。现在的结构为theme-demo-app里面的结构为进入后用下面的命令启动app服务器用网页查看[ruby]viewplaincopyprint?1.cdtheme-demo-app2.senchaappwatch这里有两种方式查看你的app：1.开发模式打开"my-workspace/theme-demo-app/index.html"方便调试，代码未压缩，我们的教程用的是这个模式。2.生产模式运行命令[ruby]viewplaincopyprint?1.senchaappbuild构建后，你可以用浏览器在下面的路径找到你的应用my-workspace/build/production/ThemeDemoApp/index.html使用压缩后的源文件，性能更好生成自定义主题包在theme-demo-app文件夹下，运行[ruby]viewplaincopyprint?1.senchageneratethememy-custom-theme它告诉senchacmd生成一个名字为my-custom-theme的主题包就在my-workspace\packages路径下l"package.json"---包属性文件，它告诉SenchaCmd这个包的一些信息，如包名，版本，依赖（本包对其他包的依赖）等l"sass/"---所有的主题SASS文件，里面分三部分：n"sass/etc/"---额外的工具函数或混入mixinsn"sass/src/"---SASS规则和调用定义在“sass/var/”中的变量的UImixinn"sass/var/"---SASS变量"sass/var/"和"sass/src"是结构化的，也就是说，是按照你编写样式组件的类路径方式来匹配的。举个例子，更改Ext.panel.Panel外观的变量应该放在一个文件名为"sass/var/panel/Panel.scss"的文件中l"resources/"---图片和其它静态资源l"overrides/"---包含任意修改主题组件类所需覆写的js主题继承机制每一个主题包都继承自基本主题包，你创建自己的主题首先要指出你继承自哪个主题，你能从my-workspace\ext\packages路径下看到所有的主题包"ext-theme-base""ext-theme-neutral""ext-theme-neptune""ext-theme-crisp-touch""ext-theme-crisp""ext-theme-crisp-touch""ext-theme-classic""ext-theme-gray""ext-theme-aria"我们的自定义主题应该继承哪一个作为开始呢？我们的建议是使用"ext-theme-neptune"或"ext-theme-classic"作为起点，因为这些主题包含所有创建一个有吸引力的主题的必要代码。Neutral主题是一个比较抽象的主题，不...