Setting Background image to xtype:list

[bshirani]

i am trying to set a background image to a list...i can get it working with panel. but it does not work with list.

Bollist.js

Ext.define('tabla.view.Bollist',
    {
        extend:'Ext.Panel',
        xtype:'Bollist',
        config:{
            title:'Bols',
            iconCls:'music2',
            layout:'fit',
            styleHtmlContent:true,
            scrollable:{
                direction:'vertical'
            },
            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:{
                    backgroundImage:'url(resources/images/bg.png)',
                    backgroundRepeat:'repeat',
                    backgroundPosition:'center',
                    backgroundSize:'cover'
                },
                xtype:'Bollist'
            }
        ]
    }
});

Help appreciated please... I need to submit my assignment.

[mitchellsimoens]

What do you mean?

but it does not work with list

Did you inspect the DOM to see if the List has it's own styles that could prevent it from showing your style?

[bshirani]

If i change the xtype of the item in Bollist.js from list to panel....the background image shows but the list disappears...if i make it list then the list shows but the background disappears.

please find my code attached...i'm not a professional programmer.

tabla.txt

[mitchellsimoens]

Use the Chrome or Safari dev tools to check out the DOM. You need to push yourself to learn how to debug things

[bshirani]

This is one of the tabs in which the background shows. this is xtype panel.

<div class="x-container x-panel x-layout-card-item x-item-hidden" id="ext-home-1" style="background-image: url(http://localhost/323/tabla/resources/images/bg.png); background-size: cover; display: none !important; background-position: 50% 50%; background-repeat: repeat repeat; ">

this is for the list in which the background doesnt work

<div class="x-container x-panel x-layout-card-item" id="ext-Bollist-1" style="">

and this

<div class="x-container x-list-normal x-list x-list-ungrouped x-layout-fit-item" id="ext-list-1">

i tried editing the divs for the list by adding the same style as the first for the background. but as usual the list disappears. and the background still doesnt show up...

[jay@moduscreate.com]

Why would you even want to do this? I've never seen an app that had a special background image for a list. Color maybe. image? no.

[bshirani]

i want the app to have a uniform look...