Sencha app build and chart CSS

Question

Hi guys I have been using sencha cmd to create an app using "sencha generate app ...". Then I wanted to use charts, so I modified the app.json file and added this:

    /**     
     * The list of required packages (with optional versions; default is "latest").
     *
     * For example,
     *
     *      "requires": [
     *          "sencha-charts"
     *      ]
     */
    "requires": [
        'sencha-charts'
    ]

So I can display charts well, except that I dont have the css loaded too. I could add a <link rel="stylesheet"...> pointing to the css file for charts (in my case ext-charts-all.css). But I don't find this solution correct. Any guesses on how to build a sencha app using sencha cmd with charts AND css ?

Thanks a lot !

Above your requires entry you should have something like: "theme": "ext-theme-crisp", this will make sencha command build the sencha-charts with the apropriate theme for your project. Notice that you should add the "requires" : "sencha-charts" with double quotes and not single quotes like you posted. — Guilherme Lopes
You were right about the double quotes I guess, beause I rebuild it and css is loading fine now ;) ! God bless you, thanks a lot ! — JkSuf

Jacob Jacob · Accepted Answer · 2015-01-28T16:24:09

Double Quotes are the way here, JSON string formatting when you are using a requires

You will need to rebuild the application - sencha app refresh (or build),

That should pull in your dependent css files, if you ever want to add additional css resources you can do them in the app.json file

    /**
 * List of all CSS assets in the right inclusion order.
 * Each item is an object with the following format:
 *      {
 *          "path": "path/to/item.css" // Path to file, if local file it must be relative to this app.json file
 *          "remote": true             // (Optional)
 *                                     // - Defaults to undefined (falsey) to signal a local file which will be copied
 *                                     // - Specify true if this file is a remote file which will not to be copied
 *          "update": "delta"          // (Optional)
 *                                     //  - If not specified, this file will only be loaded once, and
 *                                     //    cached inside localStorage until this value is changed to either one below
 *                                     //  - "delta" to enable over-the-air delta update for this file
 *                                     //  - "full" means full update will be made when this file changes
 *
 *      }
 */

Sencha app build and chart CSS

1 Answers