Question

我正在使用Sencha Touch 2.2.1。我想显示带有图标的列表项，因为我使用列表的 itemTpl 配置属性。图像呈现为图标但列表项未正确对齐 - 它从下面开始显示。我希望文本从顶部开始 - 它必须与图像水平对齐。我也试过改变'margin'属性，但它似乎没有用。

请在下面找到我的代码：

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}'        
        }
    ]   
  } });

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

Answer 1

在您的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>'

Answer 2

添加css：

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

在js文件中：

itemTpl:'<div><img src="images/Tulips.jpg" class="list-image">{name}</div>'

使用带有列表项的图标

2 个答案: