Adding panels using button handler in Sencha Touch - mobile

Question

I need a little help, I am building an app in Sencha Touch and I need to change the docked items within a container when a button is pressed. I assume this is the best way to alter the content within the app (i.e. switching between pages).
So far I have the following code -
var App = new Ext.Application({
name: 'Test',
useLoadMask: true,
launch: function () {
// Toolbar
Test.views.toolbar = new Ext.Toolbar({
id: 'toolbar',
title: 'Friend Pay'
});
// Content
Test.views.content = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Copy block</h2>'
}, {
xtype: 'button',
id: 'buttonPanel',
html: 'Request Payment',
handler: function () {
// Link to newBlock panel
}
}]
});
// Content
Test.views.newBlock = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Test 2</h2>'
}]
});
// Container
Test.views.container = new Ext.Panel({
id: 'container',
layout: 'fit',
dockedItems: [Test.views.toolbar, Test.views.content]
});
// Viewport - Entire screen
Test.views.viewport = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
items: [Test.views.container]
});
}
});
What function is required within the function() tag for the button handler to change the dockedItem within the container to be newBlock rather than content.
Many thanks for help in advance.

Answer 1

addDocked and removeDocked.
Test.views.viewport.removeDocked( Test.views.content )
Test.views.viewport.addDocked( Test.views.newBlock )
It seems a little odd you are adding content into dockedItems though, maybe you ment to add them to the normal items collection?
Either way, checkout everything available for Ext.Panel in the main api docs to familiarise yourself with the standard component functions.