How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application

Question

How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application.
With the menu at the top, I would like to add controls to the bottom of the app that control audio, display other random information and rotate imagery. This pane should not hide/move/refresh/etc. when changing views via the menu, in essence it should be separated from the rest of the application. It is highly preferred to be able to use the sencha 'audio' xtypes.

Should I implement this:

• Straight into index.html
• Somehow add it in the view which holds the menu as well
• Some other magical way

Answer 1

The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).

http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-docked

var button = Ext.create('Ext.Button', {
      text: 'Button',
      id: 'rightButton'
 });

 Ext.create('Ext.Container', {
     fullscreen: true,
     items: [
         {
              docked: 'top',
              xtype: 'titlebar',
              items: [
                  button
              ]
          }
     ]
 });

 Ext.create('Ext.Panel', {
     html: 'Floating Panel',
     left: 0,
     padding: 10
 }).showBy(button);    

For your top view, I would use something along the lines of a Ext.TabPanel though. http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel