466 lines
18 KiB
HTML
466 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-grid-PivotGridView'>/**
|
|
</span> * @class Ext.grid.PivotGridView
|
|
* @extends Ext.grid.GridView
|
|
* Specialised GridView for rendering Pivot Grid components. Config can be passed to the PivotGridView via the PivotGrid constructor's
|
|
* viewConfig option:
|
|
<pre><code>
|
|
new Ext.grid.PivotGrid({
|
|
viewConfig: {
|
|
title: 'My Pivot Grid',
|
|
getCellCls: function(value) {
|
|
return value > 10 'red' : 'green';
|
|
}
|
|
}
|
|
});
|
|
</code></pre>
|
|
* <p>Currently {@link #title} and {@link #getCellCls} are the only configuration options accepted by PivotGridView. All other
|
|
* interaction is performed via the {@link Ext.grid.PivotGrid PivotGrid} class.</p>
|
|
*/
|
|
Ext.grid.PivotGridView = Ext.extend(Ext.grid.GridView, {
|
|
|
|
<span id='Ext-grid-PivotGridView-property-colHeaderCellCls'> /**
|
|
</span> * The CSS class added to all group header cells. Defaults to 'grid-hd-group-cell'
|
|
* @property colHeaderCellCls
|
|
* @type String
|
|
*/
|
|
colHeaderCellCls: 'grid-hd-group-cell',
|
|
|
|
<span id='Ext-grid-PivotGridView-cfg-title'> /**
|
|
</span> * @cfg {String} title Optional title to be placed in the top left corner of the PivotGrid. Defaults to an empty string.
|
|
*/
|
|
title: '',
|
|
|
|
<span id='Ext-grid-PivotGridView-cfg-getCellCls'> /**
|
|
</span> * @cfg {Function} getCellCls Optional function which should return a CSS class name for each cell value. This is useful when
|
|
* color coding cells based on their value. Defaults to undefined.
|
|
*/
|
|
|
|
<span id='Ext-grid-PivotGridView-method-getColumnHeaders'> /**
|
|
</span> * Returns the headers to be rendered at the top of the grid. Should be a 2-dimensional array, where each item specifies the number
|
|
* of columns it groups (column in this case refers to normal grid columns). In the example below we have 5 city groups, which are
|
|
* each part of a continent supergroup. The colspan for each city group refers to the number of normal grid columns that group spans,
|
|
* so in this case the grid would be expected to have a total of 12 columns:
|
|
<pre><code>
|
|
[
|
|
{
|
|
items: [
|
|
{header: 'England', colspan: 5},
|
|
{header: 'USA', colspan: 3}
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{header: 'London', colspan: 2},
|
|
{header: 'Cambridge', colspan: 3},
|
|
{header: 'Palo Alto', colspan: 3}
|
|
]
|
|
}
|
|
]
|
|
</code></pre>
|
|
* In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country ->
|
|
* State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure.
|
|
* @return {Array} A tree structure containing the headers to be rendered. Must include the colspan property at each level, which should
|
|
* be the sum of all child nodes beneath this node.
|
|
*/
|
|
getColumnHeaders: function() {
|
|
return this.grid.topAxis.buildHeaders();;
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-getRowHeaders'> /**
|
|
</span> * Returns the headers to be rendered on the left of the grid. Should be a 2-dimensional array, where each item specifies the number
|
|
* of rows it groups. In the example below we have 5 city groups, which are each part of a continent supergroup. The rowspan for each
|
|
* city group refers to the number of normal grid columns that group spans, so in this case the grid would be expected to have a
|
|
* total of 12 rows:
|
|
<pre><code>
|
|
[
|
|
{
|
|
width: 90,
|
|
items: [
|
|
{header: 'England', rowspan: 5},
|
|
{header: 'USA', rowspan: 3}
|
|
]
|
|
},
|
|
{
|
|
width: 50,
|
|
items: [
|
|
{header: 'London', rowspan: 2},
|
|
{header: 'Cambridge', rowspan: 3},
|
|
{header: 'Palo Alto', rowspan: 3}
|
|
]
|
|
}
|
|
]
|
|
</code></pre>
|
|
* In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country ->
|
|
* State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure.
|
|
* @return {Array} A tree structure containing the headers to be rendered. Must include the colspan property at each level, which should
|
|
* be the sum of all child nodes beneath this node.
|
|
* Each group may specify the width it should be rendered with.
|
|
* @return {Array} The row groups
|
|
*/
|
|
getRowHeaders: function() {
|
|
return this.grid.leftAxis.buildHeaders();
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-renderRows'> /**
|
|
</span> * @private
|
|
* Renders rows between start and end indexes
|
|
* @param {Number} startRow Index of the first row to render
|
|
* @param {Number} endRow Index of the last row to render
|
|
*/
|
|
renderRows : function(startRow, endRow) {
|
|
var grid = this.grid,
|
|
rows = grid.extractData(),
|
|
rowCount = rows.length,
|
|
templates = this.templates,
|
|
renderer = grid.renderer,
|
|
hasRenderer = typeof renderer == 'function',
|
|
getCellCls = this.getCellCls,
|
|
hasGetCellCls = typeof getCellCls == 'function',
|
|
cellTemplate = templates.cell,
|
|
rowTemplate = templates.row,
|
|
rowBuffer = [],
|
|
meta = {},
|
|
tstyle = 'width:' + this.getGridInnerWidth() + 'px;',
|
|
colBuffer, colCount, column, i, row;
|
|
|
|
startRow = startRow || 0;
|
|
endRow = Ext.isDefined(endRow) ? endRow : rowCount - 1;
|
|
|
|
for (i = 0; i < rowCount; i++) {
|
|
row = rows[i];
|
|
colCount = row.length;
|
|
colBuffer = [];
|
|
|
|
//build up each column's HTML
|
|
for (var j = 0; j < colCount; j++) {
|
|
|
|
meta.id = i + '-' + j;
|
|
meta.css = j === 0 ? 'x-grid3-cell-first ' : (j == (colCount - 1) ? 'x-grid3-cell-last ' : '');
|
|
meta.attr = meta.cellAttr = '';
|
|
meta.value = row[j];
|
|
|
|
if (Ext.isEmpty(meta.value)) {
|
|
meta.value = '&#160;';
|
|
}
|
|
|
|
if (hasRenderer) {
|
|
meta.value = renderer(meta.value);
|
|
}
|
|
|
|
if (hasGetCellCls) {
|
|
meta.css += getCellCls(meta.value) + ' ';
|
|
}
|
|
|
|
colBuffer[colBuffer.length] = cellTemplate.apply(meta);
|
|
}
|
|
|
|
rowBuffer[rowBuffer.length] = rowTemplate.apply({
|
|
tstyle: tstyle,
|
|
cols : colCount,
|
|
cells : colBuffer.join(""),
|
|
alt : ''
|
|
});
|
|
}
|
|
|
|
return rowBuffer.join("");
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-property-Ext.Template'> /**
|
|
</span> * The master template to use when rendering the GridView. Has a default template
|
|
* @property Ext.Template
|
|
* @type masterTpl
|
|
*/
|
|
masterTpl: new Ext.Template(
|
|
'<div class="x-grid3 x-pivotgrid" hidefocus="true">',
|
|
'<div class="x-grid3-viewport">',
|
|
'<div class="x-grid3-header">',
|
|
'<div class="x-grid3-header-title"><span>{title}</span></div>',
|
|
'<div class="x-grid3-header-inner">',
|
|
'<div class="x-grid3-header-offset" style="{ostyle}"></div>',
|
|
'</div>',
|
|
'<div class="x-clear"></div>',
|
|
'</div>',
|
|
'<div class="x-grid3-scroller">',
|
|
'<div class="x-grid3-row-headers"></div>',
|
|
'<div class="x-grid3-body" style="{bstyle}">{body}</div>',
|
|
'<a href="#" class="x-grid3-focus" tabIndex="-1"></a>',
|
|
'</div>',
|
|
'</div>',
|
|
'<div class="x-grid3-resize-marker">&#160;</div>',
|
|
'<div class="x-grid3-resize-proxy">&#160;</div>',
|
|
'</div>'
|
|
),
|
|
|
|
<span id='Ext-grid-PivotGridView-method-initTemplates'> /**
|
|
</span> * @private
|
|
* Adds a gcell template to the internal templates object. This is used to render the headers in a multi-level column header.
|
|
*/
|
|
initTemplates: function() {
|
|
Ext.grid.PivotGridView.superclass.initTemplates.apply(this, arguments);
|
|
|
|
var templates = this.templates || {};
|
|
if (!templates.gcell) {
|
|
templates.gcell = new Ext.XTemplate(
|
|
'<td class="x-grid3-hd x-grid3-gcell x-grid3-td-{id} ux-grid-hd-group-row-{row} ' + this.colHeaderCellCls + '" style="{style}">',
|
|
'<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id} x-unselectable" unselectable="on" style="{istyle}">',
|
|
this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '', '{value}',
|
|
'</div>',
|
|
'</td>'
|
|
);
|
|
}
|
|
|
|
this.templates = templates;
|
|
this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-initElements'> /**
|
|
</span> * @private
|
|
* Sets up the reference to the row headers element
|
|
*/
|
|
initElements: function() {
|
|
Ext.grid.PivotGridView.superclass.initElements.apply(this, arguments);
|
|
|
|
<span id='Ext-grid-PivotGridView-property-rowHeadersEl'> /**
|
|
</span> * @property rowHeadersEl
|
|
* @type Ext.Element
|
|
* The element containing all row headers
|
|
*/
|
|
this.rowHeadersEl = new Ext.Element(this.scroller.child('div.x-grid3-row-headers'));
|
|
|
|
<span id='Ext-grid-PivotGridView-property-headerTitleEl'> /**
|
|
</span> * @property headerTitleEl
|
|
* @type Ext.Element
|
|
* The element that contains the optional title (top left section of the pivot grid)
|
|
*/
|
|
this.headerTitleEl = new Ext.Element(this.mainHd.child('div.x-grid3-header-title'));
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-getGridInnerWidth'> /**
|
|
</span> * @private
|
|
* Takes row headers into account when calculating total available width
|
|
*/
|
|
getGridInnerWidth: function() {
|
|
var previousWidth = Ext.grid.PivotGridView.superclass.getGridInnerWidth.apply(this, arguments);
|
|
|
|
return previousWidth - this.getTotalRowHeaderWidth();
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-getTotalRowHeaderWidth'> /**
|
|
</span> * Returns the total width of all row headers as specified by {@link #getRowHeaders}
|
|
* @return {Number} The total width
|
|
*/
|
|
getTotalRowHeaderWidth: function() {
|
|
var headers = this.getRowHeaders(),
|
|
length = headers.length,
|
|
total = 0,
|
|
i;
|
|
|
|
for (i = 0; i< length; i++) {
|
|
total += headers[i].width;
|
|
}
|
|
|
|
return total;
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-getTotalColumnHeaderHeight'> /**
|
|
</span> * @private
|
|
* Returns the total height of all column headers
|
|
* @return {Number} The total height
|
|
*/
|
|
getTotalColumnHeaderHeight: function() {
|
|
return this.getColumnHeaders().length * 21;
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-getCellIndex'> /**
|
|
</span> * Inherit docs
|
|
* @private
|
|
* @param {HTMLElement} el
|
|
*/
|
|
getCellIndex : function(el) {
|
|
if (el) {
|
|
var match = el.className.match(this.colRe),
|
|
data;
|
|
|
|
if (match && (data = match[1])) {
|
|
return parseInt(data.split('-')[1], 10);
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
|
|
<span id='Ext-grid-PivotGridView-method-renderUI'> /**
|
|
</span> * @private
|
|
* Slight specialisation of the GridView renderUI - just adds the row headers
|
|
*/
|
|
renderUI : function() {
|
|
var templates = this.templates,
|
|
innerWidth = this.getGridInnerWidth();
|
|
|
|
return templates.master.apply({
|
|
body : templates.body.apply({rows:'&#160;'}),
|
|
ostyle: 'width:' + innerWidth + 'px',
|
|
bstyle: 'width:' + innerWidth + 'px'
|
|
});
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-onLayout'> /**
|
|
</span> * @private
|
|
* Make sure that the headers and rows are all sized correctly during layout
|
|
*/
|
|
onLayout: function(width, height) {
|
|
Ext.grid.PivotGridView.superclass.onLayout.apply(this, arguments);
|
|
|
|
var width = this.getGridInnerWidth();
|
|
|
|
this.resizeColumnHeaders(width);
|
|
this.resizeAllRows(width);
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-refresh'> /**
|
|
</span> * Refreshs the grid UI
|
|
* @param {Boolean} headersToo (optional) True to also refresh the headers
|
|
*/
|
|
refresh : function(headersToo) {
|
|
this.fireEvent('beforerefresh', this);
|
|
this.grid.stopEditing(true);
|
|
|
|
var result = this.renderBody();
|
|
this.mainBody.update(result).setWidth(this.getGridInnerWidth());
|
|
if (headersToo === true) {
|
|
this.updateHeaders();
|
|
this.updateHeaderSortState();
|
|
}
|
|
this.processRows(0, true);
|
|
this.layout();
|
|
this.applyEmptyText();
|
|
this.fireEvent('refresh', this);
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-renderHeaders'> /**
|
|
</span> * @private
|
|
* Bypasses GridView's renderHeaders as they are taken care of separately by the PivotAxis instances
|
|
*/
|
|
renderHeaders: Ext.emptyFn,
|
|
|
|
<span id='Ext-grid-PivotGridView-method-fitColumns'> /**
|
|
</span> * @private
|
|
* Taken care of by PivotAxis
|
|
*/
|
|
fitColumns: Ext.emptyFn,
|
|
|
|
<span id='Ext-grid-PivotGridView-method-resizeColumnHeaders'> /**
|
|
</span> * @private
|
|
* Called on layout, ensures that the width of each column header is correct. Omitting this can lead to faulty
|
|
* layouts when nested in a container.
|
|
* @param {Number} width The new width
|
|
*/
|
|
resizeColumnHeaders: function(width) {
|
|
var topAxis = this.grid.topAxis;
|
|
|
|
if (topAxis.rendered) {
|
|
topAxis.el.setWidth(width);
|
|
}
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-resizeRowHeaders'> /**
|
|
</span> * @private
|
|
* Sets the row header div to the correct width. Should be called after rendering and reconfiguration of headers
|
|
*/
|
|
resizeRowHeaders: function() {
|
|
var rowHeaderWidth = this.getTotalRowHeaderWidth(),
|
|
marginStyle = String.format("margin-left: {0}px;", rowHeaderWidth);
|
|
|
|
this.rowHeadersEl.setWidth(rowHeaderWidth);
|
|
this.mainBody.applyStyles(marginStyle);
|
|
Ext.fly(this.innerHd).applyStyles(marginStyle);
|
|
|
|
this.headerTitleEl.setWidth(rowHeaderWidth);
|
|
this.headerTitleEl.setHeight(this.getTotalColumnHeaderHeight());
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-resizeAllRows'> /**
|
|
</span> * @private
|
|
* Resizes all rendered rows to the given width. Usually called by onLayout
|
|
* @param {Number} width The new width
|
|
*/
|
|
resizeAllRows: function(width) {
|
|
var rows = this.getRows(),
|
|
length = rows.length,
|
|
i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
Ext.fly(rows[i]).setWidth(width);
|
|
Ext.fly(rows[i]).child('table').setWidth(width);
|
|
}
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-updateHeaders'> /**
|
|
</span> * @private
|
|
* Updates the Row Headers, deferring the updating of Column Headers to GridView
|
|
*/
|
|
updateHeaders: function() {
|
|
this.renderGroupRowHeaders();
|
|
this.renderGroupColumnHeaders();
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-renderGroupRowHeaders'> /**
|
|
</span> * @private
|
|
* Renders all row header groups at all levels based on the structure fetched from {@link #getGroupRowHeaders}
|
|
*/
|
|
renderGroupRowHeaders: function() {
|
|
var leftAxis = this.grid.leftAxis;
|
|
|
|
this.resizeRowHeaders();
|
|
leftAxis.rendered = false;
|
|
leftAxis.render(this.rowHeadersEl);
|
|
|
|
this.setTitle(this.title);
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-setTitle'> /**
|
|
</span> * Sets the title text in the top left segment of the PivotGridView
|
|
* @param {String} title The title
|
|
*/
|
|
setTitle: function(title) {
|
|
this.headerTitleEl.child('span').dom.innerHTML = title;
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-renderGroupColumnHeaders'> /**
|
|
</span> * @private
|
|
* Renders all column header groups at all levels based on the structure fetched from {@link #getColumnHeaders}
|
|
*/
|
|
renderGroupColumnHeaders: function() {
|
|
var topAxis = this.grid.topAxis;
|
|
|
|
topAxis.rendered = false;
|
|
topAxis.render(this.innerHd.firstChild);
|
|
},
|
|
|
|
<span id='Ext-grid-PivotGridView-method-isMenuDisabled'> /**
|
|
</span> * @private
|
|
* Overridden to test whether the user is hovering over a group cell, in which case we don't show the menu
|
|
*/
|
|
isMenuDisabled: function(cellIndex, el) {
|
|
return true;
|
|
}
|
|
});</pre>
|
|
</body>
|
|
</html>
|