ExtJS 6 - 我们应该在哪里写样式？

Question

我目前正在尝试向面板添加自定义样式，并且以下代码有效，但实际上确实很难看且不可重用。

我应该在哪个文件夹和文件中编写相应的css类以及将其绑定到该组件的正确方法是什么？。

请注意，我正在尝试为这种类型的每个组件定义一个样式。

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

这是一个创建自定义组件及其样式的示例

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 文件，路径应与组件路径匹配。 MyApp/sass/src/view/main/AppMenu.scss

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

您需要在使用“sencha app build”更改 scss 文件后构建应用程序

Answer 2

我按照乔治先生的建议去做。如果我想用 CSS 为一个组件设置样式，我将 cls 添加到组件本身并将其用作 CSS 中的选择器。我喜欢使用 xtype 作为 CSS 类名

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;
}

如果每个实例都有其他样式，则可以遵循相同的模式

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

更多信息请见Extjs 5： how to make two panel with different style

Answer 3

您可以使用个人 css 类添加到您的容器中，使用配置 cls。

分类： 一个可选的额外 CSS 类，将添加到该组件的元素中。该值可以是字符串、由空格分隔的字符串列表或字符串数​​组。这对于使用标准 CSS 规则向组件或其任何子组件添加自定义样式很有用。

默认为：''

添加个人 css 类，您可以使用样式配置覆盖您提供的 css 样式属性。 如果您需要再次设置这些属性，您可以在每次需要时再次使用组件 css 类。

为您的应用程序生成自定义主题或将 css 添加到使用的主题中。 要创建主题，请在此处阅读：https://docs.sencha.com/extjs/5.1/core_concepts/theming.html 在 Extjs 6 上也是如此

cls 示例： 我的 css 类大写只是将文本设置为大写

{
                    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
                }

所以，对于组件库 cls x-form-field，我添加了大写的 css 类，只需 extjs，而打印组件 html 内容将分配给这两个类而不是一个

在我的例子中，我使用该 css 类将单个表单的所有输入字段设置为大写，并为它们分配 cls 类