How to design ExtJS Container using CSS?

Question

I have used the ExtJS properties of cls, bodyCls, componentCls but not getting the result.

For an example:

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'
    }]
});

Now CSS:

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

I wanted to get background color orange but I am not getting the result what I want.

ANY HELP WOULD BE GREAT APPRECIATED

score 1 · Answer 1 · answered Aug 04 '18 at 12:58

1

You need to apply class like below (need to apply background to the body of form):

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

Working Fiddle

Hope this will help/guide you.

answered Aug 04 '18 at 12:58

Rohit Sharma

1,402
9
20

Thank you so much for your answer @rohit. But one thing How do you get or identified the .x-panel-body-default. I mean How shall you get the default ExtJS default CSS classes. – Dipankar BARUA Aug 05 '18 at 00:24

score 1 · Answer 2 · answered Aug 14 '18 at 05:34

You can add css like this to Panel config,

Like bodyStyle: 'background: orange !important', in your panel

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',

How to design ExtJS Container using CSS?

2 Answers2