Build the Your First Sencha Touch, Page 2

Building the Sencha Touch Viewport and Index Controller

In the app.js file I instantiated a class called viewport, which defines several key aspects of the mobile application layout. This class is found in a file named Viewport.js and placed in the app/views directory. This class extends one of Sencha's widgets, namely the panel, defining the panel to be full screen, and additionally docking a toolbar at the top. Several other attributes can be defined in the viewport, although due to reasons of space I'll leave it to you to learn more about the panel widget:

App.views.Viewport = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    items: [],
    dockedItems: [
      {
        xtype: 'toolbar',
        dock: 'top',
        title: 'm.example.com',
        items: [
          {
          }
        ],
      },
    ],
});

Don't forget to reference the viewport file within your index.html file, placing the following line within the VIEWS section:

<script src="/app/views/Viewport.js" type="text/javascript" target="_blank"></script>

We want the Index controller's index action to be the default, therefore it makes sense to create those first. The Index controller, defined within a file named IndexController.js and placed within the /app/controllers/ directory, looks like this:

Ext.regController('Index', {
 
  index: function()
  {

    this.indexView = this.render(
      {xtype: 'IndexIndex'}
    );
 
    this.application.viewport.setActiveItem(this.indexView);
  },

});

In this controller we define the controller name, and within it define an action named index. Within the simple index action I've defined the associated view as IndexIndex, the name of which is registered within the associated view file (named IndexView.js and found in app/views/index). Like the viewport, this view extends the panel, but to keep things easy I'll just render a simple hello string using the html attribute:

App.views.IndexIndex = Ext.extend(Ext.Panel, {
  dockedItems: [
    {
      xtype: 'panel',
      items: [
        {
          xtype: 'panel',
          items: [],
          html: 'hello',
        }
      ],
      dockedItems: [],
    },
  ],
});

Ext.reg('IndexIndex', App.views.IndexIndex);
<script src="/app/controllers/IndexController.js" type="text/javascript" target="_blank"></script>
...
<script type="text/javascript" src="/app/views/index/IndexView.js" target="_blank"></script>

Whew! It took a bit of doing but now we are getting somewhere! Try loading your application into Chrome or Safari and you'll be greeted with the default page. See Figure 1, which shows what this page looks like when loaded into my iPhone.

Click here for larger image
Figure 1. Creating a Tab Panel in Sencha Touch

Where to From Here?

While this tutorial provides you with the basis for better understanding Sencha's basic MVC behavior, the truth is Sencha is so packed with features that this short introduction barely does it justice. To learn more about what's available, be sure to check out the documentation included with the Sencha Touch download. Also, for some real inspiration be sure to check out the demos located on the Sencha Touch home page.

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

Page 2 of 2