02_核心概念--09_经典工具包主题系统

Ext JS主题

Ext JS默认的可用主题可以用来创建外观整洁、专业的应用。然而，你或许希望使用你自己的样式来满足个人的审美设计，或者一个是满足一个企业级的设计。

以往，为一个应用设计样式意味着创建具有一定规则的样式表，意味着修饰在组件的渲染过程中使用的单独的HTML元素。这种方法会伴随着一些问题出现。第一个你要面对的问题是跨浏览器的样式支持。其次，随着框架的成熟，底层组件元素可能会改变留给你的不愉快的任务，这个任务就是跟踪你与元素结构相关的样式规则的变化。使用Ext JS提供的主题API设计应用中的样式解决了上述所有的问题。

 

使用主题API创建的主题可以在工作区文件夹中的任何应用间共享。这让你设计一次样式便可以方便地在你的应用之间使用多次。

这篇指南列出了主题的系统要求并带领你逐步生成一个简单的工作空间，应用和自定义主题以及特定的为应用设计的样式。

这篇指南将涵盖主题的基础，以如何使用经典工具箱来创建自定义主题为开始。下一步，我们将讨论使用现代工具包创建主题和创建通用程序（包括经典视图和现代视图）的主题之间的不同。最后，我们将介绍Triton主题和由它而新增的灵活性。

关于Ext JS现代工具包6.2及以上版本的特殊情况处理，请查阅我们的现代主题特殊处理（http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/modern_theming.html）。

 

系统要求

Sencha Cmd 6.5+

Java JRE

Ext JS

构建自定义主题

创建工作空间（可选）

生成应用来测试主题

生成自定义主题包和文件结构

配置主题继承

配置全局主题变量

在应用中使用主题

配置组件变量

创建自定义组件UI

IE中的CSS3图片切片效果实现

主题JS重写

修改图片资源

添加自定义实用样式

设计你应用的样式

更改你程序中的主题变量

设计程序中的视图样式

命名空间

样式生成的组织结构

包含标记

在应用之间分享主题

构建主题

Triton主题图标

其它备注

默认组件图片

Ext.button.Button

Ext.panel.Panel

Ext.menu.Menu

Ext.toolbar.Breadcrumb

Ext.tab.Tab

Ext.tab.Bar

Ext.toolbar.Toolbar

从Ext 5升级到Ext 6（经典）