image - sencha 列表背景图像与布局适合

Question

我想为选项卡面板中的列表添加背景。但是一旦我使布局适合，背景就会消失......如果我删除布局，列表就会消失......

该列表似乎仅在布局适合时出现...

有人可以帮忙吗？

请谢谢...

    ****************************  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

试试这种方法，这对我有用。

从您的列表中删除样式：

      style:{
             background:'red',
            backgroundRepeat:'repeat',
            backgroundPosition:'center',
            backgroundSize:'cover'
        }

在index.html中添加 CSS 文件，如下所示：

  <link href="app.css" rel="stylesheet" type="text/css" />

在您的app.css添加以下代码：

 .x-list
{
  background:'red';
}

希望这可以帮助。