collapse the rowExpander

Question

I use Extjs 4. I have grid within row expander with data from the server but when I sort the parent grid the nested grid disapear.so I want to collapse all the row expander when sorting.
How can I do that? thanks

This is my grid:

   var grid = new Ext.grid.GridPanel({
       store: store,
       columns: [
           { header: 'Customer Name', dataIndex: 'CustomerName', width: 212, align: 'center' },
           { header: 'Charge Date', dataIndex: 'ChargeDate', width: 212, align: 'center' },
           { header: 'Package Plan', dataIndex: 'PackagePlan', width: 212, align: 'center' },
           { header: 'Current Invoice Sum', dataIndex: 'InvoiceSum', width: 212, align: 'center' }
       ],
       plugins: [{
           ptype: 'rowexpander',
           rowBodyTpl: ['<div style="background-color:#CBDDF3; width:643px;margin-left:147px;margin-bottom: 20px;border: 1px solid;" id="excharge">',
                        '<p><b>Customer Details:</b><br/>{CustomerName}<br/> {CustomerAddress}, {CustomerPhone}, <span class="email">{CustomerEmail}</span> </p>',
                        '<p><b>Package Type:</b> {PackagePlan}<br/>',
                        '<b>Invoice Details:</b></p>',
                        '<div class="nestedO" id="{InvoiceId}"></div> </div>',
           ]
       }],
       width: 900,
       height: 450,
       collapsible: true,
       renderTo: Ext.get('Ongoing')
   });

And when the row expander I add grid into the div which class is 'nestedO'.

Answer 1

I succeeded with adding this to the grid code:

listeners: {
                sortchange: function (ct, column, direction) {
                    $(".x-grid-row").each(function(){$(this).addClass("x-grid-row-collapsed");});
                    $(".x-grid-rowbody-tr").each(function(){$(this).addClass("x-grid-row-body-hidden");});
                }
            },