O'Reilly logo

Sencha Touch 2 Mobile JavaScript Framework by Bryan P. Johnson, John Earl Clark

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

UI styling for toolbars and buttons

Let's do a quick review of the basic MVC application we created in Chapter 2, Creating a Simple Application, and use it to start our exploration of styles with toolbars and buttons.

To begin, we are going to add a few things to the first panel, which has our titlebar, toolbar, and Hello World text.

Adding the toolbar

In app/views, you'll find Main.js. Go ahead and open that in your editor and takea look at the first panel in our items list:

items: [
  {
      title: 'Hello',
      iconCls: 'home',
      xtype: 'panel',
      html: 'Hello World',
      items: [
         {
            xtype: 'titlebar',
            docked: 'top',
            title: 'About TouchStart'
         }
     ]
  }...

We're going to add a second toolbar on top of the existing one. Locate the items section, and after the curly braces ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required