PDA

View Full Version : [CLOSED] Tab Panel Icon via JS



sisa
Mar 21, 2013, 3:00 PM
Hi all

I need to set a Tab Panel Icon via Java Script !
Any examples around, I tired it but found no way :-(

Peter

geoffrey.mcgill
Mar 21, 2013, 3:50 PM
Hi,

The .setIcon and .setIconCls functions should help, see

http://docs.sencha.com/ext-js/4-2/#!/api/Ext.tab.Panel-method-setIcon

sisa
Mar 21, 2013, 4:04 PM
Hi,

The .setIcon and .setIconCls functions should help, see

http://docs.sencha.com/ext-js/4-2/#!/api/Ext.tab.Panel-method-setIcon

Thanks Geoffrey
One general Question about the Icons.

How does the 'icon' and 'iconCls' differ and what's the correct icon Name ?
Is it for example 'icon-bulletgreen', 'iconbulletgreen' or 'bulletgreen' ? all this ffrom the JS point of view...

Thanks for your help !

Peter

Daniil
Mar 21, 2013, 4:29 PM
Hi Peter,

The both Icon and IconCls are rendered as an iconCls config of a JavaScript class.

The Icon is an enum and allows to easily choose any existing Ext.Net icon. Also it registers icons' CSS classes automatically.

The IconCls is commonly used to set up a custom icon.

On client side, please use:

iconCls: "#Accept"

Just "#Icon_Name_In_The_Icon_Enum". The "#" will do all the job for you.

Example


Ext.create("Ext.button.Button", {
renderTo: Ext.getBody(),
iconCls: "#Accept"
})

sisa
Mar 22, 2013, 8:16 AM
Hi Daniil

Maybe I'm a bit stupid - or it's because it's Friday :-)

I can't change the Icon...
That's my approach :


function setTabPanelIcon(panelName, count) {
var pnl = Ext.getCmp(panelName);

if (pnl != null) {
pnl.setIconCls("#Bulletred");
}

}

What's wrong ?
Peter

Daniil
Mar 22, 2013, 11:11 AM
The names must coincide including cases. Make the "r" uppercase "R": "#BulletRed".

sisa
Mar 22, 2013, 1:52 PM
The names must coincide including cases. Make the "r" uppercase "R": "#BulletRed".

Ok, that's one step closer !
I can see now the IconCls of the Panel Object is set to 'icon-bulletred' but the panel on the page still show's the old icon. Is there a re-render required ? If so, how ?

Peter

Daniil
Mar 22, 2013, 2:10 PM
Re-rendering should not be required. Could you, please, provide a test case to reproduce?

sisa
Mar 25, 2013, 7:45 AM
Re-rendering should not be required. Could you, please, provide a test case to reproduce?

Good Morning Daniil,
I think we can close this thread ! I had a very strange effect last Friday...
Some when during the day my computer asked me to install windows updates - one of this updates was IE10.
I didn't realize but after that installation, IE appeared twice in my Visual Studio.

This morning, after a restart. IE appears only once in my Studio and the Icon Change works as expected !?

Strange but true, it seems that I has Problems with my PC here - sorry to bother you :-)

Peter

Daniil
Mar 25, 2013, 8:46 AM
Ok! Thank you for the follow-up.