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 に答える