Как создать ExtJS-контейнер с помощью CSS?

Question

Я использовал ExtJS свойства cls, bodyCls, componentCls но не получая результат.

Для примера:

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;
}

Рабочая скрипка

Надеюсь, что это поможет / поможет вам.