Extjs框架grid组件单列标题下数据从左到右排列实现方法咨询

要实现单列标题下多条数据从左到右排布，核心是自定义列的渲染逻辑，以下是两种常用场景的实现方法：

场景1：仅展示静态内容，无需交互 #

直接为目标列配置renderer属性，将对应数据拼接为带行内布局的HTML片段返回即可，代码示例：

{
    xtype: 'gridcolumn',
    text: '自定义列标题',
    dataIndex: 'dataList', // 对应store中存储多值的数组字段
    width: 400,
    renderer: function(value) {
        // 非数组格式直接返回原值
        if(!Ext.isArray(value)) return value;
        // 构造flex横向布局的HTML，支持自动换行
        let renderHtml = '<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:center;">';
        value.forEach(item => {
            renderHtml += `<span>${item}</span>`;
        });
        renderHtml += '</div>';
        return renderHtml;
    }
}

场景2：子项需要支持点击、悬停等交互 #

使用widgetcolumn组件结合hbox布局实现，交互性和扩展性更强，代码示例：

{
    xtype: 'widgetcolumn',
    text: '自定义列标题',
    width: 400,
    widget: {
        xtype: 'container',
        layout: {
            type: 'hbox',
            align: 'middle',
            defaultMargins: '0 16 0 0'
        },
        listeners: {
            beforerender: function(container) {
                // 获取当前行对应的记录
                const record = container.getWidgetRecord();
                const dataList = record.get('dataList');
                // 动态生成子组件
                Ext.each(dataList, item => {
                    container.add({
                        xtype: 'button', // 可替换为任意Ext组件
                        text: item,
                        ui: 'plain',
                        handler: function() {
                            // 自定义点击逻辑
                            Ext.Msg.alert('提示', `你点击了${item}`);
                        }
                    });
                });
            }
        }
    }
}

注意：如果你的原始数据是多条独立记录而非单条记录的数组字段，需要先对store做聚合处理，把同一分组下的多条数据合并为单条记录的数组属性后，再绑定到grid组件。

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