Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About

Creating Sencha Touch Toolbar Buttons

October 14, 2010 20 Comments

In this tutorial you will learn how to create different types of toolbar buttons using the Sencha Touch Library. The sample application you will write consists of a panel and a couple of toolbars. You will dock the first toolbar to the top of the panel and the second toolbar to the bottom, as portrayed in the picture below.

These are the tasks you will complete to build the application:

  • Create a webpage to host the application
  • Write the Ext.setup function
  • Create different types of toolbar buttons
  • Create a tap handler for the buttons
  • Create and configure the toolbars
  • Create a panel and dock the toolbars

Setting up your Sencha Touch application

In order to get started you need to create an HTML page to host your application.  This page will reference the Sencha Touch library and your own scripts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <link rel="stylesheet" href="ext/resources/css/ext-touch-debug.css" type="text/css"/>
     <script type="text/javascript" src="ext/ext-touch-debug-w-comments.js"> </script>
     <script type="text/javascript" src="js/toolbar-buttons-1.js"> </script>
</head>
<body>
</body>
</html>

Now, let’s focus on the toolbar-buttons-1.js file.  The first step should be configuring the application’s icons and start-up screens.  You can do this inside the Ext.setup() function:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false
});

Ext.setup() is a native function that takes care of configuring your page so it looks great on different mobile platforms and devices.  It also hosts the onReady() function, which is where you will configure the application’s objects.

Creating different types of Sencha Touch toolbar buttons

Inside onReady(), your first assignment is to add a couple of arrays of button configurations.  These arrays contain the buttons for the top and bottom toolbars:

var buttonsSpecTop = [
    { ui: 'back', text: 'Back' },
    { xtype: 'spacer' },
    { ui: 'forward', text: 'Forward' }
]

var buttonsSpecBottom = [
    { ui: 'normal', text: 'Normal' },
    { ui: 'round', text: 'Round' },
    { ui: 'action', text: 'Action' },
    { ui: 'confirm', text: 'Confirm' }
]

Pay attention to the ui configuration option.  This option determines the look of the button.  If you examine the ui values in the code and the buttons in the screenshot, you will notice how each ui value corresponds to a different look and feel.

To see the buttons at work you can create a simple routine that will handle tap events:

var tapHandler = function (btn, evt) {
    alert("Button '" + btn.text + "' tapped.");
}

The buttons and tap handler are now ready and it’s time to create the toolbars. You can use an array to store both toolbars:

var dockedItems = [{
    xtype: 'toolbar',
    title: 'Buttons',
    ui: 'dark',
    dock: 'top',
    items: buttonsSpecTop,
    defaults: { handler: tapHandler }
}, {
    xtype: 'toolbar',
    ui: 'dark',
    dock: 'bottom',
    items: buttonsSpecBottom,
    defaults: { handler: tapHandler }
}]

Notice how each toolbar has an array of button configurations assigned to the items option, and the buttons’ tap handler is attached through the defaults configuration option.

Putting it all together

Finally, you can go ahead and create the panel that will serve as the main container for the application:

new Ext.Panel({
    id: 'buttonsPanel',
    fullscreen: true,
    dockedItems: dockedItems
});

The docketItems configuration option is used to specify one or more components to be added as docked items to the panel.  These components, commonly tool bars and tab bars, can be docked to the top, right, bottom or left of the panel.

It is possible to manipulate docked items using a number of functions.  You can use the addDocked() and removeDocked() functions to add or remove docked items, and onDockedAdd() or onDockedRemove() to perform actions upon addition or removal of docked items.  The getDockedItems() method returns an array of the currently docked components.

Here’s the complete source code:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function () {

        var buttonsSpecTop = [
            { ui: 'back', text: 'Back' },
            { xtype: 'spacer' },
            { ui: 'forward', text: 'Forward' }
        ]

        var buttonsSpecBottom = [
            { ui: 'normal', text: 'Normal' },
            { ui: 'round', text: 'Round' },
            { ui: 'action', text: 'Action' },
            { ui: 'confirm', text: 'Confirm' }
        ]

        var tapHandler = function (btn, evt) {
            alert("Button '" + btn.text + "' tapped.");
        }

        var dockedItems = [{
            xtype: 'toolbar',
            title: 'Buttons',
            ui: 'dark',
            dock: 'top',
            items: buttonsSpecTop,
            defaults: { handler: tapHandler }
        }, {
            xtype: 'toolbar',
            ui: 'dark',
            dock: 'bottom',
            items: buttonsSpecBottom,
            defaults: { handler: tapHandler }
        }]

        new Ext.Panel({
            id: 'buttonsPanel',
            fullscreen: true,
            dockedItems: dockedItems
        });
    }
});

There it is. I hope this tutorial helps you with your Sencha Touch projects.

Be mindful that the information I provide here is based on Sencha Touch 0.97 Public Beta.  You should expect to see differences with the first release of the library.

Want To Learn More?

My Sencha Touch books will teach you how to create an application from scratch.

  • Sencha Touch 2 Book
  • Sencha Touch 1 Book

Tagged With: Sencha Touch Tutorial 20 Comments

Comments

  1. Gairon says

    April 26, 2011 at 7:48 AM

    How to setup toolbar with
    dock : ‘right’
    and vertical orientation of buttons?

    Reply
  2. Ralf says

    June 28, 2011 at 3:19 AM

    Great Tutorial:
    How can I make my notes on all Phone available?

    Reply
  3. Antonio says

    September 22, 2011 at 6:17 AM

    One stupid question, how to add action on buttons?
    Example, have two panels, first have button “next”, and when I tap that button I want to show second panel.
    That second panel have button “back”, a when I tap back button I want to show first panel.

    Thanks.

    Reply
    • Jorge says

      September 22, 2011 at 8:26 AM

      Antonio, you’ll find the answer the my Writing a Sencha Touch Application tutorial.

      Reply
      • Rodrigo says

        November 26, 2012 at 10:00 PM

        This doesn’t work for me eitherI tried evtyiehrng uninstall reinstall etc etc when I turn of the SEOQuake tool bar the icon is not even available to left click so like there must be a fix please help us !!

        Reply
  4. Romy says

    October 1, 2011 at 5:12 PM

    thanks, you rule!

    Reply
  5. Akash Saikia says

    October 5, 2011 at 6:03 AM

    Wanted to ask the first question asked here

    “How to setup toolbar with
    dock : ‘right’
    and vertical orientation of buttons,icons …?”

    I am facing some problems with it as the items in the toolbar are shown horizontally.

    Thanks

    Reply
  6. Ajain says

    October 25, 2011 at 7:36 AM

    Hi Jorge,

    I am facing a problem….how do we align the image … i hav an image in my login page…i need to align the image to right but by default its aligned to the left…..

    I hav tried the align:’right’ itseems it doesnt handle align attribute so later got 2 knw tht we need to use {xtype:spacer} even this didnt do my trick….

    how do i proceed abt it …..

    Thanks

    Reply
    • Jorge says

      October 25, 2011 at 7:58 AM

      I’m not sure I understand your problem, but here’s a suggestion. If you’re using Sencha Touch 2 and let’s say you have a button, title and image setup in the toolbar, you can use these: button, spacer, label, spacer, and image.

      Reply
  7. Vivek says

    November 5, 2011 at 11:23 AM

    Good Work Jorge:)
    is there any possibility to change the color of toolbar without using any cropped content….i hav tried
    style:”background-color:#232323;” but it doesnt work is there any alternate solution for it…

    Thanks

    Reply
    • Jorge says

      November 5, 2011 at 11:54 AM

      Thank you Vivek. I would use CSS.

      Reply
  8. jb says

    November 24, 2011 at 10:10 AM

    Thank you for this tutorial, just what i was looking for to begin with sencha touch !! I really appreciate and will read your other posts about sencha !

    Reply
  9. Ramesh says

    February 4, 2012 at 2:23 AM

    hi!!!!!!!!!! iam new to sencha touch, Iam working on android, i am using sencha touch using phonegap in android, bt when i design the page in sencha touch its not appearing total form.
    example i want four buttons, its appearing 3 buttons only, how can i give scroll in sencha touch for buttons only.

    Reply
    • Mike says

      March 12, 2012 at 8:53 AM

      Ramesh, did you get a solution to this? I am having the exact same problem.

      Reply
  10. Ramona says

    April 13, 2012 at 2:47 AM

    hi, i am confused to realize a quick launch toolbar. the toolbar only can use button and spacer,how can i put a quick launch app icon on a toolbar.

    Reply
  11. Larry says

    June 15, 2012 at 3:28 PM

    Hi, this may be broken in Sencha Touch 2. Was able to add buttons in a very similar way, declaring a Navigation bar and then in config:

    navigationBar : {
    docked : ‘top’,
    dockedItems: [{
    xtype: ‘button’,
    id: ‘disclaimer’,
    iconMask: true,
    iconCls: ‘info’,
    align : ‘right’,
    }]
    }

    but it doesn’t seem to work for panels, only for navigation views.

    Reply
  12. Eulalia says

    January 21, 2013 at 10:03 AM

    Spot on with this write-up, I actually think this site needs far more attention.
    I’ll probably be back again to see more, thanks for the info!

    Reply
  13. Sur says

    June 26, 2013 at 12:46 AM

    Hi,
    i added a button in Sencha and displayed a prompt() message not i want to check which button is clicked by user cancel or ok in prompt message box and want to send that data to server.
    how can i do this?

    Reply
    • Sur says

      June 26, 2013 at 4:58 AM

      I followed this link dev.sencha.com/deploy/ext-4.0.0/examples/message-box/msg-box.html but unable to edit according to my need.I want to implement it in
      {
      xtype: ‘button’,
      text: ‘Forgot Password’,
      itemId: ‘promptButton’,
      listeners: {
      tap: function (button, e, eOpts) {

      Ext.Msg.prompt(‘Forgot Password’, ‘Your mail id’, function (answer, text) {
      Ext.Msg.alert(‘Mail-id’, ‘Your contact”‘ + text + ‘”‘);
      console.log(‘Answer to Forgot password: ‘ + text);
      }, this);
      }
      }
      },

      “text” is the value i want to pass to server.
      Help me!!!

      Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2021 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in