But there is a problem. I test in your demo, For any row, when the expander is in expanded state, and i try to click the column title, the grid sort data, and the expander panel just disappears and will not be there anymore.

Sorry for my english, you can test your demo:
1. click a row, to expand the expander panel
2. click column title to sort
3. click same row, but the expander panel never appear

Hello pavanextjs,
that's sounds good. I also took the demo of the author and put a form inside, but it's the same.
Even inside the demo the buttons are not rendered.
If u know a workaround or u see an error by myself, please inform me.
Have a look.

Stopping events of an inner grid

Originally Posted by gurpal2000

I put a grid inside a rowpanelexpander (ie. replaced your tabpanel with gridpanel). I added a rowclick listener to the outer grid. When i click on the rows inside my large grid, i get all sorts of weird behaviour with random rows being highlighted and erratic expand/collapse.

It's hard to explain but if i added a row listener to the inner grid, how would the outer grid know to highlight that large row?

Quite a lot of events bubble up. This includes eg. mouseover and mouseout. When you move the mouse over an inner grid rows of the outer grid are also highlighted. The appropriate event handlers in Ext.grid.GridView must be overridden to prevent this: