更改網格的彙總行的ExtJS的顏色

我想改變字體以及在grid.I的摘要行的背景顏色已經嘗試得到摘要行如：更改網格的彙總行的ExtJS的顏色

var summaryRow = grid.view.el.down('tr.x-grid-row-summary');

基於的SummaryRow我可以設置我得到的SummaryRow的價值空。可有人請點我糾正方向還是我失去了一些東西的style.But？任何幫助是appreciated.Thanks

來源

2013-06-18 Dev

嘗試grid.down（'Ext.grid.feature.Summary'）或grid.down（'feature.Summary'）。摘要不是一個小部件，而是一個功能，因此我不確定它的xtype查詢。 – Christoph

不過它給空 – Dev

什麼grid.getView（）。getFeature（0） – Christoph

var summaryRow = grid.getView().getFeature(0); 
styleObj = { 
    'background-color': '#c5c5c5' 
}; 
summaryRow.view.el.setStyle(styleObj);

來源

2013-06-18 13:13:23 Christoph

偉大的團隊合作！ – Christoph

你可以使用目前在網格列summaryRenderer函數來顯示特定風格的行。

Ext.create('Ext.grid.Panel', { 
    width: 200, 
    height: 140, 
    renderTo: document.body, 
    features: [{ 
     ftype: 'summary' 
    }], 
    store: { 
     model: 'TestResult', 
     data: [{ 
      student: 'Student 1', 
      mark: 84 
     },{ 
      student: 'Student 2', 
      mark: 72 
     },{ 
      student: 'Student 3', 
      mark: 96 
     },{ 
      student: 'Student 4', 
      mark: 68 
     }] 
    }, 
    columns: [{ 
     dataIndex: 'student', 
     text: 'Name', 
     summaryType: 'count', 
     summaryRenderer: function(value, summaryData, dataIndex) { 
      return "<font color='red'>"+value+"<font>"; 
     } 
    }, { 
     dataIndex: 'mark', 
     text: 'Mark', 
     summaryType: 'average' 
    }] 
});

來源

2013-06-18 12:28:22

的記錄方式做，這將是總結渲染器，用於摘要渲染器將是tdCls或tdAttr性能的最佳方法：

    text: 'Allocation %', 
        xtype: 'numbercolumn', 
        format: '00.00%', 
        dataIndex: 'allocationAmount', 
        summaryType: 'sum', 
        summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) { 

         if (value > 100) 
         { 
          summaryData.tdCls = 'text-warning-high' 
         } else if (value === 100) 
         { 
          summaryData.tdCls = 'text-successful'; 
         } else { 
          summaryData.tdCls = 'text-warning-low'; 
         } 
         return Ext.String.format('Total: {0}%', value); 
        },

您也可以使用tdAttr版本是這樣的：

summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) { 
         if (value > 100) 
         { 
          summaryData.tdAttr = 'style="color: #ff0000"'; 
         } else if (value === 100) 
         { 
          summaryData.tdAttr = 'style="color: green;"'; 
         } else { 
          summaryData.tdAttr = 'style="color: yellow;"'; 
         } 
         return Ext.String.format('Total: {0}%', value); 
        },

注意第一個是使用CSS類，所以您需要定義應用程序ropriate CSS類在你的CSS文件：d

來源

2014-05-27 18:08:29

親愛的@Jake我已經實施了這種調整，但不知何故它不着色！爲什麼它可能是？ –

這是列的代碼段; '{xtype：'currdebitcol'，text：translations.dAmount，summaryType：'sum'，summaryRenderer：function（value，summaryData，dataIndex，rowIndex，colIndex，store，view）{if（value> 100）{summaryData.tdAttr ='style =「color：red;」'; } else if（value === 100）{summaryData.tdAttr ='style =「color：green;」'; } else {summaryData.tdAttr ='style =「color：yellow;」'; } return Ext.String.format（'{0}'，value）; }}，' –

或者，我們可以在特定頁面中使用CSS。

<style> 
    .x-grid-row-summary .x-grid-cell{ 
     background-color: #f00 !important; 
     font-size: x-large !important; 
    } 
</style>

來源

2015-07-10 09:11:48

更改網格的彙總行的ExtJS的顏色

回答

相關問題