Button on TitleBar simply doesn't display Sencha Touch

Question

Here is my code.

Ext.application({
    name: 'Sencha',
    launch: function() {

        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'MyApp',
                itmes: [{
                    xtype: 'button',
                    text: 'Add',
                    align: 'right'
                }]
            }]
        });
    }
});

Someone said to use Navigation View, and I saw examples using Ext.Viewport.add(), but I don't like either of them. I just wonder is it possible to add buttons on titlebar and bind events onto those buttons in configuration directly?

Update:

I found the approach--> using Ext.Viewport.add() , only works in desktop browers, but doesn't work when generated to cordova project and/or deployed onto devices (both Android and Windows Phone 8), the TitleBar simply doesn't display at all.

It makes me more urgent to find the way how to write the titlebar, button and its events into configuration.

Answer 1

It's just a typo : itmes should be items :)