ExtJS 6 - Where should we write styles?

Question

I am currently trying to add custom style to a panel and the following code works, but in fact is really ugly and non reusable.

In which folder and file should I write the corresponding css class and what's the correct way to bind it to this component?.

Note that I'm trying to define a style for every component of this type.

Ext.define('MyProject.view.main.Main', {

  extend: 'Ext.container.Container',

  style: 'margin: 0; padding: 0; border: 0; text-align: center; background: #ecf0f1 url(resources/bg.jpg) no-repeat center 0;',

...

});

Answer 1

Here is an example of creating a Custom Component and Its Styling

MyApp/view/main/AppMenu.js

Ext.define('MyApp.view.main.AppMenu', {
    extend: 'Ext.Panel',
    xtype: 'app-menu',
    alias: 'widget.app-menu',
    config: {

        cls: 'app-menu'
    }
}

SCSS File, the path should match the Component Path. MyApp/sass/src/view/main/AppMenu.scss

.app-menu {
    background-color: #fafafa;
    .x-panel-inner {
        border: 0px !important;
    }
    .profile-info {
       font-size: 2em;
    }
}

You need build the app after changing the scss file using "sencha app build"

Answer 2

You can use a personal css class to add to your container, use the config cls.

cls: An optional extra CSS class that will be added to this component's Element. The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.

Defaults to: ''

Adding a personal css class you can overwrite css style properties that you're giving using the style config. If you need to set again these properties you can simply use the component css class again every time you need.

Generate a custom theme for your application or add to the used theme the css. To create a theme read here: https://docs.sencha.com/extjs/5.1/core_concepts/theming.html Same on Extjs 6

Example of cls: my css class uppercase simply set the text to uppercase

{
                    xtype: 'textfield',
                    validator: function(value) {
                        errMsg = "Campo obbligatorio, sostituibile da uno spazio";
                        return (value !== '') ? true : errMsg;
                    },
                    listeners: {
                        beforerender: 'onTextfieldFocus1',
                        change: 'onTextfieldChange'
                    },
                    anchor: '90%',
                    fieldLabel: 'Indirizzo',
                    name: 'Indirizzo',
                    fieldCls: 'x-form-field uppercase',
                    enableKeyEvents: true,
                    enforceMaxLength: true,
                    maxLength: 50
                }

so, to the component base cls x-form-field, i added the css class uppercase, simply extjs while Printing the component html content will assign to that two classes instead of one

In my case i used that css class to set to uppercase all the input fields of a single form, assigning to them the cls class

Answer 3

I do what I think Mr George is suggesting. If I want to style one component with CSS, I add cls to the component itself and use that as the selector in CSS. I like to use the xtype as the CSS classname

Ext.define('MyProject.view.main.Main', {
  xtype: 'myproject-main',    
  extend: 'Ext.container.Container',

  initComponent: function() {
    this.callParent();
    // This is better than cls on the prototype since it won't be overridden
    // If this class is extended or if the caller sets a `cls` config
    this.addClass(this.xtype); 
  }   
});

// CSS
.myproject-main {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  background: #ecf0f1 url(resources/bg.jpg) no-repeat center 0;
}

.myproject-main-instance {
  color: red;
}

If you have additional styling per instance, you could follow the same pattern

var main1 = Ext.widget('myproject-main', {
    cls: 'myproject-main-instance'
});

See Extjs 5： how to make two panel with different style for further information