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

Question

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

对应的css class应该写在哪个文件夹和文件里，绑定到这个组件的正确方法是什么？

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

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

你可以使用个人css class添加到你的容器，使用config cls。

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

默认为：''

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

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

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

{
                    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 class 大写，简单的 extjs 在打印组件 html 内容时将分配给那两个classes 而不是一个

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

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

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

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 文件后构建应用程序

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

ExtJS 6 - Where should we write styles?

javascript

css

extjs

web

extjs6