如何使用CSS设计ExtJS容器?

Question

我使用了cls、bodyCls、componentCls的ExtJS属性，但没有得到结果。

举个例子：

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

您需要像下面这样应用类(需要将背景应用于表单正文)：

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

工作小提琴

希望这会对您有所帮助/指导。

Answer 2

您可以将这样的 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',