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