floating panel has an unchangeable white background

[jeanluca]

Hello

I have this floating panel which should be completely black. Unfortunately it is completely white :(
Here is my panel:


var panel = Ext.create('Ext.Panel', {
floating: true,
html: '<div style="background-color:black"></div>',
style: 'height:100px;top:10px;background-color:black;',
width:'100%'
}) ;

The white background is set on the .x-panel-inner element which is defined by the following css selector:

.x-panel.x-floating > .x-panel-inner, .x-panel.x-floating .x-scroll-view, .x-panel.x-floating .x-body, .x-msgbox.x-floating > .x-panel-inner, .x-msgbox.x-floating .x-scroll-view, .x-msgbox.x-floating .x-body, .x-form.x-floating > .x-panel-inner, .x-form.x-floating .x-scroll-view, .x-form.x-floating .x-body

So how do I make a floating panel completely black?

cheers
Luca

Update: I get the same floating panels as shown here http://docs.sencha.com/touch/2-0/#!/guide/floating_components (black border and white content area)

Update2: its fixed when using Ext.Component!

[mitchellsimoens]

The style config should be deprecated IMO. You should just use CSS and the cls config and do the styling in CSS.

[mitchellsimoens]

Also note the floating config is deprecated, you should get a warning in the console telling you to use a different config and it lists some.

[jeanluca]

check, floating is depricated (just noticed that), but if you specify left, top, etc you and up with the same css!

The problem is that I'm writing a plugin, so I cannot use css classnames! I have to set the styles directly to the elements, am I right ?

[mitchellsimoens]

Then you should use addCls on the component

[jeanluca]

I was hoping for a solution to add style properties programmatically, but addCls will work too. Thnx!

[hawkinbj]

If floating is deprecated then why are List disclosures floating? Food for thought