Question

I would like to know how to set certain font style (size, font name, etc) for an entire application of ExtJS 4?

I hope there is some single setting which can work for entire application.

Please enlighten !!!

Answer 1

Use CSS code below in your custom CSS file:

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

Your custom CSS file comes after ext-all.css file like this:

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

Of course you can use <style> tag instead.

Edit: (for the comment)

For Panel Titles use this:

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

For Charts it’s different. Because they use Theme for styling. So you can create a theme and use it for charts. To create theme you can do something like this:

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
        });
    }
});

To see all available configs, check the link below and find Theming title:
http://www.sencha.com/learn/drawing-and-charting/

To use ‘MyTheme’ for your charts, you can do this:

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