Изменения цвета итоговой строки сетки в ExtJS

Я хочу, чтобы изменить шрифт, а также цвет фона сводной строки grid.I попыталась получать сводную строку как:Изменения цвета итоговой строки сетки в ExtJS

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

На основе summaryRow я могу установить стиль. Но я получаю значение summaryRow как null. Может кто-нибудь указать мне, чтобы исправить направление, или я что-то упустил? Любая помощь приветствуется. Спасибо

источник

2013-06-18 Dev

Попробуйте grid.down ('Ext.grid.feature.Summary') или grid.down ('feature.Summary'). Сводка - это не виджет, а функция, поэтому я не уверен в его запросе на xtype. – Christoph

Еще он дает null – 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

Документально способ сделать это было бы Резюме Renderer, лучший метод для суммарного визуализатора бы в 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, поэтому вам необходимо определить приложение подходящие классы 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 (значение === 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

ответ

Смежные вопросы