EXTJS changing statusbar background color - Stack Overflow

admin管理员组

文章数量:1125723

I wish to make statusbar background color same with window panel background color using css.

what I found

.x-toolbar{ 
    background-image: url(image/toolbar.gif);
}

i use snapshot of the panel background and save as gif . it work but is this the correct way to do?

I wish to make statusbar background color same with window panel background color using css.

what I found

.x-toolbar{ 
    background-image: url(image/toolbar.gif);
}

i use snapshot of the panel background and save as gif . it work but is this the correct way to do?

• extjs

Share Improve this question Follow asked Jan 9 at 3:58 Charles CandyCharles Candy 1111 bronze badge 1

• Hi, if you are satisfied with an answer, please remember to choose the best answer. I saw that you posted another questions and did not mark any answer. (extjs listeners sub component event) – Dinkheller Commented 2 days ago

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You can set a background color without CSS like this (you can run this in a Sencha Fiddle):

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Panel',
            height: 200,
            dockedItems: [{
                xtype: 'toolbar',
                style: {
                    backgroundColor: 'red'
                },
                items: [{
                    xtype: "button",
                    text: 'Button'
                }]
            }],
            items: [{
               xtype: 'component',
               html: 'Hello world!'
            }],
            renderTo: Ext.getBody()
        });
    }
});

If you prefer CSS, define a custom style:

.my-style {
  background-color: yellow;
}

Set this CSS style like this:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Panel',
            height: 200,
            dockedItems: [{
                xtype: 'toolbar',
                userCls: 'my-style',
                items: [{
                    xtype: "button",
                    text: 'Button'
                }]
            }],
            items: [{
               xtype: 'component',
               html: 'Hello world!'
            }],
            renderTo: Ext.getBody()
        });
    }
});

I would go with transparent for the toolbar, if you want to keep the background image visible.

• if you send an additional image, less data to transfer
• will always stay in place

@example

// ExtJS
xtype: 'toolbar',
cls  : 'transparent'

// css
.x-toolbar.transparent { 
    background-image: transparent;
}

or

xtype: 'toolbar',
style: {
    backgroundColor: 'transparent'
}

本文标签： EXTJS changing statusbar background colorStack Overflow