настройка сетки extJs 4 - итоговая строка в конце

Question

Я хочу сетку только с двумя столбцами, один для имени, а другой для процентов. Самая последняя строка будет иметь «Всего» в качестве имени и общий процент в качестве «процента». Эта строка будет оформлена иначе, чем другие строки. Пожалуйста, направьте меня, как я могу сделать это. Спасибо ..

Answer 1

Существует функция сетки, чтобы выполнить именно это.Он описан здесь в документах с некоторыми примерами его использования.

Вы также можете настроить стиль, предоставив собственную реализацию x-grid-row-summaryкласс в вашем CSS.

РЕДАКТИРОВАТЬ

Вот несколько примеров настройки стиля строки резюме, как вы можете видеть, есть несколько способов сделать это.Поймите, что на итоговую строку нельзя ссылаться, пока не произойдет событие viewready, она не готова к событию afterrender, поэтому я поместил всю эту логику в прослушиватель viewready:

Ext.create('Ext.grid.Panel', {
    features: [{
        ftype: 'summary'
    }],
    // other grid configs ...
    listeners: {
        viewready: function(grid) {

            // get reference to the summary row
            var summaryRow = grid.view.el.down('tr.x-grid-row-summary');

            // this will apply a css class to the row, in this example,
            // I am applying the extjs grid header style to my summary row
            summaryRow.addCls('x-grid-header-ct');

            // or, to do it all in javascript as you mentioned in the comment
            // first you would create a style object, I took these style
            // properties from the .x-grid-header-ct
            aStyleObject = {
                cursor: 'default',
                zoom: 1,
                padding: 0,
                border: '1px solid #d0d0d0',
                'border-bottom-color': '#c5c5c5',
                'background-image': 'none',
                'background-color': '#c5c5c5'
            }
            // then you pass the style object using setStyle
            summaryRow.setStyle(aStyleObject);

            // or you could set the style for each cell individually using 
            // addCls or setStyle:
            Ext.Array.each(summaryRow.query('td'), function(td) {
                var cell = Ext.get(td);
                cell.addCls('some-class');
                // or
                cell.setStyle(anotherStyleObject);
            });
        }
    }
});

Answer 2

если у нас есть итоговая строка (, например, ), просто мы можем использовать CSS на конкретной странице.

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