Problem with GridPanel Selection => this.getRow(row) is undefined

[megmefleg]

Hi,

In my application, I've got a main TabPanel which each tab is filled by an action launched by clicking on a tree's node.
The tree node actions are diffreent so the content of the tabs could be different ( in its structure)
Each tab contains a least a grid panel.
When I click on a cell of this GridPanel, this action will update the rest of the Parent Panel (I hope, I'm enough clear).
Please look at the screenshots.

My problem is as follow:
In the first tab, I can have for example 6 rows in the gridPanel and in an other tab, the gridPanel will contain 1 row.
If I click alternatively on the different grids, I have the following troubles:

- A cell remains selected in on tab, and I cannot select a new cell in an other tab

- Systematically, the following error message finally appears:

this.getRow(row) is undefined
       return this.getRow(row).getElementsByTagName('td')[col]; 

I made a lot of tests, but I found nothing. I guess that the problem comes from the CellSelectionModel.

How Can I manage these multiple GridPanels and their selections?

Thank you for your help.


Please find the code of my GridPAnel Class:

Ext.namespace('PDM');

PDM.GridPanel = Ext.extend(Ext.grid.GridPanel, {
    //region:'north'
    split: true,
    collapsible: true,
    collapseMode: 'mini',
    margins: '5 5 0 5',
    sm: new Ext.grid.CellSelectionModel({
        singleSelect: true,
        //                        listeners:{
        //                            cellselect:{
        //                                fn: function(grid,record,cellIndex){
        //                                        console.log(this.getSelectedCell());
        //                                        var fieldName = this.grid.getColumnModel().getDataIndex(cellIndex);
        //                                        console.log(fieldName);
        //                                        
        //                                        var data = this.selection.record.get(fieldName);
        //                                        console.log(data);
        //                                        
        //                                        
        //                                        if(typeof data.href != "undefined"){
        //                                            var tab = Ext.ComponentMgr.get('mainPanel');
        //                    
        //                                            tab.updateContainer(data.href);
        //                                            this.clearSelections();
        //                
        //                                    }
        //                                }
        //                            }    
        //                        }
    }),
    stripeRows: true,
    height: 125,
    maxHeight: 600,
    overflow: true,
    border: false
    //,frame: true
    ,
    viewConfig: {
        forceFit: true
    }

    ,
    initComponent: function() {

        // call parent
        PDM.GridPanel.superclass.initComponent.apply(this, arguments);

        this.columnName = Ext.data.Record.create(this.data.columns);

        this.store = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(this.data),
            reader: new Ext.data.JsonReader({
                totalProperty: "total",
                root: "list"
            },
            this.columnName),
            autoLoad: true
        });

        function cellValue(val) {
            if (typeof val.value != "undefined") {
                return '<img style="cursor:pointer;" src="img/asterisk_yellow.png"></img>';
            } else {
                return '<center> - </center>';
            }
        }
        this.colModel = new Ext.grid.ColumnModel([{
            header: 'Indice',
            align: 'center',
            sortable: true,
            dataIndex: 'indice',
            id: this.id + '-indice'
        },
        {
            header: 'Dossier Produit',
            sortable: true,
            align: 'center',
            renderer: cellValue,
            dataIndex: 'wo_PD',
            id: this.id + '-wo_PD'
        },
        {
            header: 'Contre Proposition',
            sortable: true,
            align: 'center',
            renderer: cellValue,
            dataIndex: 'wo_CP',
            id: this.id + '-wo_CP'
        },
        {
            header: 'Transfert',
            sortable: true,
            align: 'center',
            dataIndex: 'wo_transf',
            id: this.id + '-wo_transf'
        }]);

    }

}); 

[megmefleg]

I have investigated on my problem and I have prepared a little example which reproduces it.

Hereafter the code:

Ext.ns('Example');

Ext.BLANK_IMAGE_URL = '../../library/extjs/resources/images/default/s.gif';

// example grid 
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
    data: [],
    sm: new Ext.grid.CellSelectionModel({
        singleSelect: true
    }),
    initComponent: function() {
        // call parent
        Example.Grid.superclass.initComponent.apply(this, arguments);

        var config = {
            store: new Ext.data.SimpleStore({
                fields: [{
                    name: 'company'
                },
                {
                    name: 'price',
                    type: 'float'
                },
                {
                    name: 'industry'
                }],
                data: this.data
            }),
            colModel: new Ext.grid.ColumnModel([{
                id: 'company',
                header: "Company",
                width: 40,
                sortable: true,
                dataIndex: 'company'
            },
            {
                header: "Price",
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price'
            }]),
            viewConfig: {
                forceFit: true,
            }
        }; // eo config object
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

    } // eo function initComponent
});

var data1 = [['3m Co', 71.72, 'Manufacturing'], ['Alcoa Inc', 29.01, 'Manufacturing'], ['Altria Group Inc', 83.81, 'Manufacturing'], ['American Express Company', 52.55, 'Finance'], ['American International Group, Inc.', 64.13, 'Services'], ['AT&T Inc.', 31.61, 'Services']]

var data2 = [['Boeing Co.', 75.43, 'Manufacturing'], ['Caterpillar Inc.', 67.27, 'Services']]

var data3 = [['3m Co', 71.72, 'Manufacturing'], ['Alcoa Inc', 29.01, 'Manufacturing'], ['Altria Group Inc', 83.81, 'Manufacturing'], ['American Express Company', 52.55, 'Finance'], ['American International Group, Inc.', 64.13, 'Services'], ['AT&T Inc.', 31.61, 'Services'], ['Boeing Co.', 75.43, 'Manufacturing'], ['Caterpillar Inc.', 67.27, 'Services']]

// application main entry point
Ext.onReady(function() {

    Ext.QuickTips.init();

    // create and show window
    var win = new Ext.Window({
        renderTo: Ext.getBody(),
        title: Ext.get('page-title').dom.innerHTML,
        width: 400,
        height: 300,
        plain: true,
        layout: 'fit',
        border: false,
        closable: false,
        items: [{
            xtype: 'tabpanel',
            defaults: {
                layout: 'fit'
            },
            activeItem: 0,
            items: [{
                title: 'Grid Tab 1',
                id: 'gridtab1',
                items: [new Example.Grid({
                    data: data1
                })]
            },
            {
                title: 'Grid Tab 2',
                id: 'gridtab2',
                items: [new Example.Grid({
                    data: data2
                })]

            },
            {
                title: 'Grid Tab 3',
                id: 'gridtab3',
                items: [new Example.Grid({
                    data: data3
                })]

            }]
        }]
    });
    win.show();

}); // eo function onReady
// eof 

If you play with it, you can select a cell in the first active tab but in the other tabs, it is impossible to select them.
Why?

Finally, the error message appears:

this.getRow(row) is undefined

Can you help me to manage the selected cell in the different tabs?

Thank in advance

[megmefleg]

Just to share my investigation on my problem.
This problem seems come from the SelModel type.
In the example, I used:

        ,sm: new Ext.grid.CellSelectionModel({
                        singleSelect: true}) 

If I use the Ext.grid.RowSelectionModel, there are no more problems.

I can have different selection in different tabs.
But, when I am using Ext.grid.CellSelectionModel, the multi selection problem appears with
an error message.

[Jazor]

I too have experienced this issue.

I have a TreePanel in a border layout with grids opening up in a TabPanel. For me the first grid loaded works, a new grid inserted into the tab panel works, but after insertion of the new grid, the first grid fails - as described above.

Looking at the code extract, one similarity is the way sm is declared/defined:

Example.Grid = Ext.extend(Ext.grid.GridPanel, {
    sm: new Ext.grid.CellSelectionModel({
        singleSelect: true
    }),
    initComponent: function() {
        Example.Grid.superclass.initComponent.apply(this, arguments);
        ...
    },
... 

I avoided the issue by initialising sm within initComponent, before invocation of the super class initComponent.

[finieousFingers]

Jazor could you please post an example of what worked for you? Thanks so much!