CODEWITHSUNDEEP
cssextjssencha-touchsencha-touch-2
Supereme
Supereme

Reputation: 2409

Using icons with List items

I am using Sencha Touch 2.2.1 . I want to display list items with icons, for that I am using itemTpl config property of the list. The image is rendered as icon but the list item is not getting aligned properly- it appears starting from much below. I want the text to get started from the top- it must be aligned horizontally with the image. I also tried changing 'margin' property but it didn't seem to work.

Please find my code below:

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

What can be the other way to achieve it?

Upvotes: 1

Views: 1800

Answers (2)

Rathore
Rathore

Reputation: 1988

Add css:

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

in js file:

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

Upvotes: 0

kevhender
kevhender

Reputation: 4405

Add a class to your css, then use that class for your itemTpl:

CSS file: 

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

JS Code:

itemTpl: '<div class="tulip-icon">{name}</div>'

Upvotes: 2

Related Questions