1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    bshirani is on a distinguished road

      0  

    Default Unanswered: Setting Background image to xtype:list

    Unanswered: Setting Background image to xtype:list


    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.

    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    bshirani is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Use the Chrome or Safari dev tools to check out the DOM. You need to push yourself to learn how to debug things
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    bshirani is on a distinguished road

      0  

    Default


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

    Code:
    <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

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


    Code:
    <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...

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    bshirani is on a distinguished road

      0  

    Default


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