View Full Version : floating panel has an unchangeable white background

16 May 2012, 12:04 PM

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;',
}) ;

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?


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!

18 May 2012, 6:16 AM
The style config should be deprecated IMO. You should just use CSS and the cls config and do the styling in CSS.

18 May 2012, 6:17 AM
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.

18 May 2012, 6:44 AM
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 ?

18 May 2012, 6:50 AM
Then you should use addCls on the component

19 May 2012, 11:15 PM
I was hoping for a solution to add style properties programmatically, but addCls will work too. Thnx!

28 Feb 2013, 6:51 AM
If floating is deprecated then why are List disclosures floating? Food for thought