Expanding and Collapsing all rows - extjs

Expanding and Collapsing all rows - extjs

I'm trying to figure out how to expand and collapse all of the rows in a
grid I've created. Here is my Grid:
Ext.define('AM.view.metadata.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.metadatalist',
title: '<center>Results</center>',
store: 'Metadata',
requires: ['Ext.ux.RowExpander'],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'tbtext', text: 'Loading...', id: 'recordNumberItem'
},
'-',
{ text: 'Expand All', id: 'expand' },
'-',
{ text: 'Collapse All', id: 'collapse' }
]
}],
initComponent: function() {
this.columns = [
{header: 'Technical Name', dataIndex: 'KBE_ID'...
...
],
this.callParent(arguments);
} ,
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<p><b>KBE ID:</b> {KBE_ID}</p><br>',
'<p><b>Privacy:</b> {PRIVACY_INDICATOR}</p>'
]
}]
});
And here I have my expand and collapse controllers:
Ext.define('AM.controller.Expand_Collapse_Rows', {
extend : 'Ext.app.Controller',
init : function() {
this.control({
'#expand' : {
click: this.expandRows
},
'#collapse' : {
click: this.collapseRows
}
});
},
expandRows: function() {
//code to expand all rows
},
collapseRows: function() {
//code to collapse all rows
}
});
I've found various answers on other sites but none of them really answer
my questions. I know that I'll need a for loop to iterate through each
row, but not sure how to achieve this.
Any ideas? Thank you!
I'm using Ext JS 4.1.1