CODEWITHSUNDEEP
extjs
Silver Lora
Silver Lora

Reputation: 107

Styling checkbox added to header

I have a grid panel with a checkbox added in its header. How can I stylize the checkbox?

Ext.define('MyApp.view.SalesTour', {
    extend: 'Ext.grid.Panel',
    controller: 'salestour',
    title: 'List of SalesTour',
    iconCls: 'x-fa fa-handshake-o',
    store: 'MyApp.store.SalesTourStore',
    columnLines: true,

    header: 
    {
        xtype: 'header',
        titlePosition: 0,
        defaults: {
            margin: '0 10px'
        },
        items: [
        {
            xtype: 'checkbox',
            //labelStyle: 'color: #FFFFFF',
            //style: 'color: #FFFFFF',
            boxLabel: 'Hide converted',
            name: 'hideConverted',
            inputValue: true,
            checked: true
        }],
        listeners: {
            beforerender: 'onBeforeHeaderRender'
        }
    },

    columns: [
    {
    ...
    ...

I tried using labelStyle and style properties unsuccessfully... I would expect to see the checkbox and its label of white color.

Some suggestion, please? What can I do?

Thanks a lot!!!!

Upvotes: 0

Views: 205

Answers (1)

DerKorb
DerKorb

Reputation: 702

You could add css classes to the checkbox.

For Example

You could create a css class

   .boxLabel-font-white {
      color: white;
   }

And add the class to the config boxLabelCls to color the boxLabel for the checkbox.

https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.field.Checkbox.html#cfg-boxLabelCls

There are many more cls-configs you could use: https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.field.Checkbox.html

I hope that helps

Upvotes: 1

Related Questions