css - 如何使用 CSS 设计 ExtJS 容器？

Question

我使用了 , 的属性，ExtJS但cls没有得到结果。bodyClscomponentCls

例如：

Ext.create('Ext.form.Panel', {
    renderTo: document.body,
    title: 'User Form',
    height: 350,
    width: 300,
    cls: 'form',
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'firstName'
    }, {
        fieldLabel: 'Last Name',
        name: 'lastName'
    }, {
        xtype: 'datefield',
        fieldLabel: 'Date of Birth',
        name: 'birthDate'
    }]
});

现在CSS：

.form {
    background-color:orange !important;
}

我想得到背景颜色橙色，但我没有得到我想要的结果。

任何帮助将不胜感激

Answer 1

您可以将这样的 css 添加到面板配置中，

就像bodyStyle: 'background: orange !important',在您的面板中一样

Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
cls: 'form',
bodyStyle: 'background: orange !important',
bodyPadding: 10,
defaultType: 'textfield',

Answer 2

您需要应用如下类（需要将背景应用到表单主体）：

.form .x-panel-body-default {
    background-color:orange !important;
}

工作小提琴

希望这会帮助/指导你。