Question

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

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

是否有一些官方支持的API可以做我想要的？

Answer 1

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

这个想法是使用渲染器结合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);
    }]

Answer 2

感谢您的回答。这是另一个示例，显示了一些格式化选项：

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,

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

默里

如何正确自定义Ext JS树节点？

2 个答案: