在 "theme-demo-app" 下运行程序：
sencha app build
在浏览器中打开"theme-demo-app/index.html"，你将看到如下
虽然UI是一个方便的方法,可以混合多种外观配置为一个组件,他们不应该被过度使用。因为每次调用UI mixin会生成额外的CSS规则,无偿调用UI mixin会产生过大的CSS文件。
另外重要一点是要记住当调用UI mixin时，是通过其命名参数调用mixin，不是没有参数值的有序列表。尽管SASS都支持这两种形式，最好使用这种形式:
复制代码 代码如下:
@include extjs-component-ui(
$ui-foo: foo,
$ui-bar: bar
);
避免下面的形式：
@include extjs-component-ui(foo, bar);
因为mixin参数的复杂性和数量有可能变动，如新增或删除一个参数，那么后一种调用方式就会失效。
2.3.10修改图像资源
所有必需的图像资源默认是继承父主题的,但在某些情况下,您可能需要覆盖一个图像。这可以通过把所需的图像在"my-custom-theme/resources/images/"下覆盖相同名称的图像。例如,让我们修改弹出窗口组件的信息图标。保存"packages/my-custom-theme/resources/images/shared/icon-info.png"
现在使用自定义图标，修改测试应用程序显示一个消息框。在应用程序窗口的highlight panel 添加items("theme-demo-app/app/view/Viewport.js"):
复制代码 代码如下:
requires: [
...
'Ext.window.MessageBox',
...
],
...
title: 'Highlight Panel',
items: [{
xtype: 'button',
text: 'Show Message',
handler: function() {
Ext.Msg.show({
title: 'Info',
msg: 'Message Box with custom icon',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
}]
构建应用程序，在浏览器中查看：
原始样式：
2.3.11为IE中的CSS3效果切割图像
在许多情况下,当创建新的用户界面时，可能包括背景渐变或圆角。不幸的是,不是所有浏览器都支持CSS3属性,所以我们必须使用图像来弥补。Sencha Cmd能够自动切割这些图片给你。要做到这一点,我们需要告诉Sencha Cmd哪些组件需要切片。这些切片配置文件都包含在每个主题的 "sass/example/"目录下。参考"packages/ext-theme-base/sass/example/"：
"shortcuts.js"--这个文件包含了组件类型的基本配置,可以切割。大多数自定义主题不需要包含"shortcuts.js"文件;除非你的主题包括自定义组件样式。你的样式继承所有的基本样式的快捷键定义,也可以添加额外的快捷定义，需要在 "shortcuts.js"文件中调用Ext.theme.addShortcuts()函数。
"https://www.jb51.net/manifest.js"--这个文件包含能够生成切片图像的组件UI列表。可以从父主题继承所有的清单条目,也可以在"https://www.jb51.net/manifest.js"中通过调用Ext.theme.addManifest()函数添加自己的清单条目。
"theme.html"--这个文件是用来渲染在"https://www.jb51.net/manifest.js"中定义的文件。
为"highlight" panel创建圆角切片， 创建"packages/my-custom-theme/sass/example/manifest.js" ，代码如下：
复制代码 代码如下: