Nested grid with rowExpander creating issues

Question

I am using Extjs3.2 nested grid with rowExpander.

In my case everything working fine.. but whenever i click on nth row in child grid the parent grid's nth row is also getting selected. How to Stop this...Please Help??

My Code

 var expander = new Ext.ux.grid.RowExpander({
                 expandOnDblClick : false,
                 tpl : new Ext.Template('<div id="NestedGridRow-{id}"></div>'),

                 renderer: function(v, p, record) {
                        if (record.get('cmaStatus') == 'G') {
                            p.cellAttr = 'rowspan="2"';
                            return '<div class="x-grid3-row-expander"></div>';
                        } 
            },


            });



            expander.on('expand', expandedRow);

            function expandedRow(obj, record, body, rowIndex){
                //absId parameter for the http request to get the absence details.


                //Use Id to give each grid a unique identifier. The Id is used in the row expander tpl.
                //and in the grid.render("ID") method.

                var row = "NestedGridRow-" + record.get("id");
                var id2 = "mygrid-" +record.get("id"); 

                sapid_para = record.get('sapid');
               //Create the nested grid.         
               var gridX = new Ext.grid.GridPanel({
                   id:'nestedGrid',
                    store: storenested,
                    //stripeRows: true,
                    columns: [


                        {
                            header : "CMA Date",
                            width : 120,
                            sortable : true,
                            dataIndex : 'cmaDate',

                        },
                        {
                            header : "Source Model",
                            width : 120,
                            sortable : true,
                            dataIndex : 'sourceModel',

                        },

                        {
                            header : "Remarks",
                            width : 390,
                            sortable : true,
                            dataIndex : 'remarks',

                        }],
                height: 120,
                id: id2,
                plugins : [editor],
                renderTo: row,
                stripeRows:true,
                listeners: {
                    render: function(gridX) {
                        gridX.getView().el.select('.x-grid3-header').setStyle('display', 'none');
                    },

                    rowclick : function(grid,rowIndex,e) {
                        alert(rowIndex);                                       
                        }


                    },

                                });  
                gridX.render(row);


                //Ext.getCmp('grid_lineage').getStore().load({params:{start:0, limit:10}});
                storenested.load({params:{start:0, limit:10}});

Answer 1

Do you have the same instance of rowSelectionModel on both grids?

EDIT: Try to add to both of grids definition:

selModel: new Ext.grid.RowSelectionModel({singeSelect:true}),