ExtJS treepanel使用treeviewdragdrop功能时如何显示图片替代文字

实现说明 #

原有treeviewdragdrop拖拽配置不需要调整，仅需修改树列的渲染逻辑即可实现文本替换为图片的需求，改动点如下：

• 可以在TreeStore的节点数据中新增imgSrc字段存储对应图片路径，也可以直接根据现有item字段的值匹配预设的图片映射表
• 给treecolumn添加renderer渲染函数，输出<img>标签替代原有文本，不会破坏树的层级结构和拖拽功能
• 若需要自定义拖拽时的代理显示内容，可以给treeviewdragdrop插件添加dragText配置，默认会直接复用节点渲染后的内容

完整修改后代码 #

{
    xtype: 'treepanel',
    align: 'stretch',
    rootVisible: false,
    title:'My Tree',
    useArrows: true,
    hideHeaders: true,
    scrollable: true,
    autoScroll: true,
    loadMask: {
        msg: 'Loading'
    },
    copy: true,
    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,
        // 新增渲染函数替换文本为图片
        renderer: function(value, metaData, record) {
            // 可根据实际业务替换为自己的图片地址
            const imgMap = {
                'Box': './images/box.png',
                'Date': './images/date.png',
                'Number': './images/number.png',
                'Text': './images/text.png',
                'Field': './images/field.png'
            };
            return `<img src="${imgMap[value]}" alt="${value}" style="height:22px;vertical-align:middle;margin-left: 6px;" />`;
        }
    }]
}

注意事项 #

• 上述代码中的图片路径请替换为你实际项目中的资源路径，也可以直接在Store节点中新增imgSrc字段存储路径，渲染时直接取record.get('imgSrc')即可，适配性更强
• 可以调整img标签的style属性自定义图片大小、边距，适配树节点的高度
• 原有拖拽的所有规则、分组配置完全生效，无需额外调整

内容的提问来源于stack exchange，提问作者David