網格單元格內的堆疊條形圖小部件

我知道，現代的ExtJS支持非常精彩的widget columns。但是，我缺少的是網格單元格內的水平堆疊條形圖。在實踐中，這可以讓我顯示例如有多少東西在進行中，延遲，推遲等，每行可能是一個人，一個部門或類似的東西。這是我想才達到什麼（在塗料製造）：網格單元格內的堆疊條形圖小部件

如果這樣的小工具欄默認不存在，我希望有人能告訴我如何實現它。

來源

2016-09-02 Jacobian

你可以使用引導堆積進度條[http://getbootstrap.com/components/#progress-stacked](http:// getbootstrap.com/components/#progress-stacked） –

您可以將自己的組件定義爲要在列中嵌套的小部件。微件列的dataIndex將綁定到對象與每個階段的，看起來像

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

百分比（應爲100％）然後，將新定義的部件將使用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' 
    } 
}

來源

2017-05-04 18:34:15 dearSympho

也許嘗試使用sparklinebar小部件代替，這個可以採用一個不同於progressbar小部件的值數組...... sparklinebar垂直地執行這些小節，但是我知道可以旋轉呈現的canvas元素.. 90deg，就您的情況而言。不知道這是否會工作，只是一個想法..

祝你好運。

來源

2016-09-07 15:07:31 bullettrain

實際上，我使用bootstrap堆疊進度條和列渲染器。但是，感謝分享想法。 – Jacobian

網格單元格內的堆疊條形圖小部件

回答

相關問題