Showing results for 
Search instead for 
Do you mean 
Community Home Request Access Read Blogs Share Your Ideas Search Community View My Settings
Reply
Highlighted
Copper Super Contributor
Posts: 27
Registered: ‎06-23-2009

Using css class instead of file location for icons in Mobile 2.0?

In 1.2 we used the extJS property of iconCls which allowed us to reference icon file locations with a custom css file.  This saved a lot of hassle with remebering which image files need to be copied up to the AA vfs, but it looks like DOJO doesn't use this property.  The DOJO reference seems to indicate that their property is iconClass but that one doesn't seem to be working either. 

 

Anyone had luck using a class to designate the icon in the new Mobile 2.0?

 

Regards,

 

James.

Highlighted
Copper Super Contributor
Posts: 27
Registered: ‎06-23-2009

Re: Using css class instead of file location for icons in Mobile 2.0?

Okay we figured it out.  We just had to override the appropriate templates.  So for examle if you want to use a css class for your icons on your related items you need to override the relatedTemplate simplate in your ApplicationModule.js with something like this:

 

            //Some customizations require extending the view class.
            //Exted the RelatedItem Template to allow for designation of icon by class
            lang.extend(Sage.Platform.Mobile.Detail, {
                relatedTemplate: new Simplate([
                    '<li class="{%= $.cls %}">',
                    '<a data-action="activateRelatedList" data-view="{%= $.view %}" data-context="{%: $.context %}">',
                    '{% if ($.iconClass) { %}',
                        '<img  class="{%= $.iconClass %} icon" />',
                    '{% } else if ($.icon) { %}',
                        '<img src="{%= $.icon %}" alt="icon" class="icon" />',
                    '{% }  %}',
                    '<span>{%: $.label %}</span>',
                    '</a>',
                    '</li>'
                ])
            });

 

 in our case we used if and else if so that if iconClass property was defined and we've inherited the icon property the iconClass wins and we don't get two icons by accident.

 

The great thing about this is that we now can define all our icons via css and their location will be relative the css file not to the html we happen to be using.

 

Here's the example from our custom.css file:

.icon-invoice-medium
{
    background-image: url('../images/icons/invoice_dollar_24x24.png')
}

 And the final result

sample