Question

我有一个像这样的基本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的值来自商店记录）

Answer 1

没有模板，因为这是一个轻量级组件。您可以使用覆盖修改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'
        }
    }
});

如何在ExtJS6中修改Ext.list.Tree项模板

1 个答案: