javascript - 网格单元格内的堆叠条形图小部件

Question

我知道，现代 ExtJS 支持真的很棒 widget columns .但是，我缺少的是网格单元格内的水平堆叠条形图。在实践中，这将允许我显示例如每行可能是一个人、一个部门或类似的东西有多少事情正在进行、延迟、推迟等。这就是我想要实现的目标(用 Paint 制作):

如果默认情况下不存在这样的小部件列，我希望有人可以建议如何实现它。

Answer 1

您可以定义自己的组件以用作嵌套在列中的小部件。小部件列的 dataIndex 将绑定(bind)到一个对象，每个阶段的百分比(应该加起来为 100%)看起来像

{
    redPercent: 10,
    orangePercent: 20,
    bluePercent: 30,
    greenPercent: 40
}

然后新定义的组件将使用 tpl 来显示进度条 - 使用 CSS 正确设置百分比宽度。

Ext.define('my.StatusBar', {
    extend: 'Ext.container.Container',

    xtype: 'my-status-bar',
    defaultBindProperty: 'statusCounts',
    config: {
        statusCounts: null
    },

    updateStatusCounts: function (obj) {
        this.getViewModel().set('statusCounts', obj);
    },

    viewModel: {
        data: {
            statusCounts: null
        }
    },

    height: 25,
    layout: {
        type: 'hbox',
        align: 'middle'
    },

    constructor: function (config) {
        config.items = [
            {
                xtype: 'component',
                flex: 1,
                tpl: [
                    '<div style="width:100%; display:table;">',
                    '   <tpl if="redPercent"><div style="width: {redPercent}%; display:table-cell; background-color:red;"></div></tpl>',
                    '   <tpl if="orangePercent"><div style="width: {orangePercent}%; display:table-cell; background-color:orange;"></div></tpl>',
                    '   <tpl if="bluePercent"> <div style="width: {bluePercent}%; display:table-cell; background-color:blue;"></div></tpl>',
                    '   <tpl if="greenPercent"><div style="width: {greenPercent}%; display:table-cell; background-color:green;"></div></tpl>',
                    '</div>'
                ],
                bind: '{statusCounts}'
            }
        ];
        this.callParent(arguments);
    }
});

最后，您会将小部件列配置为

{
    xtype: 'widgetcolumn',
    text: 'Progress',
    dataIndex: 'statusCounts',
    widget: {
        xtype: 'my-status-bar'
    }
}