X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/src/widgets/grid/PivotGridView.js?ds=sidebyside diff --git a/src/widgets/grid/PivotGridView.js b/src/widgets/grid/PivotGridView.js new file mode 100644 index 00000000..7766f2d5 --- /dev/null +++ b/src/widgets/grid/PivotGridView.js @@ -0,0 +1,437 @@ +/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @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: +
+new Ext.grid.PivotGrid({
+ viewConfig: {
+ title: 'My Pivot Grid',
+ getCellCls: function(value) {
+ return value > 10 'red' : 'green';
+ }
+ }
+});
+
+ * 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.
+ */ +Ext.grid.PivotGridView = Ext.extend(Ext.grid.GridView, { + + /** + * The CSS class added to all group header cells. Defaults to 'grid-hd-group-cell' + * @property colHeaderCellCls + * @type String + */ + colHeaderCellCls: 'grid-hd-group-cell', + + /** + * @cfg {String} title Optional title to be placed in the top left corner of the PivotGrid. Defaults to an empty string. + */ + title: '', + + /** + * @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. + */ + + /** + * 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: +
+[
+ {
+ items: [
+ {header: 'England', colspan: 5},
+ {header: 'USA', colspan: 3}
+ ]
+ },
+ {
+ items: [
+ {header: 'London', colspan: 2},
+ {header: 'Cambridge', colspan: 3},
+ {header: 'Palo Alto', colspan: 3}
+ ]
+ }
+]
+
+ * 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();;
+ },
+
+ /**
+ * 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:
+
+[
+ {
+ 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}
+ ]
+ }
+]
+
+ * 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();
+ },
+
+ /**
+ * @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, column, i;
+
+ startRow = startRow || 0;
+ endRow = Ext.isDefined(endRow) ? endRow : rowCount - 1;
+
+ for (i = 0; i < rowCount; i++) {
+ row = rows[i];
+ colCount = row.length;
+ colBuffer = [];
+
+ rowIndex = startRow + i;
+
+ //build up each column's HTML
+ for (j = 0; j < colCount; j++) {
+ cell = row[j];
+
+ meta.css = j === 0 ? 'x-grid3-cell-first ' : (j == (colCount - 1) ? 'x-grid3-cell-last ' : '');
+ meta.attr = meta.cellAttr = '';
+ meta.value = cell;
+
+ if (Ext.isEmpty(meta.value)) {
+ meta.value = ' ';
+ }
+
+ 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("");
+ },
+
+ /**
+ * The master template to use when rendering the GridView. Has a default template
+ * @property Ext.Template
+ * @type masterTpl
+ */
+ masterTpl: new Ext.Template(
+ '