PDA

View Full Version : Glyphs instead of icons for tree node in 4.2.1



dwils
31 May 2013, 8:25 AM
Anyone able to use glyphs for tree nodes instead of icons?

slemmon
2 Jun 2013, 9:06 PM
Tree nodes don't support glyphs today, but I know that that's been requested formally for consideration in a future framework build.

Misiu
1 Oct 2014, 10:30 PM
@slemmon any news on this?
are glyphs still only "considered in a future framework build" or will they be finally officially supported?

slemmon
15 Oct 2014, 11:28 PM
There is interest from engineering to extend glyph support to treepanel nodes, but it's still in feature request discussions phase at this stage.

Misiu
16 Oct 2014, 10:48 PM
There is interest from engineering to extend glyph support to treepanel nodes, but it's still in feature request discussions phase at this stage.

Thanks for response, hopefully full glyphs support will be added to other places too.

dajester2008
15 Jun 2015, 10:19 AM
For what it's worth, you can extend the Ext.tree.Column class and provide it a custom cellTpl that writes out a glyph instead of an img tag...

EPV
18 Jun 2015, 12:30 PM
I use this override to make iconfonts work with Ext JS 4:


Ext.define('MyApp.overrides.tree.Column', {
override: 'Ext.tree.Column',

/* Changed img tag to div - for IconFonts to work */
cellTpl: [
'<tpl for="lines">',
'<div class="{parent.childCls} {parent.elbowCls}-img ',
'{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>"></div>',
'</tpl>',
'<div class="{childCls} {elbowCls}-img {elbowCls}',
'<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>"></div>',

'<tpl if="checked !== null">',
'<input type="button" role="checkbox" <tpl if="checked">aria-checked="true" </tpl>',
'class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"/>',
'</tpl>',

'<span class="{childCls} {baseIconCls} ',
'{baseIconCls}-<tpl if="leaf">leaf<tpl else>parent</tpl> {iconCls}"',
'<tpl if="icon">{icon}</tpl>"></span>',
'<tpl if="href">',
'<a href="{href}" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
'<tpl else>',
'<span class="{textCls} {childCls}">{value}</span>',
'</tpl>'
]
});

Good luck / E