Static top and bottom panels with dynamic pages

[AzurGroup]

I've been learning sencha touch 2.0 over the last 2 weeks and i've stumbled onto two problems. What i would like to do is have a static top bar and bottom bar on my page and let the dynamic content be controlled by buttons placed at the bottom dock. I've spent 4 hours on trying to get this to work the way i want to, i'm almost there but i need a little guidance.
My first problem is that i want to add an image to the static top dock. The code that was suggested in another form does not work.

var topBar = new Ext.BoxComponent(
                {
                    xtype: 'box',
                    autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
                }
        )

This code doesnt give any errors but it also doesnt show the required image. The image is 60px by 30px
The second problem i'm having is that i would like to add icons to my bottom dock so that when the user click on them, the page would change to show a new page. I have a form with 3 fields that i would like to link to one of the icons on the bottom dock so when the icon is clicked, the form would show. Here is the full code:

Ext.setup({
    phoneStartupScreen : 'resources/images/icon.png',
    icon : 'resources/images/Homescreen.png',
    glossOnIcon : false,
       
    onReady : function() {

        var topBar = new Ext.BoxComponent(
                {
                    xtype: 'box',
                    autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
                }
        )
      
        var tapHandler = function (btn, evt) {
             alert("Button '" + btn.text + "' tapped.");
         }
        
        var form = new Ext.form.FormPanel({

            items: 
            [
  
                {
                  xtype: "textfield",
                  name: "city",
                  label: "City",
                  placeHolder: "City", 
                  clearIcon     : true,
                },
                {
                  xtype: "textfield",
                  name: "zip",
                  label: "Zip",
                  clearIcon     : true,
                },
                {
                  xtype: "textfield",
                  name: "areaCode",
                  label: "Area Code",
                  clearIcon     : true,
                }
               
          ] 
        })    

        var searchPageContent ={
            html:'This is a test for search page'
        }
        var userPageContent ={
            html:'This is a test for user page'
        }
        
        var dockedItems = [ 
           {
                xtype : 'toolbar',
                dock : 'top',
                items : topBar

            }, 
            {
                xtype: "toolbar",
                dock: "bottom",
                items: [
                    {
                        xtype: 'spacer'
                    },
                    {
                      iconMask: true,
                      iconCls: "favorites",
                      clearIcon     : true,
                      items: form
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                      iconMask: true,
                      iconCls: "search",
                      clearIcon     : true,
                      items: searchPageContent
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                      iconMask: true,
                      iconCls: "user",
                      clearIcon     : true,
                      items: userPageContent
                    },
                    {
                        xtype: 'spacer'
                    },
                ]  
            } 
        ]
        
        new Ext.Panel({
            id : 'buttonsPanel',
            fullscreen : true,
            dockedItems : dockedItems
        });
    }
});

as mentioned before, i have been able to create the static top and bottom bars but my image does not work in my top bar, which is my first problem, and when i click one of the 3 buttons, nothing happens; i would like my form to be displayed when i click my favorites button but nothing happens. Where have i gone wrong?
Thank you

[mitchellsimoens]

Why not use Ext.Img?

[AzurGroup]

Thank you for your response, unfortunately i was unable to implement your suggestion, however i did get the image to show up and this is the code that i used;

        var topBar = new Ext.BoxComponent({   
            layout: 'hbox',
            
            html:'<img src="resources/icons/icon.png" height="30" width="48"/>',            
            flex: 1,
            style:{
                textAlign: 'center'  
            }
        })

Sadly, my second problem is still not solved. I am still unable to add items to my items:[] tag and have their icon show up on the bittom docked panel. Any suggestions on that?

[AzurGroup]

After a lot of searching and having tried out about 50 different examples, i finally found an example which i could modify to get the layout i wanted. The problem was i was unaware of how to have a static top bar with a centered image, a static bottom bar with icons belonging to all my pages, and a dynamic middle main section which would display the contents of each page. This is how i was able to accomplish it:

Ext.setup({
    onReady: function() {

        var topBar = new Ext.BoxComponent({   
            layout: 'hbox',
            
            html:
                   '<img src="resources/icons/icon.png" height="30", width="48"/>',
           flex: 1,
           style:{
               textAlign: 'center'  
           }
        })
        var dockedItems = [ 
           {
               //this creates the top bar, places it at the top of the page and gives it a background image
                xtype : 'toolbar',
                dock : 'top',
                style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
                items : topBar
    
            }
        ]
        // Sub-page sections


        // Main portion of the page, which includes top toolbar and content
        var welcome = new Ext.Panel({
            items: [{
                html: 'this is the welcome screen'
            }],
            title: "Welcome",
            iconCls: "welcome",
        });
        var search = new Ext.Panel({
            items: [{
                html: 'this is the search screen'
            }],
            title: "Search",
            iconCls: "search",
        });


        // This is the outer panel with the bottom toolbar
        var wrapper = new Ext.TabPanel({
            fullscreen: true,
            tabBar: {
                dock: 'bottom',
                style: 'background:#8a9cB2;',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                welcome,
                search,
                {
                    iconMask: true,
                    iconCls: "search"
                },
                {
                    iconMask: true,
                    iconCls: "user"
                }
            ],
            dockedItems: dockedItems
        });
    }
});

I have tested this code on an iPhone, Android and Blackberry simulators and it works for all 3 platforms.