Виджет в виде сетки в ячейке сетки

Question

Я знаю, что современные ExtJS поддерживает действительно замечательные widget columns. Однако то, что мне не хватает, представляет собой горизонтальную стеклянную гистограмму внутри ячейки сетки. На практике это позволило бы мне показать, например, сколько чего-то происходит, откладывается, откладывается и т. Д. За каждую строку, которая может быть человеком, отделом или чем-то подобным. Это то, что я хочу для того чтобы достигнуть (сделано в Paint):

Если такой столбец виджет не существует по умолчанию, я надеюсь, что кто-то может посоветовать, как его реализовать.

Answer 1

Вы можете определить свой собственный компонент, который будет использоваться в качестве виджета для размещения в столбце. dataIndex столбца виджета будет связываться с объектом с процентом каждого этапа (который должен добавить до 100%), который выглядит как

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

Затем вновь определенный компонент будет использовать TPL для отображения хода bar - используя 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' 
    } 
} 

Answer 2

Возможно, попробуйте использовать виджет sparklinebar, вместо этого этот массив может принимать массив значений, в отличие от виджета progressbar ... sparklinebar делает бары вертикально, но я знаю, что можно повернуть визуализированный элемент холста. 90deg, в вашем случае. Не уверен, что это сработает, просто идея.

Удачи.