Smart M.App discussions

Looking for answers in regards to M.Apps, M.App Exchange or M.App Studio? Smart M.App Tech Discussion board is where you can search, ask your questions and assist others by sharing your knowledge. Join the conversation, connect, contribute and share.
Showing results for 
Search instead for 
Do you mean 
Reply
Highlighted
Technical Evangelist
Posts: 29
Registered: ‎01-29-2016

Change icon for new toolbar button

Using the code example: 

05. User Interface

    Adding button to the toolbar

 

gsp.ui.toolbar.add({
    id: "tool-sw",
    title: "SW"
}, function (ret){
    ret.div.onclick = function () {
        gsp.map.pan([-10, -10]);
    }
});

The new toolbar button has a "+" icon. How do you change to a different icon? 

Thanks.

 

 

 

 

Highlighted
Super Contributor
Posts: 301
Registered: ‎02-09-2016

Re: Change icon for new toolbar button

Hi Larry,

 

The app is using Ext framework 6, so you can check this framework for more information. On top of my head, you can declare a icon class in css 'newicon' such as

.newicon

{

background-image: url(....);

}

 

and use it in the code

gsp.ui.toolbar.add({
    id: "tool-sw",
    title: "SW",
    cls: 'newicon'
}, function (ret){
    ret.div.onclick = function () {
        gsp.map.pan([-10, -10]);
    }
});

Kind regards,

Highlighted
Technical Evangelist
Posts: 29
Registered: ‎01-29-2016

Re: Change icon for new toolbar button

Thanks, Bob, but I wasn't able to get it to work. Can you (or anyone) post a working example?

Highlighted
Super Contributor
Posts: 301
Registered: ‎02-09-2016

Re: Change icon for new toolbar button

Hi Larry,

 

Here is an example.

 

gsp.ui.toolbar.add({
    id: "mybtn1",
 
    title: "My Button 1",
    style: "background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1104386/location20x20.png');background-repeat: no-repeat;background-position: center; "
    
}, 
function(ret) {
 
   console.log(ret);
 
  ret.div.onclick = function () {
        gsp.map.pan([10, 10]);
  };
    
  
 
});

 

Add button.png