Как изменить шаблон элемента Ext.list.Tree в ExtJS6

У меня есть базовый Ext.list.Tree, например: https://fiddle.sencha.com/#fiddle/134p

Я пытаюсь изменить шаблон дочернего элемента, чтобы вместо div они отображались как ссылки.

По умолчанию каждый элемент отображается как:

<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>

Мне нужно заменить это:

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

с:

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

(значение для href берется из записи магазина)


extjs extjs6
person serg    schedule 09.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Шаблона нет, так как это легковесный компонент. Вы можете изменить Ext.list.TreeItem.element в соответствии с вашими потребностями, используя переопределение. Вы можете попробовать ли

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

было бы достаточно.

Вы также можете определить производный 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
        }
    }
});

а затем вы можете указать своему дереву использовать его:

Ext.create('Ext.list.Tree',{
    config:{
        defaults:{
            xtype:'mytreelistitem'
        }
    }
});
person Alexander    schedule 09.02.2016
comment
Спасибо, но я не уверен, как переопределить элемент дерева из списка деревьев. Также есть ли способ указать ему использовать значение записи как href? - person serg; 10.02.2016