CODEWITHSUNDEEP
javascriptextjssencha-touchtoolbartabpanel
Martin Bories
Martin Bories

Reputation: 1117

Sencha Touch: Toolbar inside of TabPanel

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

Upvotes: 0

Views: 2692

Answers (1)

dougajmcdonald
dougajmcdonald

Reputation: 20057

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);

Upvotes: 1

Related Questions