View Full Version : How can I change the margin color?

26 Jul 2012, 4:20 AM

I would like to change the color of the margin, because here it's white :


It's to have a space between buttons.

Thanks in advance !

26 Jul 2012, 4:34 AM
I think you all you need to do is set the background color of the parent container. Can you post a code snippet which includes the parent container?

If the parent container is a toolbar, you can do a simple style override to change the background color:

xtype: 'toolbar',
dock: 'top',
style: {
background: 'red'

26 Jul 2012, 4:41 AM
That's not changing the margin color, the margin comes from the button :

Ext.define('DSK.view.desktopSouth.ButtonTaskbar', {
extend: 'Ext.button.Button',
alias: 'widget.buttonTaskbar',

margin: '0 2 0 0'

26 Jul 2012, 4:59 AM
The problem may have something to do with the parent container which houses the buttons or a CSS issue.

Note that this works as expected for me, where I set an orange background to make things stand out:

Ext.create('Ext.window.Window', {
height: 300,
layout: 'fit',
title: 'Buttons with Margins',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
style: {
background: 'orange'
items: [{
text: 'Button 1',
margin: '0 20 0 0'
text: 'Button 2',
margin: '0 20 0 0'
width: 300

26 Jul 2012, 5:17 AM
In fact the buttons are on a panel who is on the taskbar :

Ext.define('DSK.view.desktopSouth.Taskbar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.taskbar',

region: 'south',
items: {
xtype: 'panel',
border: false,
itemId: 'panelButton'

26 Jul 2012, 6:47 AM
As a fairly simple test, try adding the buttons directly to the toolbar, without using a child panel. This will at least let you know if the child panel is the culprit.