ExtJS60开发培训.docx
《ExtJS60开发培训.docx》由会员分享,可在线阅读,更多相关《ExtJS60开发培训.docx(47页珍藏版)》请在冰豆网上搜索。
![ExtJS60开发培训.docx](https://file1.bdocx.com/fileroot1/2022-12/31/89619d4e-8182-4f28-b3ec-206b39e6dda8/89619d4e-8182-4f28-b3ec-206b39e6dda81.gif)
ExtJS60开发培训
一、EXT5
ext5的主题是用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 /d E:
\ext
2.sencha generate workspace-ext my-workspace
如果你想使用一个下载好的SDK或本地的一个SDK副本,在命令前面加上你解压的ExtJSSDK的路径就可以了
[ruby] viewplaincopyprint?
1.sencha -sdk~/sencha-5.0.0 generate workspace my-workspace
1.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.cd my-workspace
如图:
“ext”--- 包含了ExtJSSDK
“packages”---EXTJS语言环境和主题包
生成一个App来测试主题
我们来生成一个App,在这个基础上来制作主题,在“my-workspace”路径下,用下面的命令来生成一个ExtJS应用的骨架:
[ruby] viewplaincopyprint?
1.sencha -sdk ext generate app ThemeDemoApp theme-demo-app
1.sencha-sdkextgenerateappZJEXTZJEXT
现在,我们生成了一个名字为ThemeDemoApp的应用,路径(也就是文件夹)为theme-demo-app。
这个应用将用"ext"文件夹下的js文件作为引用源。
现在的结构为
theme-demo-app里面的结构为
进入后用下面的命令启动app服务器用网页查看
[ruby] viewplaincopyprint?
1.cd theme-demo-app
2.sencha app watch
这里有两种方式查看你的app:
1.开发模式
打开"my-workspace/theme-demo-app/index.html"
方便调试,代码未压缩,我们的教程用的是这个模式。
2.生产模式
运行命令
[ruby] viewplaincopyprint?
1.sencha app build
构建后,你可以用浏览器在下面的路径找到你的应用
my-workspace/build/production/ThemeDemoApp/index.html
使用压缩后的源文件,性能更好
生成自定义主题包
在 theme-demo-app 文件夹下,运行
[ruby] viewplaincopyprint?
1.sencha generate theme my-custom-theme
它告诉senchacmd 生成一个名字为my-custom-theme的主题包
就在my-workspace\packages路径下
l "package.json"--- 包属性文件,它告诉 SenchaCmd 这个包的一些信息,如包名,版本,依赖(本包对其他包的依赖)等
l "sass/" --- 所有的主题SASS文件,里面分三部分:
n "sass/etc/"---额外的工具函数或混入mixins
n "sass/src/" ---SASS规则和调用定义在“sass/var/”中的变量的UImixin
n "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主题是一个比较抽象的主题,不容易直接继承。
覆写一个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.sencha app refresh
好了现在你的主题变成了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. * The nameof the theme for this application.
3. */
4."theme":
"ext-theme-neptune",
更改为
[ruby] viewplaincopyprint?
1./**
2. * The nameof the theme for this application.
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.sencha package build
构建包将创建一个“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.sencha app build
启动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:
Times New Roman!
default;
运行
[ruby] viewplaincopyprint?
1.sencha app build
可以看到字体变化了
注:
其实这里我测试后发现这里字体是不会发生变化的,panel只有加了frame后字体才会发生变化
创建自定义组件UI
Ext中每个组件都拥有自己的UI设置参数,缺省下都是default,这个属性可以给予单独实体组件拥有自己的UI配参,可以让你在同一类型组件下给予不同的样式,比如,panel的“defaultUI”是黑蓝色的header,但它的“lightUI”中,header是亮蓝色的,button也用UI来制作不同于普通按钮的工具条按钮。
Neutral主题为各种组件提供了很多SASSmixins混入,你可以用这些mixins来生成新的UI,这可以从API中找到它们,如,Ext.panel.Panel中,找到“CSSMixins”部分,看看mixins需要哪些参数,现在,让我们来用mixins来创建一个PanelUI,创建一个文件packages/my-custom-theme/sass/src/panel/Panel.scss,写入如下代码
[ruby] viewplaincopyprint?
1.@include extjs-panel-ui(
2. $ui-label:
'highlight-framed',
3. $ui-header-background-color:
red,
4. $ui-border-color:
red,
5. $ui-header-border-color:
red,
6. $ui-body-border-color:
red,
7. $ui-border-width:
5px,
8. $ui-border-radius:
5px
9.);
这段代码创建了一个新PanelUI ,名称为highlight-framed,为了在项目中使用它,把Panel中的ui属性设置为highlight(“-framed”这个后缀在你把frame属性设置为true时会自动添加上)
打开"theme-demo-app/app/view/Main.js",替换一下代码:
[ruby] viewplaincopyprint?
1.items:
[{
2. // custom "highlight" UI
3. xtype:
'panel',
4. ui:
'highlight',
5. frame:
true, // Make sure to add thisconfig to see the frame highlight changes
6. bind:
{
7. title:
'{name}'
8. },
9. region:
'west',
10. html:
'
- This area isused for navigation, for example, using a "tree"component.
',
11. width:
250,
12. split:
true,
13. tbar:
[{
14. text:
'Button',
15. handler:
'onClickButton'
16. }]
17.},{
18. region:
'center',
19. xtype:
'tabpanel',
20. items:
[{
21. title:
'Tab 1',
22. html:
'
Content appropriatefor the current navigation.
'
23. }]
24.}]
效果如下:
虽然UImixin是一个方便的方式为一个组件配置多个表象,他们不应该被过度使用。
每个调用UImixin生成额外的CSS规则。
随意调用UImixin可能产生过大的CSS文件。
另一个重要的一点要记住当调用UImixin时,是通过其命名参数调用mixin,而不是参数值的有序列表。
尽管SASS支持两种形式,但是最好使用这种形式:
[ruby] viewplaincopyprint?
1.@includeextjs-component-ui(
2. $ui-foo:
foo,
3. $ui-bar:
bar
4.);
而不是
[ruby] viewplaincopyprint?
1.@includeextjs-component-ui(foo, bar);
修改图片资源
所有的图片资源缺省下都继承自父主题,我们可以通过覆写方式来实现,把想覆写的图片放在"my-custom-theme/resources/images/中,给它们父主题中同样的名字即可。
如,让我们改变MessageBox 组件的infoicon,把下面的图片保存起来
"packages/my-custom-theme/resources/images/shared/icon-info.png"
在"theme-demo-app/app/view/Main.js"中写代码把其显示出来
[ruby] viewplaincopyprint?
1....
2.tbar:
[{
3. text:
'Button',
4. handler:
'onClickButton'
5.}],
6.items:
[{
7. xtype:
'button',
8. text:
'Show Message',
9. handler:
function() {
10. Ext.Msg.show({
11. title:
'Info',
12. msg:
'Message Box with customicon',
13. buttons:
Ext.MessageBox.OK,
14. icon:
Ext.MessageBox.INFO
15. });
16. }
17.}]
18....
运行
[ruby] viewplaincopyprint?
1.sencha app build
看效果
主题Js覆写
覆写js的属性十分简单,让我们试着把Panels中的属性 titleAlign更改一下。
创建"packages/my-custom-theme/overrides/panel/Panel.js",写如下代码
[ruby] viewplaincopyprint?
1.Ext.define('MyCustomTheme.panel.Panel',{
2. override:
'Ext.panel.Panel',
3. titleAlign:
'center'
4.});
在 "packages/my-custom-theme/"路径下,运行
[ruby] viewplaincopyprint?
1.sencha package build
这是为了让 "packages/my-custom-theme/build/my-custom-theme.js"包含最新的覆写。
在"theme-demo-app"路径下,运行
[ruby] viewplaincopyprint?
1.sencha app refresh
这是为了覆写主题被包含进正在运行的项目。
现在在"theme-demo-app"路径下,重新构建项目
[ruby] viewplaincopyprint?
1.sencha app build
可以起服务看效果了panelheaders文字居中了~
SASS命名空间
如上所述,SenchaCmd查找文件“sass/var”和“sass/src”相匹配的JavaScript类。
对于主题,在默认情况下,Ext名称空间被认为是顶级名称空间,所以主题的“sass/src/panel/Panel.scss”对应于 Ext.panel.Panel
对于Ext以外的主题名称空间,你必须改变在".sencha/package/app.json"中的名为package.sass.namespace的配置属性
为了统一配置你需要这样写
[ruby] viewplaincopyprint?
1./**
2. * Sass configuration properties.
3. */
4."sass":
{
5. /**
6. * The root namespace to use when mapping*.scss files to classes in the
7. * sass/src and sass/var directories. Forexample, "MyApp.view.Foo" would
8. * map to"sass/src/view/Foo.scss". If we changed this to"MyApp.view" then
9. * it would map to"sass/src/Foo.scss". To style classes outside the app's
10. * root namespace, change this to"". Doing so would change the mapping of
11. * "MyApp.view.Foo" to"sass/src/MyApp/view/Foo.scss".
12. */
13. /**
14. * rgb(38, 38, 38);">"MyApp.view.Foo"