Adding panels using button handler in Sencha Touch

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({
            f开发者_如何学Pythonullscreen: 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.

---

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.