css - Using icons with List items -
i using sencha touch 2.2.1 . want display list items icons, using itemtpl config property of list. image rendered icon list item not getting aligned properly- appears starting below. want text started top- must aligned horizontally image. tried changing 'margin' property didn't seem work.
please find 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 other way achieve it?
add class css, use class 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>'
Comments
Post a Comment