Scrollable and Background-Color do not mix

[Deepindera]

Ext.define('GS.view.Home', {
extend:'Ext.form.Panel',
xtype:'homepanel',

config:{


title:'Home',
iconCls:'home',
cls:'home',
url:'index.html',
styleHtmlContent: true,
style:'background-color:red',
},
items:[
{ html:['Hello<br>Again<br>Again<br>Again<br>Again<br>Again<br>Again']},
{
xtype:'button',
text:'ok',
height:'40px',
width:'200px',
style:'margin:8px auto;',
}
]
The background color works only when I add scrollable:false

=====================================================

Update
I just realized that the above scenario is true when using extend:'Ext.form.Panel' but the problem does not exist when extending from Ext.Panel instead

[mitchellsimoens]

Inspect the DOM, make sure there is not an element that is on top that is causing the background to be different that what you would expect. Hint: there is a background on another element.