trying to create a dropdown menu on a titlebar [newbie]

Hello,

I am a sencha newbie and I am trying to add a drop down menu to a titlebar. I have inherited this code, so my options are alittle limited.



This is the code i am trying to add a dropdown menu to: ( i have removed some of it to make it less verbose , so i may be not be completely correct.



i am trying to ad a dropdown menu to xtype: 'titlebar'.

IS this possible and if someone could point me to an example it would be greatly appreciated



Thanks





Ext.define('MyPatients.view.Messages', {

extend: 'Ext.Container',

requires: [

'MyPatients.view.ComposeMessage',

'MyPatients.view.ComposeDocument'

],



xtype: 'messages',



config: {

layout: 'card',

items: [{

xtype: 'tabpanel',

activeTab: 0,

layout: {

animation: {

type: 'slide',

duration: 250

}

},



tabBar: {

layout: {

pack : 'center',

align: 'center'

},

docked: 'top'

},



}, {

xtype: 'titlebar',

docked: 'top',

title: '<div id="messagesTitle">Inbox</div>',

items: [{

id: 'messagesBackBtn',

text: 'Back',

ui: 'back',

align: 'left',

hidden: true



}, {



iconCls: 'compose',

iconMask: true,

align: 'right'

}, {

id: 'messageSendBtn',

text: 'Send',

align: 'right',

hidden: true

}, {

id: 'documentCancelBtn',

text: 'Cancel',

align: 'left',

hidden: true

}]

}]

},



clearTitle: function () {

Ext.fly('messagesTitle').setHtml('&nbsp;');

},



setTitle: function (title) {

Ext.fly('messagesTitle').setHtml(title);

}



});