Question

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: "name",
              label: "Name",
              placeHolder: "your name here"  
            },
            {
              xtype: "emailfield",
              name: "email",
              label: "Email",
              placeHolder: "[e-mail]"  
            },
            {
              xtype: "urlfield",
              name: "url",
              label: "Url",
              placeHolder: "http://www.example.com"  
            }
      ] 
    })    

    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",
                  items: form
                },
                {
                    xtype: 'spacer'
                },
                {
                  iconMask: true,
                  iconCls: "search",
                  items: searchPageContent
                },
                {
                    xtype: 'spacer'
                },
                {
                  iconMask: true,
                  iconCls: "user",
                  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

Answer 1

After a few days of wrestling with sencha, i found an example that almost had what i wanted so modified it and it worked out exactly the way i wanted. I now have a static top bar and a static bottom bar with page icons such that when i click the page icons, the main content scrolls and the new page is displayed.

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

});