ExtJS60开发培训

一、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路径下lpackage.json---包属性文件，它告诉SenchaCmd这个包的一些信息，如包名，版本，依赖（本包对其他包的依赖）等lsass/---所有的主题SASS文件，里面分三部分：nsass/etc/---额外的工具函数或混入mixinsnsass/src/---SASS规则和调用定义在“sass/var/”中的变量的UImixinnsass/var/---SASS变量sass/var/和sass/src是结构化的，也就是说，是按照你编写样式组件的类路径方式来匹配的。举个例子，更改Ext.panel.Panel外观的变量应该放在一个文件名为sass/var/panel/Panel.scss的文件中lresources/---图片和其它静态资源loverrides/---包含任意修改主题组件类所需覆写的js主题继承机制每一个主题包都继承自基本主题包，你创建自己的主题首先要指出你继承自哪个主题，你能从my-workspace\ext\packages路径下看到所有的主题包ext-theme-baseext-theme-neutralext-theme-neptuneext-theme-crisp-touchext-theme-crispext-theme-crisp-touchext-theme-classicext-theme-grayext-theme-aria我们的自定义主题应该继承哪一个作为开始呢？我们的建议是使用ext-theme-neptune或ext-theme-classic作为起点，因为这些主题包含所有创建一个有吸引力的主题的必要代码。Neutral主题是一个比较抽象的主题，不容易直接继承。覆写一个Neutral主题可能需要你数个小时的工作，更改数百个变量值，而用一个neptune或classic主题你可能只需要花几分钟更改数个变量。当然，gray或aria主题也是相当不错的选择。这个教程中，我们创建一个继承Neptune主题的自定义主题。打开“packages/my-custom-theme/package.json”文件，找到[ruby]viewplaincopyprint?1.extend:ext-theme-classic更改为[ruby]viewplaincopyprint?1.extend:ext-theme-neptune刷新app，这样保证正确的主题js文件包含到bootstrap.js中了，运行刷新命令[ruby]viewplaincopyprint?1.senchaapprefresh好了现在你的主题变成了Neptune主题了，你可以在my-workspace\ext\packages\ext-theme-neptune中进行修改样式，编译后可看主题（编译在后面讲到）运用自己的主题首先讲解一下几个重要的命令行senchaappwatch在app应用路径下执行。用于启动服务器，一旦启动，它将监控你的应用更改并自动构建和刷新你的应用。Senchaappbuild在app应用路径下执行。更改应用的某些参数后，需要重新构建一下来把参数导入Senchaapprefresh在app应用路径下执行。更改内容写入bootstrap.js中，咱们这里是更改主题配参后运行一下。Senchapackagebuild在主题包路径下执行。更改主题包某些参数后，需要重新构建好，首先让我们先把默认主题更改为我们的自建主题路径：theme-demo-app/app.json[ruby]viewplaincopyprint?1./**2.*Thenameofthethemeforthisapplication.3.*/4.theme:ext-theme-neptune,更改为[ruby]viewplaincopyprint?1./**2.*Thenameofthethemeforthisapplication.3.*/4.theme:my-custom-theme,我们把neptune主题包更改为了我们自定义的主题包，ext会自己去my-workspace下的package里面寻找。@includeextjs-panel-ui($ui-label:'jzpm',$ui-border-color:#32323A$ui-border-width:0$ui-border-color:#32323A$ui-header-color:#32323A$ui-header-font-size:#FFFFFF$ui-header-font-weight:#32323A$ui-header-line-height:#32323A$ui-header-background-color:#32323A$ui-body-background-color:#32323A);配置全局主题变量让我们来修改一个变量---basecolor。在my-custom-theme/sass/var/中创建一个文件Component.scss，增加如下代码[ruby]viewplaincopyprint?3.$base-color:#317040!default;后面加！default提高其优先级，因为SenchaCmd变量文件读取是“反向”的，先读取衍生主题，最后是base主题。更多的！default用法参见VariableDefaults完整的extjs全局SASS变量列表参见Global_CSS.构建包现在你已经修改了自有主题的basecolor，你需要为你的主题构建一个包含所有样式规则的升级版本css文件。到路径packages/my-custom-theme/下，运行[ruby]viewplaincopyprint?1.senchapackagebuild构建包将创建一个“build”文件夹，在my-custom-theme/build/resources中，你将找到一个my-custom-theme-all.css，这个文件包含你的主题的所有组件的样式规则。你可以直接在你的应用中链接它，但是这样做并不推荐，因为“all”文件包含了每一个ext组件的所有样式，而许多app应用仅仅用了组件库中的子集，如果你想这么做，首先请先在你的应用中更改参数，指定好应用具体使用哪个主题，再开始构建，这样senchacmd会自动过滤掉未使用的css样式规则。接着我们来构建一下my-custom-theme，因为刚才我们更改了theme-demo-app/app.json文件，并没有构建到theme-demo-app路径下，运行[ruby]viewplaincopyprint?1.senchaappbuild启动senchaappwatch，刷新浏览器theme-demo-app/index.html。你应该看到了更改的样子了。背景变绿了组件变量更改每一个ExtJS组件都有一系列的主题全局变量可供你修改。让我们来改变panelheaders的font-family。创建文件packages/my-custom-theme/sass/var/panel/Panel.scss，增加如下代码[ruby]viewplaincopyprint?1.$panel-header-font-family:TimesNewRoman!default;运行[ruby]viewplaincopyprint?1.senchaappbuild可以看到字体变化了注：其实这里我测试后发现这里字体是不会发生变化的，panel只有加了frame后字体才会发生变化创建自定义组件UIExt中每个组件都拥有自己的UI设置参数，缺省下都是default，这个属性可以给予单独实体组件拥有自己的UI配参，可以让你在同一类型组件下给予不同的样式，比如，panel的“defaultUI”是黑蓝色的header，但它的“lightUI”中，header是亮蓝色的，button也用UI来制作不同于普通按钮的工具条按钮。Neutral主题为各种组件提供了很多SASSmixins混入，你可以用这些m