Question

我知道，现代ExtJS支持非常精彩widget columns。但是，我所缺少的是网格单元内的水平堆叠条形图。在实践中，这将允许我显示例如每行可能是某个人，某个部门或类似事物的进展，延迟，推迟等的事情。这就是我想要实现的目标（在Paint中制作）：

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

Answer 1

也许尝试使用sparklinebar小部件，这个可以采用一组数值而不像进度条小部件... sparklinebar垂直地执行条形图，但我知道可以旋转渲染的画布元素.. 90deg，在您的情况下。不确定这是否有用，只是一个想法..

祝你好运。

Answer 2

您可以定义自己的组件，以用作要在列中嵌套的窗口小部件。 widget列的dataIndex将绑定到一个对象，其中每个阶段的百分比（应该加起来为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'
    }
}

网格单元格内的堆积条形图小部件

2 个答案: