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

我目前正在尝试将自定义样式添加到面板中，下面的代码可以正常工作，但实际上它非常难看，而且不可重用

我应该在哪个文件夹和文件中编写相应的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;',

...

});

---

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

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

默认值为：“”

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

为应用程序生成自定义主题，或将css添加到使用过的主题中。 要创建主题，请阅读以下内容： 在ExtJS6上也是如此

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类分配给它们，我按照乔治先生的建议执行。如果我想用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'
});

---

有关详细信息，请参见这里是创建自定义组件及其样式的示例

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文件后，您需要构建应用程序。请阅读该部分。谢谢，如果您认为它存在，我会再次阅读。为什么不为此组件使用css类？我正在覆盖组件，通过覆盖包/local/myTheme/sass/src/，为组件提供自定义样式，但是我不能覆盖.scss文件中的样式，这就是我的意思。否则，“cls”属性的使用看起来不是很酷，你在代码中对视图进行修改，不是吗？简单地使用cls，你给组件一些css变量，显然如果组件上已经有一些使用过的变量，cls将删除它们，但只有在变量相同的情况下，或者变量将被“合并”关于组件关于覆盖sass的主题，我通常为组件设置一个css类，如果这不起作用，我会设置一个！重要提示。谢谢，我想我已经解释得很糟糕了，这与我想要的正好相反，我想要设计一个组件，并为该组件的所有实例提供通用样式，我怀疑css应该放在哪里（在文件结构中）.@AlejandroMorán第一个例子将使

MyProject.view.main.main

的所有实例看起来像

.MyProject main

，我不确定你的意思，目前为止最好的答案是什么！非常感谢。我怎样才能检测到我应该何时使用！重要条款与否？国际海事组织，

！重要信息

是懒惰的标志。Lee Boonstra在SenchaCon 2015路演上给出了一条经验法则，即你不应该使用

！重要的

条款。如果需要，最好使用嵌套来达到优先级。嵌套较深（=特殊）的条目优先于嵌套较浅的条目。例如，

.x-btn-small.x-btn-default

优先于

.app menu

，但不优先于

.app menu.x-btn-small.x-btn-default

。