How to modify Ext.list.Tree item template in ExtJS6

Question

I have a basic Ext.list.Tree like this: https://fiddle.sencha.com/#fiddle/134p

I am trying to modify its child item template so instead of divs they are rendered as links.

By default each item is rendered as:

<li class="x-treelist-item x-treelist-item-leaf x-treelist-item-with-icon" data-componentid="ext-treelistitem-11" id="ext-treelistitem-11" data-recordid="4">
    <div class="x-treelist-row" id="ext-element-63">
        <div class="x-treelist-item-wrap" id="ext-element-59" style="margin-left: 0px;">
            <div class="x-treelist-item-icon x-fa fa-group" id="ext-element-61"></div>
            <div class="x-treelist-item-text" id="ext-element-60">Groups</div>
            <div class="x-treelist-item-expander"></div>
        </div>
    </div>
    <ul class="x-treelist-container"></ul>
</li>

I need to replace this:

<div class="x-treelist-item-text" id="ext-element-60">Groups</div>

with:

<a class="x-treelist-item-text" id="ext-element-60" href="groups">Groups</a>

(value for href is coming from the store record)

Answer 1

There is no template, since this is a lightweight component. You can modify the Ext.list.TreeItem.element property to your needs, using an override. You can try whether

reference: 'textElement',
tag:'a',
cls: Ext.baseCSSPrefix + 'treelist-item-text'

would be enough.

You could also define a derived TreeListItem :

Ext.define('MyTreeItem',{
    extend:'Ext.list.TreeItem',
    xtype:'mytreelistitem',
    element: {
        ... // Copy from Ext source and extend to your needs.
    },
    privates:{
        doNodeUpdate:function(node) {
            this.callParent(arguments);
            // href update code goes here, e.g.:
            var textElement = this.textElement;
            textElement.dom.href = node.data["myHref"]; // or similar
        }
    }
});

and then you can tell your tree to use it:

Ext.create('Ext.list.Tree',{
    config:{
        defaults:{
            xtype:'mytreelistitem'
        }
    }
});