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的/视图/主/ 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 /视图/主/ AppMenu.scss

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

您需要在使用＆＃34; sencha app build＆＃34;

更改scss文件后构建应用程序

Answer 2

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

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

默认为：＆＃39;＆＃39;

添加个人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类

Answer 3

我认为我认为乔治先生的建议。如果我想用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

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

3 个答案: