How to add a custom CSS file in ExtJs 5?

Question

In ExtJs 4, I included a custom css like this:

<!-- <x-compile> -->
    <!-- <x-bootstrap> -->
        <link rel="stylesheet" href="bootstrap.css">
        <script src="ext/ext-dev.js"></script>
        <script src="bootstrap.js"></script>
    <!-- </x-bootstrap> -->
    <script src="app.js"></script>
<!-- </x-compile> -->
<link rel="stylesheet" href="/custom/css.css" type="text/css" charset="utf-8" />

The fact that the link to the CSS comes after the <x-compile> section makes that it is loaded later and thus rules in custom.css override rules in the compiled extjs theme css.

In ExtJs 5.0, this doesn't work anymore. Despite of including the custom css after the microloader, the theme css is loaded after custom.css:

<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
<link rel="stylesheet" href="/custom/css.css" type="text/css" charset="utf-8" />

How to achieve that custom.css is loaded last in order to override some rules in the ExtJs css file ?

Colin Ramsay · Accepted Answer · 2015-04-01 16:18:29Z

Open app.json and look for the css property. Add your file in there and Sencha CMD will bundle it with the framework CSS. The default one looks like this:

/**
 * List of all CSS assets in the right inclusion order.
 *
 * Each item is an object with the following format:
 *
 *      {
 *          // Path to file. If the file is local this must be a relative path from
 *          // this app.json file.
 *          //
 *          "path": "path/to/stylesheet.css",   // REQUIRED
 *
 *          // Specify as true if this file is remote and should not be copied into the
 *          // build folder. Defaults to false for a local file which will be copied.
 *          //
 *          "remote": false,    // OPTIONAL
 *
 *          // If not specified, this file will only be loaded once, and cached inside
 *          // localStorage until this value is changed. You can specify:
 *          //
 *          //   - "delta" to enable over-the-air delta update for this file
 *          //   - "full" means full update will be made when this file changes
 *          //
 *          "update": ""      // OPTIONAL
 *      }
 */
"css": [
    {
        "path": "bootstrap.css",
        "bootstrap": true
    }
],

My app.json does not have a css property. I think this is because I upgraded from ExtJs 4.2
Thanks. This will lead me to generate a default app to compare my application to a default application.

Collectives™ on Stack Overflow

How to add a custom CSS file in ExtJs 5?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related