如何正确定制Ext JS树节点？

发布于 2024-12-23 12:26:03 字数 336 浏览 3 评论 0原文

Ext JS 4。我有一个 tree.Panel，我想在每个节点中显示从该节点的模型数据生成的自定义 HTML。我可以通过在加载商店时设置节点的 text 来做到这一点，但这不是模型的工作来进行标记。因此，我创建了一个自定义 Column 来呈现我的 HTML。

我的问题是：除非我从 Ext.tree.Column 派生，否则它不会正确显示（没有轮廓、加号/减号图标等）。如果我这样做，一切都很好，但是 Ext.tree.Column 被标记为 Ext JS 私有。

是否有一些官方支持的 API 可以实现我想要的功能？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空心↖ 2024-12-30 12:26:03

我写了一篇关于如何自定义 ExtJS 4 树面板的博文，希望对您有所帮助：
http://hardtouse.com/blog/?p=24

这个想法是使用渲染器结合大量的 css 魔法：

columns : [{
    xtype : 'treecolumn',
    dataIndex : 'name',
    renderer : function(value, record){
        return Ext.String.format('<div class="tree-font">{0}</div>', value);
    }]

I have written a blog post about how to customize ExtJS 4 tree panel, I hope it will help:
http://hardtouse.com/blog/?p=24

The idea is to use renderer combined with A LOT OF css magic:

columns : [{
    xtype : 'treecolumn',
    dataIndex : 'name',
    renderer : function(value, record){
        return Ext.String.format('<div class="tree-font">{0}</div>', value);
    }]

回复收藏 0 原文

ㄖ落Θ余辉 2024-12-30 12:26:03

谢谢你上面的回答。这是另一个示例，显示了更多格式选项：

columns: [{
    xtype: 'treecolumn',
    dataIndex: 'text',
    flex: 1,
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
        // see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
        var tooltipString = "Hello";
        metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
        return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
    }
}]

您可能还想添加

hideHeaders : true,

到树面板配置中，以删除由于使用树列而出现的“网格”标题。

穆雷

Thanks for your answer above. Here is another example showing a few more options for formatting:

columns: [{
    xtype: 'treecolumn',
    dataIndex: 'text',
    flex: 1,
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
        // see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
        var tooltipString = "Hello";
        metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
        return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
    }
}]

You might also want to add