javascript - 如何在 extJS 树形面板中显示图像而不是文本

Question

如何在 extJS 树形面板中显示图像而不是文本。

我正在使用拖放特性。我正在使用treeviewdragdrop方法。

现在我想显示一些图像而不是文本。

这是我的代码。

{
            xtype: 'treepanel',
            align: 'stretch',
            rootVisible : false,
            title:'My Tree',
            useArrows: true,
            hideHeaders: true,
            scrollable: true,
            autoScroll: true,
            loadMask: {
                msg: 'Loading'
            },
            copy: true,
            rootVisible: false,
            viewConfig: {
                plugins: {
                    ddGroup: 'grid-to-form',
                    ptype: 'treeviewdragdrop',
                    appendOnly: true,
                    sortOnDrop: true,
                    enableDrag: true,
                    containerScroll: true,
                    allowParentInsert: false,
                    allowContainerDrops: false
                }
            },
        
        store: Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                "text": ".",
                "children": [{
                    "item": "Box",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Date",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Number",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Text",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Field",
                    "editable":true
                }]
            }
        }),
        columns: [{
            xtype: 'treecolumn',
            text: '',
            dataIndex: 'item',

            flex: 2,
            sortable: true
        }]
    }

标签： javascriptextjsextjs6

Answer 1

您可以将渲染器放入树列中；我创建了一个小提琴来展示它作为示例。

{
  xtype: 'treecolumn',
  text: '',
  dataIndex: 'item',
  flex: 1,
  sortable: true,
  renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    return '<img width=50 src="' + value + '"></img>';
  }
}