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

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' 
     } 
    } 
});