ExtJS Cell Selection Model with PivotGrid Doesn't Work

Question

I'm trying to change the SelectionModel of a PivotGrid and it isn't working. Here is my code. Can someone tell what I am doing wrong.

I need to use a cellSelectionModel as I want to drill down and I need the top and left axis to get the intersection points.

I have also tried the 'cellclick' event in the EXTJS 3.3 API with no luck. Anyone get a selection model other than the default RowSelectionModel working?

var pivotAccumGrid = new Ext.grid.PivotGrid({
    store     : my_store,
    aggregator: 'count',
    measure   : 'my_field',
    sm: new Ext.grid.CellSelectionModel({  //I have also tried selModel for key
        listeners: {
            cellselect: function(sm,row,col) {
                Ext.Msg.alert('click','got a click!');
            }
        }
    }),
    topAxis: [ {dataIndex: 'top_field'},{dataIndex: 'top_field2'}  ],
    leftAxis: [ {dataIndex: 'left_field',  width: 80} ],
});

Answer 1

This is a quick fix that introduces a new property to meta in PivotGridView so it can later be used to back out the cell indices. Most of the code isn't any different, just the introduction of meta.id in renderRows and the splitting of meta.id in getCellIndex.

Ext.override(Ext.grid.PivotGridView, {    
    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.id    = i + '-' + 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 = '&#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("");
    },

    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;
    }
});