1. #1
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    roshpr is on a distinguished road

      0  

    Default Answered: How to add different ICONS to List Items

    Answered: How to add different ICONS to List Items


    I Need to add a different icons for each list items, I created a class name
    .name {
    @include box-flex(1);
    font-weight: bold;
    font-size: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 0 0 40px;
    background: url(../img/wlassistant.png) no-repeat center left;
    }
    and used the class to be added to the list item
    new Ext.List({
    itemTpl: '<span class="name"><strong>{lblText}</strong></span>
    This embeds the same icon for all the list Items. Can you please guide as to how I can display different icons for each list items.

  2. Hi,
    if your icons as to be dynamics, you have at least two ways to do that:
    • Add a new field (named for example iconUrl} to your list model which will contains your icon path, and then in your tpl you can include it in your tpl with an element like
    Code:
    '<img src="{iconUrl} />'
    • Add a new field (named for example iconCls) to your list model, and then in your css define the background image for every iconCls you are going to use. This is without doubt the better way to achieve that, because you can include inline images in your CSS limiting the server-side requests. In the same way, to include the iconCls in your tpl ,you can do it like follows:
    Code:
    '<div class="{iconCls}"></div>'
    Hope this helps.

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi,
    if your icons as to be dynamics, you have at least two ways to do that:
    • Add a new field (named for example iconUrl} to your list model which will contains your icon path, and then in your tpl you can include it in your tpl with an element like
    Code:
    '<img src="{iconUrl} />'
    • Add a new field (named for example iconCls) to your list model, and then in your css define the background image for every iconCls you are going to use. This is without doubt the better way to achieve that, because you can include inline images in your CSS limiting the server-side requests. In the same way, to include the iconCls in your tpl ,you can do it like follows:
    Code:
    '<div class="{iconCls}"></div>'
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    roshpr is on a distinguished road

      0  

    Default


    Thanks a lot, This solution helps.

    Quote Originally Posted by andreacammarata View Post
    Hi,
    if your icons as to be dynamics, you have at least two ways to do that:
    • Add a new field (named for example iconUrl} to your list model which will contains your icon path, and then in your tpl you can include it in your tpl with an element like
    Code:
    '<img src="{iconUrl} />'
    • Add a new field (named for example iconCls) to your list model, and then in your css define the background image for every iconCls you are going to use. This is without doubt the better way to achieve that, because you can include inline images in your CSS limiting the server-side requests. In the same way, to include the iconCls in your tpl ,you can do it like follows:
    Code:
    '<div class="{iconCls}"></div>'
    Hope this helps.

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Default


    How to use the pictos icons loaded by the sass template in a list ? Surely this is possible without the above need to create a new class.

    {
    xtype:'list',
    styleHtmlContent:true,
    iconMask: true,
    itemTpl: '<div><div class="x-button-icon market" style="width:20px;height:20px;"></div><div>{location}</div></div>',
    store:locationStore
    }

    see how im trying to get the native pictos icons to work - just it dont work

  6. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    39
    Answers
    3
    Vote Rating
    3
    Rhoover is on a distinguished road

      0  

    Default


    There's only a certain number of pictos included for rendering by default. Market is not one of them . If you want to include others, you'll have to add

    Code:
    
    @include pictos-iconmask('whateverthenameis');
    at the top of your .scss

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      1  

    Default


    I should have specified that markets was indeed an icon we added ourselves in the scss as

    @include pictos-iconmask('market');

    it works as a tabbar icon so I know its there I just dont know how to make it work as part of a template for a list item.
    Thanks

  8. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Answers
    6
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Default


    put it another way in a basic panel how can I show an icon class ? or a single icon visible as an image that can be scaled.

Thread Participants: 3

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar