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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -