Посоветуйте, пожалуйста, о создании строки Сводка сетки, которая закреплена в нижней части сетки, в которой отображается счет.
Ниже приведена ссылка на мою сетку
https://jsfiddle.net/N2rious/rqe5g6t2/4/
/** @class webVision_Client.view.columngroup.ColumnGroup
* Class Description: This class defines the view associated with the column group display.
* @private
*/
Ext.define('xxx.view.columngroup.ColumnGroup', {
extend: 'xxx.views.xxxgrid.xxxGrid',
requires: [
'xxx.view.columngroup.ColumnGroupStore',
'xxx.utils.FilterPlugin',
'xxx.utils.OatiTimeZone',
'xxx.views.filters.ServerFilterView',
'Ext.window.MessageBox',
'xxx.components.column.OATIHyperlinkColumn',
'xxx.view.columngroup.ColumnGroupFilterConfig'
],
store: {
type: 'columngroupstore'
},
alias: 'widget.columngroup',
title: 'Column Group',
reference: 'columngroup',
isMultiSortEnabled: true,
keyColumn: 'Continent',
spanningColumnList: 'Continent|Country|State|County|City',
getRowSpanColumn: function (field, stripeRows, value, meta, record, rowIndex, colIndex, store) {
var keyColumn = this.keyColumn;
var multiCol = this.spanningColumnList ? this.spanningColumnList.split('|') : null;
if (keyColumn && rowIndex === 0 && store.data.items.length > 1) {
this.keyColor = [];
this.keyColor.push('rowspan-x-grid-item');
var keyColumnCount = 1;
for (var m = 1; m < store.data.items.length; m++) {
var currentVal = store.getAt(m).get(keyColumn);
var previousVal = store.getAt(m - 1).get(keyColumn);
var isDateField = false;
if (value && typeof currentVal.getMonth === 'function') {
isDateField = true;
}
if (isDateField && previousVal && currentVal.getTime() === previousVal.getTime()) {
this.keyColor.push(this.keyColor[m - 1]);
}
else if (!isDateField && previousVal && currentVal === previousVal) {
this.keyColor.push(this.keyColor[m - 1]);
}
else {
keyColumnCount = keyColumnCount + 1;
if (this.keyColor[m - 1] === "rowspan-x-grid-item") {
this.keyColor.push('rowspan-x-grid-item-alt');
}
else {
this.keyColor.push('rowspan-x-grid-item');
}
}
}
if (this.ownerGrid) {
this.ownerGrid.SpanKeyColRecord = keyColumnCount;
var label = this.ownerGrid.lookupReference("lblTotalRecords");
if (label) {
label.setText(Ext.util.Format.format(GlobalStrings.Label_GridDisplaying, keyColumnCount));
}
}
}
var previousRecord = store.getAt(rowIndex - 1);
var currentRecord = store.getAt(rowIndex);
if (typeof this.hasCls === "function" && !this.hasCls('span-grid')) {
this.addCls('span-grid');
}
last = false;
var isDateColumn = this.isDataColumn(value);
if (isDateColumn) {
last = rowIndex >= store.getCount() - 1 || value.getTime() !== store.getAt(rowIndex + 1).get(field).getTime();
}
else {
last = rowIndex >= store.getCount() - 1 || value !== store.getAt(rowIndex + 1).get(field);
}
var k = 0;
var col;
var previousRecordKeyCol;
var nextRecordKeyCol;
var CurrentRecordKeyCol;
if (!last) {
if (multiCol && multiCol.indexOf(field) < 0) {
for (k = 0; k < multiCol.length; k++) {
col = multiCol[k];
nextRecord = store.getAt(rowIndex + 1);
nextRecordKeyCol = nextRecord !== null && nextRecord.get(col);
CurrentRecordKeyCol = currentRecord !== null && currentRecord.get(col);
if (nextRecordKeyCol !== CurrentRecordKeyCol) {
last = true;
break;
}
}
}
}
var sameAsPrevious = false;
if (isDateColumn) {
sameAsPrevious = previousRecord !== null && previousRecord.get(field).getTime() === value.getTime();
}
else {
sameAsPrevious = previousRecord !== null && previousRecord.get(field) === value;
}
if (sameAsPrevious && keyColumn) {
//check key column value is changed or not
previousRecordKeyCol = previousRecord !== null && previousRecord.get(keyColumn);
CurrentRecordKeyCol = currentRecord !== null && currentRecord.get(keyColumn);
var isDateKeyColumn = this.isDataColumn(CurrentRecordKeyCol);
if (!isDateKeyColumn && previousRecordKeyCol !== CurrentRecordKeyCol) {
sameAsPrevious = false;
}
else if (isDateKeyColumn && previousRecordKeyCol.getTime() !== CurrentRecordKeyCol.getTime()) {
sameAsPrevious = false;
}
}
if (sameAsPrevious && this.spanningColumnList) {
if (multiCol && multiCol.indexOf(field) < 0) {
for (k = 0; k < multiCol.length; k++) {
col = multiCol[k];
previousRecordKeyCol = previousRecord !== null && previousRecord.get(col);
CurrentRecordKeyCol = currentRecord !== null && currentRecord.get(col);
if (previousRecordKeyCol !== CurrentRecordKeyCol) {
sameAsPrevious = false;
break;
}
}
}
}
if (keyColumn && !last) {
var isDataKeyColumn = this.isDataColumn(store.getAt(rowIndex).get(keyColumn));
if (!isDataKeyColumn && store.getAt(rowIndex).get(keyColumn) !== store.getAt(rowIndex + 1).get(keyColumn)) {
last = true;
}
else if (isDataKeyColumn && store.getAt(rowIndex).get(keyColumn).getTime() !== store.getAt(rowIndex + 1).get(keyColumn).getTime()) {
last = true;
}
}
if (last) {
meta.tdCls += ' rowspan-bottom-border-1 ';
}
else {
meta.tdCls += ' rowspan-bottom-border-0 ';
}
if (sameAsPrevious) {
if (stripeRows) {
meta.tdCls += ' ' + this.obj[field];
}
else if (keyColumn) {
meta.tdCls += ' ' + this.keyColor[rowIndex];
}
return '';
} else {
if (rowIndex === 0) {
this.obj[field] = 'rowspan-x-grid-item';
meta.tdCls += this.obj[field];
}
else if (stripeRows) {
if (this.obj[field] === 'rowspan-x-grid-item') {
this.obj[field] = 'rowspan-x-grid-item-alt';
}
else if (this.obj[field] === 'rowspan-x-grid-item-alt') {
this.obj[field] = 'rowspan-x-grid-item';
}
meta.tdCls += this.obj[field];
}
else if (keyColumn) {
meta.tdCls += this.keyColor[rowIndex];
}
return value;
}
},
initComponent: function () {
var me = this;
me.width = 750;
me.columns = [{
// xtype: 'Continent', //this is so we know which column will show the tree
text: 'Continent',
dataIndex: 'Continent',
flex: 1,
sortable: true,
renderer: function (value, meta, record, rowIndex, colIndex, store) {
return this.getRowSpanColumn('Continent', false, value, meta, record, rowIndex, colIndex, store);
}
},
{
header: 'Country/State',
stateid: 'CountryState',
flex: 1,
columns: [{
text: 'Country',
dataIndex: 'Country',
flex: 1,
sortable: true,
renderer: function (value, meta, record, rowIndex, colIndex, store) {
return this.getRowSpanColumn('Country', false, value, meta, record, rowIndex, colIndex, store);
}
},
{
text: 'State',
dataIndex: 'State',
flex: 1,
sortable: true,
renderer: function (value, meta, record, rowIndex, colIndex, store) {
return this.getRowSpanColumn('State', false, value, meta, record, rowIndex, colIndex, store);
}
}
]
},
{
header: 'County/City',
stateid: 'CountyCity',
flex: 1,
columns: [{
text: 'County',
dataIndex: 'County',
flex: 1,
sortable: true,
renderer: function (value, meta, record, rowIndex, colIndex, store) {
return this.getRowSpanColumn('County', false, value, meta, record, rowIndex, colIndex, store);
}
},
{
text: 'City',
dataIndex: 'City',
flex: 1,
sortable: true,
renderer: function (value, meta, record, rowIndex, colIndex, store) {
return this.getRowSpanColumn('City', false, value, meta, record, rowIndex, colIndex, store);
}
}
]
}
];
this.callParent();
},
dockedItems: [
{
xtype: 'textfield',
readOnly: true
}
],
itemId: 'columngroup',
config: {
/**
* @cfg {string} filterView
* @private
* name of the view associated with the display
**/
filterView: 'columngroupfilterconfig',
/**
* @cfg {Boolean} enableGridSearch
* @private
* enable/disable search for grid
**/
enableGridSearch: true,
/**
* @cfg {Boolean} newButton
* @private
* enable/disable newbutton for display
**/
newButton: false,
/**
* @cfg {Boolean} clientFilter
* @private
* enable/disable clientFilter for grid
**/
clientFilter: 'default',
/**
* @cfg {Boolean} showTimezone
* @private
* enable/disable showTimezone for grid
**/
showTimezone: 'enabled',
/**
* @cfg {Object} page
* @private
* set page object
**/
page: {}
}
});
Спасибо