1

我正在使用 Sencha Touch 2.2.1 。我想显示带有图标的列表项，因为我正在使用列表的itemTpl配置属性。图像呈现为图标，但列表项未正确对齐 - 它从下方开始出现。我希望文本从顶部开始 - 它必须与图像水平对齐。我还尝试更改“保证金”属性，但似乎没有用。

请在下面找到我的代码：

Ext.define('BBraunSencha.view.ListPanel',{
extend: 'Ext.Panel',
xtype: 'listpanel',
config:{
    layout:{
        type: 'vbox',
        align: 'stretch'
    },
    items:[
        {
            xtype: 'label',
            html: '<div style="margin-left: 20px;">List one</div>'
        },{
            xtype: 'list',
            flex: 1,
            ui:'round',
            scrollable: true,
            data:[
                { name: 'item1', price:'2000',in_stock : 'no'},
                { name: 'item2', price: '3000',in_stock :'yes'}
            ],
            itemTpl: '<img src="images/Tulips.jpg" style="height: 50px;width: 50px;display:inline-block;margin-right:50px;"/>{name}'        
        }
    ]   
  } });

实现它的另一种方法是什么？

4

2 回答 2

2

向您的 css 添加一个类，然后将该类用于您的itemTpl：

CSS 文件：

.tulip-icon {
    background-image: url(images/Tulips.jpg);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    padding-left: 50px;
}

JS代码：

itemTpl: '<div class="tulip-icon">{name}</div>'
于 2013-10-07T11:53:03.463 回答
0

添加CSS：

.list-image{
  height:20px;
  width:20px;
  float: left;
}

在 .js 文件中：

itemTpl:'<div><img src="images/Tulips.jpg" class="list-image">{name}</div>'
于 2013-10-09T08:29:40.270 回答