我想知道如何为 ExtJS 4 的整个应用程序设置某些字体样式(大小、字体名称等)?
我希望有一些单一的设置可以适用于整个应用程序。
请赐教!!!
在您的自定义 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',
// ..
}