Icon issue

[Riaz]

I am working on “TabPanel”. I have “xyz.png” icon. How do I add my custom icon in a Tab?

Suppose, I have following code which is working fine. I want to display “xyz.png” instead of “iconCls: 'Setting'”. How do I do?



{
fullscreen: true,
layout: 'card',
iconMask: true,
iconCls: 'settings', // What to add xyx.png icon instead of 'settings'
title: 'Setting',
items: [{
xtype: 'container',
style: { background: 'white none', color: 'black' },
html: "<br/> <h1 align ='center'><b> This is Setting Page </b></h1> <br/> <h6 align ='center'> <small>Under construction ... </small></h6> "
}]

}

[busybee]

Try the code below.
icon: 'xyx.png'


I am working on “TabPanel”. I have “xyz.png” icon. How do I add my custom icon in a Tab?

Suppose, I have following code which is working fine. I want to display “xyz.png” instead of “iconCls: 'Setting'”. How do I do?



{
fullscreen: true,
layout: 'card',
iconMask: true,
icon: 'xyx.png',
//iconCls: 'settings', What to add xyx.png icon instead of 'settings'
title: 'Setting',
items: [{
xtype: 'container',
style: { background: 'white none', color: 'black' },
html: "<br/> <h1 align ='center'><b> This is Setting Page </b></h1> <br/> <h6 align ='center'> <small>Under construction ... </small></h6> "
}]

}

[Riaz]

Thanks for your reply. I tried with your code but failed.
First I have added 'xyx.png' in the same .js folder and have modified my code according your suggestion. It is not working. Did i do any mistake?

[blessan]

Add another icon class and put your image as background. U might have to play a bit with the masking.

[Riaz]

It will be great if it is possible to give me sample code?

[blessan]

the thing is Ive only used the pictos that come along with sencha. If u are using that alll u have to do is make a css class with background pointing to there image. And add that class to the js as iconCls. Im not sure about custom images.