PDA

View Full Version : Is there a way to set the background color of a spacer?



bweiler
9 Dec 2011, 4:50 PM
I'm using a spacer between horizontal panels in a container. I would like to change the color of the spacer to make it more subtle. Here's my code. I tried using the style property and setting the background-color, but that didn't work.

Thanks,

Bruce

BTW, I was amazed when this worked as expected. I had only used the spacer for buttons before.



Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
requires: [],


config: {
layout: 'hbox',
items: [
{
xtype: 'panel1view',
flex: 1,
},
{
xtype: 'spacer',
width: 3,
},
{
xtype: 'panel2view',
flex: 1,
}
]
}
});

rdougan
9 Dec 2011, 9:11 PM
Style works fine for me:


var container = Ext.create('Ext.Container', {
layout: 'hbox',
fullscreen: true,
items: [
{
html: 'panel1view',
flex: 1,
},
{
xtype: 'spacer',
style: 'background-color:red',
width: 3,
},
{
html: 'panel2view',
flex: 1,
}
]
});

bweiler
9 Dec 2011, 11:54 PM
I tried it and it didn't work until I moved style before width. Then it worked as expected.

If style is listed after width, the spacer disappears for some reason.

This works:

{
xtype: 'spacer',
style: 'background-color:red',
width: 3,
},

This doesn't:

{
xtype: 'spacer',
width: 3,
style: 'background-color:red',
},

worldblender
23 Feb 2012, 2:42 PM
Does this still work for anyone? It seems to have broken for me around Beta 3...