CODEWITHSUNDEEP
extjsextjs5
Bruno Finger
Bruno Finger

Reputation: 2603

How to add custom CSS to view?

I am building an application in ExtJS 5.1 using Sencha Cmd.

I have the following view, located on /Web/app/app/view/guard/apps/Launcher.js:

Ext.define('Web.view.guard.apps.Launcher', {
    extend: 'Ext.button.Button',
    xtype: 'widget.applauncher', 

    scale: 'large',
    border: false,
    icon: 'http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg',

    iconAlign: 'top',
    iconCls: 'squareImg',
    bodyCls: 'launcher',

    handler : function() {
        var app = Ext.create('Web.view.desktop.window.Window', {
            title : this.text
        });
    }
});

And custom CSS defined on /Web/app/sass/src/view/guard/apps/Launcher.scss:

.squareImg {
    width: 64px;
    height: 64px;
}

.launcher {
    padding: 12px;
}

And inspecting the elements using Chrome Developer Tools, I see the components have the classes, but they match with no CSS rules, and I can't find squareImg and launcher classes on the generated CSS. What is wrong?

Upvotes: 0

Views: 1019

Answers (1)

Robert Watkins
Robert Watkins

Reputation: 2206

Sencha CMD combines individual SASS files into one large SASS file. It determines which SASS files to include by parsing your JavaScript files to determine which files are required - the same way it builds the combined JS file.

If you use a custom ExtJS class, but don't "require" it, Sencha CMD won't detect that, and therefore won't include the corresponding SASS files when packaging the CSS.

(One way to detect if that is happening is to be alert for errors in the console about downloading classes synchronously)

Upvotes: 1

Related Questions