Hello @lbrohan!
You actually have a good point in using the tree panel. But as you noted, the arrows (actually, plus/minus) signs stick to the left.
But this is all a matter of setting up the HTML template a cell is composed from.
Here I have just moved the
<div /> down to the end of the template and added an inline style (
float: right) to stick it to the right wall of the cell box. The change from original is only and only the last two lines of the
cellTpl definition (I didn't really need to move it down, but this helps clarity).
Ext.define('customTreeCellTpl', {
override: 'Ext.tree.Column',
cellTpl: [
'<tpl for="lines">',
'<div class="{parent.childCls} {parent.elbowCls}-img ',
'{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"></div>',
'</tpl>',
'<tpl if="checked !== null">',
'<div role="button" {ariaCellCheckboxAttr}',
' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"></div>',
'</tpl>',
'<tpl if="glyph">',
'<span class="{baseIconCls}" ',
'<tpl if="glyphFontFamily">',
'style="font-family:{glyphFontFamily}"',
'</tpl>',
'>{glyph}</span>',
'<tpl else>',
'<tpl if="icon">',
'<img src="{blankUrl}"',
'<tpl else>',
'<div',
'</tpl>',
' role="presentation" class="{childCls} {baseIconCls} {customIconCls} ',
'{baseIconCls}-<tpl if="leaf">leaf<tpl else><tpl if="expanded">parent-expanded<tpl else>parent</tpl></tpl> {iconCls}" ',
'<tpl if="icon">style="background-image:url({icon})"/><tpl else>></div></tpl>',
'</tpl>',
'<tpl if="href">',
'<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
'<tpl else>',
'<span class="{textCls} {childCls}">{value}</span>',
'</tpl>',
'<div style="float: right" class="{childCls} {elbowCls}-img {elbowCls}',
'<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"></div>'
]
});
You will want then to fiddle with whatever that
{expanderCls} resolves to, as well as the CSS class it is switched to when expanded/collapsed to show the character you want (and even animate it!) as the expand/collapse happens.
There's not much more delving from here, you'd need to watch what changes by using your browser's DOM explorer (in "F12" developer tools).
Of course, if you need further help let us know.
Notice: Ext.NET 4 reached end of production, so the above solution was tested against Ext.NET 5. It is very likely to work with Ext.NET 4 but in case it doesn't, we suggest you to consider upgrading.
