Sencha Touch: Toolbar inside of TabPanel

Question

I'm new to Sencha Touch and just trying to put a Toolbar inside of a TabPanel. I do that because the TabPanel will be my main navigation and the Toolbar will provide several content-related operations, such as creating a new homework or sth like that.

Here is my "solution", that crtly doesn't work. The TabPanel appears, and the "Hello World" do so, too, but there won't be any Toolbar.

var tapHandler = function(btn, evt) {
alert("Button "+btn.text+" tapped");
}

var HomeScreen = new Ext.Panel({
fullscreen: true,
dockedItems: [
    {
        xtype: "toolbar",
        title: "buttons",
        ui: "light",
        dock: "bottom",
        items: [
            {ui: "action", text: "Add"}
        ],
        defaults: {
            handler: tapHandler
        }
    }
],
html: "Hello World"
});

new Ext.Application({
name: "Hello World",

launch: function() {
    var tabPanel = new Ext.TabPanel({
        fullscreen: true,
        ui: 'dark',
        sortable: true,
        items: [
            {
                title: "Home",
                html: "Loading..."
            }
        ]
    });
    tabPanel.items.get(0).update(HomeScreen, true);
}
});

Do you have any solutions?

Greetings, Martin

Answer 1

I think the problem here may well be that the update() method expects an HTML string and HomeScreen is an Ext.Panel.

If it were me, I'd be adding HomeScreen to the items collection in tabPanel either by using the variable like this:

    items: [
         HomePanel                              
    ]

Or by defining it inside the items array as an object:

items: [{
    xtype: "panel",
    html: "Hello world",
    dockedItems: [{
        // You toolbar definition
    }]
}]

Or by using the TabPanel.add() method:

tabPanel.add(HomePanel);