javascript - ExtJS 6 - Where should we write styles? - Stack Overflow

admin管理员组

文章数量:1327994

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 ponent?.

Note that I'm trying to define a style for every ponent 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;',

...

});

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 ponent?.

Note that I'm trying to define a style for every ponent 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;',

...

});

• javascript
• css
• extjs
• web
• extjs6

Share Improve this question Follow edited Mar 16, 2016 at 13:05 Alejandro Morán asked Mar 10, 2016 at 11:49 Alejandro MoránAlejandro Morán 71911 gold badge1515 silver badges3838 bronze badges 3

• Read the Styling Your Application section. – CD.. Commented Mar 10, 2016 at 11:56
• Thank you, I'll read it again if you think it is there. – Alejandro Morán Commented Mar 10, 2016 at 12:13
• why are you not using a css class for this ponent? – LellisMoon Commented Mar 10, 2016 at 14:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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"

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 ponent'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 ponent 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 ponent 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./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 ponent base cls x-form-field, i added the css class uppercase, simply extjs while Printing the ponent 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

I do what I think Mr George is suggesting. If I want to style one ponent with CSS, I add cls to the ponent 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

本文标签： javascriptExtJS 6Where should we write stylesStack Overflow