Gestapelte Balkendiagramm Widget in einer Gitterzelle

Question

Ich weiß, dass moderne ExtJS wirklich wunderbar widget columns unterstützt. Was mir jedoch fehlt, ist ein horizontal gestapeltes Balkendiagramm innerhalb einer Gitterzelle. In der Praxis würde es mir erlauben, beispielsweise zu zeigen, wie viel von etwas in Arbeit ist, verzögert, aufgeschoben usw. für jede Zeile, die eine Person, eine Abteilung oder etwas Ähnliches sein kann. Dies ist, was ich (hergestellt in der Farbe) achive wollen:

Wenn ein solches Widget Spalte nicht standardmäßig vorhanden ist, ich hoffe jemand raten kann, wie es zu implementieren.

Answer 1

Sie könnten eine eigene Komponente definieren, die als Widget zum Verschachteln in der Spalte verwendet wird. Die data des Widgets Säule wäre auf ein Objekt binden, wobei der Prozentsatz jeder Stufe (die bis zu 100% addieren sollen), die wie

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

Dann wird die neu definierte Komponente den Fortschritt würde verwenden eine tpl sieht anzuzeigen bar - Verwenden Sie CSS, um die prozentualen Breiten richtig einzustellen.

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); 
    } 
}); 

Und schließlich würden Sie das Widget Spalte als

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

Answer 2

Vielleicht versuchen Sie mit der Sparklinebar Widget stattdessen, diese kann eine Reihe von Werten im Gegensatz zu Progressbar Widget ... Sparklinebar macht die Balken vertikal, aber ich weiß, man kann das gerenderte Canvas Element drehen .. 90deg, in Ihrem Fall. Nicht sicher, ob das funktioniert, nur eine Idee ..

Viel Glück.