EXT JS Row Expander in Salesforce

Question

Folks,

I am trying to display EXT JS with Row Expander plugin in a Visual Force page.

Check this link http://mikhailstadnik.com/ext/examples/nested-grid.htm

As per the link, I am successful in displaying Accounts in first grid and respective Contacts in child grid.

Problem is: When I click on first row, it is expanded and shows the respective contacts. When I click on second row and first row is not closed, the data which I can see for second row (Contacts) are visible at first row contacts also.

So, I think when second row is clicked, I need to close the first row.

Please suggest me how to do this..

Answer 1

The plugin you are talking about features collapseRow(row) method.
Each time you are trying to expand a row (use beforeexpand event for that) you need to loop through all the rows and collapse expanded ones.

Here is how you check if the row is expanded:

Ext.fly(row).hasClass(this.rowCollapsedClass) // this is referring to plugin instance