sencha list background image with layout fit - image

Question

i want to add a background to a list that is in a tab panel. but as soon as i make the layout fit, the background disappears...if i remove layout, the list disappears..
the list only seems to appear when the layout is fit...
can any one help out?
plz thanks...
**************************** Bollist.js **********************
Ext.define('tabla.view.Bollist',
{
extend:'Ext.Panel',
xtype:'Bollist',
config:{
title:'Bols',
iconCls:'music2',
layout:'fit',
items:[
{
xtype:'list',
store:'BolStore',
itemTpl:'{name}'
}
]
}
});
*************** Main.js **************
Ext.define("tabla.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.dataview.List'
],
config: {
tabBarPosition: 'bottom',
items: [
{
style:{
backgroundImage:'url(resources/images/bg.png)',
backgroundRepeat:'repeat',
backgroundPosition:'center',
backgroundSize:'cover'
},
xtype:'home'
},
{
style:{
background:'red',
backgroundRepeat:'repeat',
backgroundPosition:'center',
backgroundSize:'cover'
},
xtype:'Bollist'
}
]
}
});
Ext.define('tabla.store.BolStore',{
extend:'Ext.data.Store',
config:
{
model:'tabla.model.Bol',
data:[
{ name: 'Na/Ta' },
{ name: 'Ti' },
{ name: 'Tin' },
{ name: 'Ri'},
{ name: 'Ge' },
{ name: 'Ka/Kat'},
{ name: 'Dha'},
{ name: 'Dhi'},
{ name: 'Dhin'},
{ name: 'Toon'}
]
}
});

Answer 1

Try this approach this is working for me.
Remove style from your list :
style:{
background:'red',
backgroundRepeat:'repeat',
backgroundPosition:'center',
backgroundSize:'cover'
}
Add CSS file in your index.html like this :
<link href="app.css" rel="stylesheet" type="text/css" />
In your app.css add the following code :
.x-list
{
background:'red';
}
Hope this helps.