fonts - 如何在 ExtJS 4 中为整个应用程序设置字体样式？

Question

我想知道如何为 ExtJS 4 的整个应用程序设置某些字体样式（大小、字体名称等）？

我希望有一些单一的设置可以适用于整个应用程序。

请赐教！！！

Answer 1

在您的自定义 CSS 文件中使用以下 CSS 代码：

.x-body {
    font-family: Tahoma;
    font-size: 11px;
    color: #333;
}

您的自定义 CSS 文件位于 ext-all.css文件之后，如下所示：

<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="mycss.css" rel="stylesheet" type="text/css">

当然，您可以使用<style>标签代替。

编辑：（用于评论）

对于面板标题，请使用：

.x-panel-header-text-default,
.x-panel-header-text-default-framed {
    font-family: Tahoma;
    font-size: 11px;
    color: #333;
}

对于图表，情况有所不同。因为他们使用 Theme 进行样式设置。因此，您可以创建一个主题并将其用于图表。要创建主题，您可以执行以下操作：

Ext.define('Ext.chart.theme.MyTheme', {
    extend:'Ext.chart.theme.Base',

    constructor: function() {
        Ext.chart.theme.MyTheme.superclass.constructor.call(this, {
            axisLabelBottom: {
                 fill: '#333',
                 font: 'Tahoma 11px'
            },
            axisLabelLeft: {
                 fill: '#333',
                 font: 'Tahoma 11px'
            },
            // other configs
        });
    }
});

要查看所有可用配置，请查看下面的链接并找到主题标题：
http ://www.sencha.com/learn/drawing-and-charting/

要为您的图表使用“MyTheme”，您可以这样做：

{
    // ...
    xtype: 'chart',
    theme: 'MyTheme',
    // ..
}